小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 一 什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...
随机推荐
- [置顶] javascript-基于对象or面向对象？
最近完成了javascript的初级学习,在这个学习的视频中,我特别注意了两个词,解释性语言和对象,javascript按照我的理解,应该是种解释性语言,他有关于面向对象的思想的体现,但是,他和vb一 ...
- hdu4474 Yet Another Multiple Problem
Yet Another Multiple Problem Description There are tons of problems about integer multiples. Despite ...
- Android零点一度的区别——Matrix
2013-07-07 导语:Matrix是android中对图像绘制的处理(旋转.放缩.平移等等),貌似书本翻页就是用这种方式处理的 正文: 1.基于坐标(px,py)旋转degrees度, post ...
- C语言序列点浅析
摘要: 现行国内的C语言教材普遍不介绍序列点,这使得读者只能“死记硬背”有序列点表达式的求值顺序,不仅造成了读者对C语言知识的认知残缺不全,而且也影响了读者学习的积极性.本文总结了序列点的作用,即表达 ...
- 常见缓存算法和LRU的c++实现
对于web开发而言,缓存必不可少,也是提高性能最常用的方式.无论是浏览器缓存(如果是chrome浏览器,可以通过chrome:://cache查看),还是服务端的缓存(通过memcached或者red ...
- Linux负载均衡软件LVS之三（配置篇）
LVS集群有DR.TUN.NAT三种配置模式,可以对www服务.FTP服务.MAIL服务等做负载均衡,下面通过搭建www服务的负载均衡实例,讲述基于DR模式的LVS集群配置. 一. Director ...
- git shell 常用命令
git branch 查看本地所有分支 git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支 git branch -r 查看远程所有分支 git ...
- 使用gulp构建自动化工作流
简单易用 高效构建 高质量的生态圈 可能很多人会说现在提gulp也太落后了吧,但我想说写点东西并不是为了讨论它是否过时,而是来帮助我们自己来记忆.整理和学习.任何工具,我需要,我才去使用它,正如此时我 ...
- Java中修饰符
下面这张图应该大家都见过,根据图表来记忆最好理解 范围 private friendly(默认) protected public 当前类 √ √ √ √ 当前包中的类 √ √ √ 当前包中的类, ...
- trove manual installation 翻译
目标 此文件提供了一步一步的指导手动安装trove在一个现有OpenStack的环境为了开发. 该文件将不包括: OpenStack的设置 trove服务配置 要求 正在运行的OpenStack的环境 ...