jq demo--横向+展开菜单,支持m站
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<style type="text/css">
html,nav,h2,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
a{outline:none;text-decoration:none;}
html {
height: 100%;
width: 100%;overflow-x:hidden;
font-family:Tahoma,'Heiti SC', 'Microsoft YaHei', Geneva, sans-serif;
outline: 0;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
font-size:100px;
}
body {
width:100%;
height: 100%;
font-size: 0.28rem;
line-height: 150%;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img{
border:none;
width:100%;
vertical-align:middle;
}
@media (min-width: 320px){
html {
font-size: 43px;
}
}
@media (min-width: 360px){
html {
font-size: 48px;
}
}
@media (min-width: 375px){
html {
font-size: 50px;
}
}
@media (min-width: 401px){
html {
font-size: 56px;
}
}
@media (min-width: 428px){
html {
font-size: 35px;
}
}
@media (min-width: 480px){
html {
font-size: 64px;
}
}
@media (min-width: 568px){
html {
font-size: 76px;
}
}
@media (min-width: 600px){
html {
font-size: 80px;
}
}
@media (min-width: 640px){
html {
font-size: 86px;
}
}
@media (min-width: 641px){
html {
font-size: 100px;
}
}
/*nav*/
.ff_nav{
position: relative;
background:#fff;height:0.8rem;
}
.line_nav{
height:0.6rem;line-height:0.6rem;
padding:0.1rem;
display:-webkit-flex;
display:flex;
overflow:hidden;
width:98%;
}
.line_nav li{
-webkit-flex:initial;
flex:initial;
min-width:0.9rem;
margin:0 0.1rem;
text-align:center;
}
.line_nav a{
font-size:0.26rem; color:#666;
}
.line_nav .current{
color:#4b943c;
border-bottom:0.05rem solid #4b943c;
}
.open_bg{
background:#000;opacity:0.5;position:fixed;left:0;top:0;width:100%;height:100%;display:none;z-index:1;
}
.open_h{font-size:0.24rem;color:#333;display:none;width:100%; background:#f8f6f7;
height:0.8rem;line-height:0.8rem;padding-left:0.3rem;position:absolute;left:0;top:0;z-index:10;
}
.img_box{
position:absolute;right:0;top:0.1rem;display:block;
width:0.9rem;height:0.52rem;padding-top:0.08rem;text-align:center;
background:#fff;border-left:0.02rem solid #e5e5e5;z-index:10;
}
.img_box img{width:0.26rem;height:0.16rem;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.img_box_on{border-left:none;background:#f8f6f7;}
.img_box_on img{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*open_all_nav*/
.open_munu{
background:#fff;
border-collapse:collapse;
width:100%;display:none;
position:absolute;left:0;top:0.8rem;z-index:10;
}
.open_munu td{
vertical-align:middle;text-align:center;
width:25%;
height:1.6rem;
border:2px solid #e5e5e5;
}
.open_munu td a{
display:inline-block;min-width:0.58rem;
font-size:0.2rem;color:#666;
}
.open_munu img{
width:0.58rem;height:0.58rem;
}
.open_munu .cur img{
background:#ffee3c;
}
</style> <body>
<nav class="ff_nav">
<div id="wrapper" >
<div id="scroll">
<ul class="line_nav">
<li class="current"><a href="index.html">推荐</a></li>
<li data-categoryid="12"><a href="/list.html?categoryID=12">水果</a></li>
<li data-categoryid="11"><a href="/list.html?categoryID=11">蔬菜</a></li>
<li data-categoryid="17"><a href="/list.html?categoryID=17">海鲜</a></li>
<li data-categoryid="13"><a href="/list.html?categoryID=13">肉类</a></li>
<li data-categoryid="18"><a href="/list.html?categoryID=18">速食</a></li>
<li data-categoryid="19"><a href="/list.html?categoryID=19">蛋奶</a></li>
<li data-categoryid="20"><a href="/list.html?categoryID=20">零食</a></li>
<li data-categoryid="21"><a href="/list.html?categoryID=21">酒饮</a></li>
<li data-categoryid="22"><a href="/list.html?categoryID=22">粮油</a></li>
<li data-categoryid="99"><a href="/list.html?categoryID=99">家居</a></li>
<li data-categoryid="108"><a href="/list.html?categoryID=108">礼品</a></li>
<li></li>
</ul>
</div>
</div>
<div class="open_bg"></div>
<h2 class="open_h">全部分类</h2>
<div class="img_box"><img src="data:images/open_l.jpg"></div>
<table cellpadding="0" cellspacing="0" border="0" class="open_munu">
<tbody><tr>
<td data-categoryid="12">
<a href="/list.html?categoryID=12"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1471915724561.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1471915724561.png?imageView2/2/w/64/q/100"><br>水果</a>
</td>
<td data-categoryid="11">
<a href="/list.html?categoryID=11"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864349432.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864349432.png?imageView2/2/w/64/q/100"><br>蔬菜</a>
</td>
<td data-categoryid="17">
<a href="/list.html?categoryID=17"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864359894.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864359894.png?imageView2/2/w/64/q/100"><br>海鲜</a>
</td>
<td data-categoryid="13">
<a href="/list.html?categoryID=13"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864376471.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864376471.png?imageView2/2/w/64/q/100"><br>肉类</a>
</td>
</tr><tr>
<td data-categoryid="18">
<a href="/list.html?categoryID=18"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864395165.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864395165.png?imageView2/2/w/64/q/100"><br>速食</a>
</td>
<td data-categoryid="19">
<a href="/list.html?categoryID=19"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864410881.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864410881.png?imageView2/2/w/64/q/100"><br>蛋奶</a>
</td>
<td data-categoryid="20">
<a href="/list.html?categoryID=20"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864421672.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864421672.png?imageView2/2/w/64/q/100"><br>零食</a>
</td>
<td data-categoryid="21">
<a href="/list.html?categoryID=21"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864432956.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864432956.png?imageView2/2/w/64/q/100"><br>酒饮</a>
</td>
</tr><tr>
<td data-categoryid="22">
<a href="/list.html?categoryID=22"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864442406.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864442406.png?imageView2/2/w/64/q/100"><br>粮油</a>
</td>
<td data-categoryid="99">
<a href="/list.html?categoryID=99"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864453418.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864453418.png?imageView2/2/w/64/q/100"><br>家居</a>
</td>
<td data-categoryid="108">
<a href="/list.html?categoryID=108"><img class="lazy" data-original="http://qiniu.freshfresh.com/ff_app_3_0_1462864471110.png?imageView2/2/w/64/q/100" src="http://qiniu.freshfresh.com/ff_app_3_0_1462864471110.png?imageView2/2/w/64/q/100"><br>礼品</a>
</td>
<td></td>
</tr>
</tbody></table>
</nav>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//横向菜单
$(function () {
$(".line_nav>li").click(function () {
$(this).addClass("current").parent().siblings().removeClass("current");
});
$('nav .img_box').on('click',function(){
var self = $(this);
var isOpen = self.hasClass('img_box_on');
$('.img_box').removeClass('img_box_on');
$(".line_nav").toggle();
$(".open_h").toggle();
$(".open_bg").toggle();
$(".open_munu").toggle();
if(!isOpen){
self.addClass('img_box_on');
}
});
$(".open_bg").click(function(){
$('.img_box').removeClass('img_box_on');
$(".line_nav").toggle();
$(".open_h").toggle();
$(".open_bg").toggle();
$(".open_munu").toggle();
});
});
</script> </body>
</html>
jq demo--横向+展开菜单,支持m站的更多相关文章
- ListView之点击展开菜单
一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...
- html模拟组织架构横向展开
近期看到不少人有相似的需求.实现组织架构的横向展开,显示.无聊就做了一下.先看下终于的效果图 兼容各大主流浏览器,而且支持IE6.7,8,不同的是排除标签圆角效果外,资源文件:文件下载地址 主流浏览器 ...
- web标准(复习)--7 横向导航菜单
今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...
- 【Android进阶】自定义控件实现底部扇形展开菜单效果
这个项目是优化的其他人的,主要优化了界面菜单的显示,下面开始. 先看效果图 项目的总结构 下面开始贴代码,由于必要的地方都添加了注释,所以不过多讲解 anim_button.xml <?xml ...
- java Swing 如何添加点击可展开菜单控件( JMenuBar如何使用?)
准备: JMenuBar 点击可展开控件本体 JMenu 点击可展开控件中的一级菜单 JMenuItem 点击可展开控件中的二级菜单 JFrame 程序运行时弹出的那个框框 这是一个使用点击可展开菜 ...
- Web标准:七、横向导航菜单
Web标准:七.横向导航菜单 知识点: 1.横向列表菜单 2.用图片美化的横向导航 3.css Sprites 1)横向列表菜单 可以在第四节课的基础上来实现横向导航菜单,只要给li一个float ...
- jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- 【CSS3】精美横向滚动菜单按钮
废话不多说,直接上图: 然后是代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- windows10 64bit 下的tensorflow 安装及demo
目前流行的深度学习库有Caffe,Keras,Theano,本文采用谷歌开源的曾用来制作AlphaGo的深度学习系统Tensorflow. 1:安装Tensorflow 最早TensorFlow只支持 ...
- 单细胞数据初步处理 | drop-seq | QC | 质控 | 正则化 normalization
比对 The raw Drop-seq data was processed with the standard pipeline (Drop-seq tools version 1.12 from ...
- English trip V1 - 12.Belongings 行李 Teacher:Jade Key: ?
In this lesson you will learn to describe your home life and things you own. 在本课中,您将学习如何描述您的家庭生活和您拥有 ...
- MyEclipse配置Tomcat服务器(最简单的配置过程)
MyEclipse配置Tomcat服务器比较简单,在这里直接给出简要的配置步骤了,相信大家都能很容易明白…… 1.Window->Preferences 2.根据你的Tomcat版本找到对应的T ...
- (未完成👃)You Don't Know JS: Scope & Closures (第5章: Scope & Closures)
Chapter 5: Scope Closure 我们到达这里时,已经对作用域如何工作有了非常健康稳固的理解. 下面,我们转移注意力到一个及其重要,但长期难以理解,几乎是神话中的部分语言:Closur ...
- 以太坊 web3.js 文档翻译及说明
这些天,为了录制以太坊DAPP开发实战课程,我准备把web3文档全部翻译一下(并做适当的补充),目前web3.js 0.20.x 版本 已经翻译完成,欢迎大家前往查阅. 这里还几个实用DEMO,供大家 ...
- android-------Android Studio使用MAT分析工具遇到的错误
今天主要介绍一下我使用MAT工具分析文件时遇到的一个错误 Error opening heap dump 'a.hprof'. Check the error log for further deta ...
- appium自动化环境搭建(python语言开发)
简述 1.安装jdk,配置环境变量 2.安装AndroidSDK,配置环境变量 3.安装Python 4.安装Python集成开发环境PyCharm 5.安装node 6.安装appium服务端 7. ...
- POJ-3041-建图/二分图匹配/网络流
Asteroids Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26351 Accepted: 14254 Descr ...
- UI BOL 练习 get value set attr
" " " " "**********************change list************************* "2 ...