小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 一什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...

随机推荐

http学习笔记2（URL）
http学习笔记(二)—— 嘿!伙计,你在哪?(URL) 我们之所以希望浏览网页,其中一个重要的原因就是庞大的web世界中有很丰富的资源,他就像哆啦a梦的口袋,随时都能拿出我们想要的宝贝.这些资源通过 ...
schemamvcSpringMVC+Spring3+Hibernate4开发环境搭建
上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下schemamvc <?xml version="1.0" encoding=" ...
简化日常工作之三：自己写一个CI脚手架
程序员是诗人,应该写一些有思想意义的code,而不是每天重复造轮子,写一些低成本的业务逻辑. ---------------------------------一个脚本仔的心声由于目前公司使用CI框 ...
angularjs控制器之间通信，事件通知服务
service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...
spring请求到达controller但响应404
问题是这样的,前台发送请求的后台,后台的方法正常执行,将数据放在response.getWrite里,但在前台并没有展示数据.用浏览器的开发者工具看下请求,发现响应404. 最后网上查了查,sprin ...
mybatis 入门进阶之 pojo
有时候我们dao方法声明的入参需要是自定义的pojo,以满足复杂的查询条件. IWebUserCustomDao.java package com.mozi.dao; import java.util ...
Java基础IO文件拷贝练习题
/** * 编写一个程序,把指定目录下的所有的带.java文件都拷贝到另一个目录中,拷贝成功后,把后缀名是.java的改成.txt. */ 1.我们看到这个题还是用大化小的思想来做分析:1.拷贝 & ...
LightOJ 1248 Dice (III)
期望,$dp$. 设$dp[i]$表示当前已经出现过$i$个数字的期望次数.在这种状态下,如果再投一次,会出现两种可能,即出现了$i+1$个数字以及还是$i$个数字. 因此 $dp[i]=dp[i]* ...
IMG图片垂直居中的问题
之前老是碰到图片文字位置调整的问题,图片不按自己的要求变化,后来发现其实很简单. <P><img src="" style="vertical-alig ...
PHPStrom使用SASS,SCSS和Compass
以前尝试 SASS 的时候写了一篇安装方法,大部分操作还是相同,下面补充一些内容主要是填坑,实在太TMD坑爹了. 参考这篇文章: http://blog.csdn.net/zhouzme/articl ...

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

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

随机推荐

热门专题