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

随机推荐

PHP语言基础03 By ACReaper
03.01逻辑运算符 &&,and ||,or xor 这里只强调一点用and或者or的话,记得加上括号,不然可能出错,至于原因我也不是很清楚,反正尽量直接用&&,|| ...
hdu 1166 敌兵布阵（线段树基础题）
学习线段树~~~~~~~~~~~~要好好理解此题是单点更新的线段树,考虑基本的询问,更新. #include <iostream> #include <algorithm> ...
UIColor RGB颜色对照表
色彩 RGB 值对照表 color red green blue Hexadecimal triplet example Aliceblue 240 248 255 f0f8ff ...
作怪的Buffer
俗话说:人丑多作怪.在编程界里面也有很多作怪之物,其中首推buffer. 上一次聊到了tar.gz创建导出的问题,我本以为自己把相关的文件流操作都摸清楚了.没想到当我开心地去研究ip库替换方案和同事们 ...
ICSharpCode.TextEditor如何自定义代码折叠和高亮
ICSharpCode.TextEditor 是一款非常不错的.NET代码编辑控件,内置了多种高亮语言支持,同时完美支持中文,非常赞!先来看一下运行效果: 1 项目结构这里需要注意lib文件夹下导入 ...
Spring实战——通过Java代码装配bean
上篇说的是无需半行xml配置完成bean的自动化注入.这篇仍然不要任何xml配置,通过Java代码也能达到同样的效果. 这么说,是要把上篇的料拿出来再煮一遍? 当然不是,上篇我们几乎都在用注解的方式如 ...
Tomcat v7.0 Server at localhost are already in use，tomcat提示端口被占用，tomcat端口已经被使用，tomcat端口占用
Tomcat v7.0 Server at localhost are already in use, tomcat提示端口被占用,tomcat端口已经被使用 >>>>> ...
NG2入门 - 根模块
根模块 app.module 建议大家先去学习angularjs官网的英雄教程后再进行后面的阅读,app.module.ts 就是ng2应用中的引导启动模块也称根模块 import { NgModul ...
C++11多线程std::thread的简单使用
在cocos2dx 2.0时代,我们使用的是pthread库,是一套用户级线程库,被广泛地使用在跨平台应用上.但在cocos2dx 3.0中并未发现有pthread的支持文件,原来c++11中已经拥有 ...
PHP集成环境自定义设置PHP版本，同时运行多个php版本，700个PHP版本随时切换，一键开启常用模块。
本文采用我自己开发的纯绿色版WAMP环境(我将这个WAMP环境命名为PHPWAMP) (PHPWAMP默认集成VC,不需要单独安装) 那么什么是WAMP环境?WAMP这个词是什么意思? Windows ...

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

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

随机推荐

热门专题