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

随机推荐

昂达 v891 v1 终于删除 windows 分区并且恢复了容量。
参考了很多文章(最后列出重要的),却始终失败. 途中因为乱改分区表,竟然fastboot 都进不去了,当时真是欲哭无泪. 总结关键点: 1) partition.tbl不能把硬盘剩余空间全给data分 ...
Linux网桥配置
CentOS:1.配置临时网桥,重启后风格配置丢失[root@CentOS ~]# yum -y install bridge-utils[root@CentOS ~]# brctl addbr br ...
WinForm下窗体权限设计
权限设计笔者不才看了园子里面很多园友写关于权限设计这块内容,那么笔者也在添一笔.这个是笔者在上完软件工程课程后,上交的一篇笔者论文,这里分享给大家交流,当然笔者经验尚浅,若内容有误,请大家指点出 ...
使用Vue cli3搭建一个用Fetch Api的组件
系列参考 ,英文原文参考我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...
uva11552
将字符串分为len/k块.用dp[i][j]表示第i个块必须以j结尾的最小划分.当第i块没有字符j时,dp[i][j]多计一个.如果当前块只有1种字符,那么就等于dp[i-1][j].否则对于第i块的 ...
代码版本控制[version control]之Git
如何多人协同开发同一个项目? 使用代码版本控制[version control]软件, 目前市面上比较流行的代码版本控制器有: git,svn,csv 1. 使用git管理代码版本本项目使用git管 ...
整体二分求动态区间第k大
比树状数组套主席树不知道高到哪里去了,solve(l,r,L,R)就是对于L,R的操作区间的答案都在l,r区间里,然后递归下去复杂度O(nlognlogn),每个操作会执行logn次就是o(nlog ...
python-django rest framework框架之解析器
1.解析器 : 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时不会调用. class UsersView(APIView): def get(self,request,*ar ...
MRBS开源会议室预订系统安装
MRBS系统官方网址 https://mrbs.sourceforge.io/ 最近在找一份开源的会议室预订系统,找了很多种,ASP,PHP的,测试发现MRBS无疑是最好的.开源社区对其介绍如下:M ...
springcloud之eureka配置——eureka.instance
1.在springcloud中服务的 Instance ID 默认值是: ${spring.cloud.client.hostname}:${spring.application.name}:${sp ...

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

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

随机推荐

热门专题