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" ...

随机推荐

C#调用EXE
1.问题意义据说界面程序开发,首选C#(像lebview之类的也很好) 但是,能不能用其他语言开发核心代码,只用C#做界面?毕竟每种语言都有自己擅长的领域. 2.exe程序比如有个example. ...
ch02 课下作业
2.96遵循位级浮点编码规则,实现具有如下原型的函数: /* *Compute (int) f. *If conversion causes overflow or f is NaN, return ...
linux ----> centos 网络、tomcat、vi、等等的配置和使用
网络/配置环境: centos6.8-mini-version virtualbox 工具: FileZilla client SecureCRT 静态ip地址每一台计算机分配有一个固定的IP地 ...
Practical Node.js (2018版) 第4章：模版引擎
Template Engines: Pug and Handlebars 一个模版引擎是一个库或框架.它用一些rules/languages来解释data和渲染views. web app中,view ...
C/S和B/S 《JavaWeb开发王者归来》学习笔记
RCP 桌面程序(Desktop Program)也叫胖客户端程序(Rich Client Program),需要安装到计算机上才能运行.例如:word,excel,QQ等. TCP 瘦客户端程序(T ...
DVWA--XSS解题过程
XSS概念:通常指黑客通过HTML注入纂改了网页,插入恶意脚本,从而在用户浏览网页时,控制用户浏览器的一种攻击. XSS有三种: 反射型xss:只是简单地把用户输入的数据反射给浏览器,简单来说,黑客往 ...
Shiro中Realm
6.1 Realm [2.5 Realm]及[3.5 Authorizer]部分都已经详细介绍过Realm了,接下来再来看一下一般真实环境下的Realm如何实现. 1.定义实体及关系即用户-角色 ...
seaweedFS
那首先我们来分析一下seaweedfs是什么?seaweedfs是一个非常优秀的由 golang 开发的分布式存储开源项目.它是用来存储文件的系统,并且与使用的语言无关,使得文件储存在云端变得非常方便 ...
python 小练习 5
Py从小喜欢奇特的东西,而且天生对数字特别敏感,一次偶然的机会,他发现了一个有趣的四位数2992, 这个数,它的十进制数表示,其四位数字之和为2+9+9+2=22,它的十六进制数BB0,其四位数字之和 ...
Notes for 'Making elephants fly'
1. 技术陷阱:应是需求导向, 而不是技术导向. 2. 时机最重要:而不是创造力,团队,客户,产品,或技术. 3. 模仿:能模仿就模仿,不能模仿就创新.巧匠摹形,大师窃意. good artists ...

jq demo--横向+展开菜单，支持m站

jq demo--横向+展开菜单，支持m站的更多相关文章

随机推荐

热门专题