小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>

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

每天一个JS 小demo之树菜单。主要知识点：DOM方法综合运用，递归运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
ListView之点击展开菜单
一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...
新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
Nancy之基于Nancy.Hosting.Self的小Demo
继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...
Nancy之基于Self Hosting的补充小Demo
前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...
一周一个小demo — 前端后台的交互实例
这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览首先我们来看一下这个小demo的具体 ...
js存款计算器原生小demo
大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...
一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
python 词云小demo
词云小demo jiebawordcloud 一什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...

随机推荐

Winform常用开发模式第一篇
Winform常用开发模式第一篇上一篇博客最后我提到“异步编程模型”(APM),之后本来打算整理一下这方面的材料然后总结一下写篇文章与诸位分享,后来在整理的过程中不断的延伸不断地扩展,发现完全偏离了 ...
Jenkins安装plugin
Jenkins支持很多的plugin,这些plugin极大地丰富了Jenkins的功能.安装plugin有两种方式:自动安装和手动安装. 1.自动安装这种方式非常简单,但前提是Jenkins必须连接 ...
用友CDM系统“货位间商品移库单（一步）”表体增加“货位可用数量”字段，根据表头的选择的货位自动带出数值
系统控制台——业务单据定制——货位间商品移库单(一步) 明细字段——增加“可销数量”字段. 然后修改明细字段的“商品编号”自定义查询方案. 增加自定义资料检索方案hwyksp SQL: select ...
不想再做"鸟蛋"
至今为止学习C++两个学期了,有过迷茫,有过自信,有过崩溃,有过希望,有过伤心,有过高兴.这一路走来,C++虐我千百遍,我待C++如"初恋". ...
Android call setting 源码分析
看下篇之前,请先读这三篇文章: Android GSM驱动模块(rild)详细分析(一)基本架构及初始化 Android GSM驱动模块(rild)详细分析(二)request流程 Android G ...
总结 React 组件的三种写法及最佳实践 [涨经验]
React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...
SQL 网文链接
使用自定义表类型(SQL Server 2008) http://www.cnblogs.com/chenxizhang/archive/2009/04/28/1445234.html
[ios]iphone 获取UIWebView内Html方法
原文:http://blog.csdn.net/diyagoanyhacker/article/details/6564897 获取所有html:NSString *lJs = @"docu ...
app外包开发注意事项大全『最新』
随着移动互联网的高速发展,很多互联网创业公司或传统向互联网转型的公司都急需发开一款app软件,多数公司会选择让外包公司来开发.问题来了,App外包市场鱼龙混杂,我们要如何在这里面选择一个靠谱的公司,这 ...
如何使用jQuery动态的在body里添加script标签？
var script = document.createElement('script'); script.type = 'text/jacascript'; script.src = 'url'; ...

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

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

随机推荐

热门专题