zoukankan      html  css  js  c++  java
  • 精仿公众号菜单效果

    基于微信开发的web应用经常会用到“微信菜单”,今天专门仿制了一下微信的菜单效果,把项目中的代码提取出来,方便以后使用、改进。

    图片效果

    HTML

    <div id="nav">
    	<ul>
    		<li class="menu" data-show="off">
    			<a href=""><i class="iconfont icon-caidan"></i>产品系列</a>
    			<div class="submenu">
    				<p><a href="">家用产品系列</a></p>
    				<p><a href="">车用产品系列</a></p>
    				<p><a href="">LIFAair滤芯</a></p>
    				<div class="line"></div>
    				<div class="down"></div>
    				<div class="down-border"></div>
    			</div>
    		</li>
    		<li class="menu">
    			<a href=""><i class="iconfont icon-caidan"></i>在线购</a>
    			<div class="submenu">
    				<p><a href="">我的订单</a></p>
    				<p><a href="">购物车</a></p>
    				<p><a href=">U拍精选</a></p>
    				<div class="line"></div>
    				<div class="down"></div>
    				<div class="down-border"></div>
    			</div>
    		</li>
    		<li class="menu">
    			<a href=""><i class="iconfont icon-caidan"></i>购物指南</a>
    			<div class="submenu">
    				<p><a href="/home/order">常见问题</a></p>
    				<p><a href="">购买指引</a></p>
    				<p><a href="">使用教程</a></p>
    				<div class="line"></div>
    				<div class="down"></div>
    				<div class="down-border"></div>
    			</div>
    		</li>
    	</ul>
    </div>
    

    CSS

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: inherit;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    }
    html {
    	-webkit-text-size-adjust: 100%;
    	-ms-text-size-adjust: 100%;
    	height: 100%;
    }
    body {
    	font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    	font-weight: normal;
    	font-style: normal;
    	font-size: 14px;
    	height: 100%;
        background-color: #f8f8f8;
    }
    #wrapper {
    	 100%;
    	max- 600px;
    	margin: 0 auto;
    	padding-bottom: 80px;
    }
    #nav {
    	position: fixed;
    	bottom: 0px;
    	left: 0px;
    	 100%;
    }
    #nav ul {
    	 100%;
    	max- 600px;
    	margin: 0 auto;
    	background-color: rgba(253, 253, 253, 1);
    	position: relative;
    }
    #nav ul:after {
    	content: "";
    	display: table;
    	clear: both;
    }
    #nav ul:before {
    	content: "";
    	position: absolute;
    	top: 0;
    	left: 0;
    	display: block;
    	border-bottom: 1px solid #999;
    	 200%;
    	height: 1px;
    	transform: scale(0.5,0.5);
    	transform-origin: 0 0;
    	-webkit-transform: scale(0.5,0.5);
    	-webkit-transform-origin: 0 0;
    	box-sizing: border-box;
    }
    #nav ul li {
    	float: left;
    }
    
    #nav ul li.menu i.iconfont {
    	color: #777;
    	padding-right: 3px;
    	padding-top: 1px;
    	font-size: 12px;
    }
    #nav ul li.menu {
    	 33.33333333%;
    	position: relative;
    	text-align: center;
    }
    #nav ul li.menu:before {
    	content: "";
    	display: block;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	border-left: 1px solid #999;
    	 1px;
    	height: 200%;
    	transform: scale(0.5,0.5);
    	transform-origin: 0 0;
    	-webkit-transform: scale(0.5,0.5);
    	-webkit-transform-origin: 0 0;
    	box-sizing: border-box;
    }
    #nav ul li.menu > a {
    	display: block;
    	padding-top: 12px;
    	padding-bottom: 12px;
    	color: #555;
    }
    #nav .submenu {
    	display: none;
    	position: absolute;
    	left: 4%;
    	bottom: 54px;
    	 92%;
    	border-radius: 5px;
    }
    #nav .submenu .line {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	height: 200%;
    	 200%;
    	border: 1px solid #888;
    	z-index: -1;
    	background-color: #fff;
    	border-radius: 8px;
    	transform: scale(0.5,0.5);
    	transform-origin: 0 0;
    	-webkit-transform: scale(0.5,0.5);
    	-webkit-transform-origin: 0 0;
    	box-sizing: border-box;
    }
    #nav .submenu .down {
    	position: absolute;
    	bottom: -5px;
    	left: 50%;
    	margin-left: -6px;
    	 0px;
    	height: 0px;
    	border-left: 6px solid transparent;
    	border-right: 6px solid transparent;
    	border-top: 6px solid #fff;
    	z-index: 2;
    }
    #nav .submenu .down-border {
    	position: absolute;
    	bottom: -6px;
    	left: 50%;
    	margin-left: -6px;
    	 0px;
    	height: 0px;
    	border-left: 6px solid transparent;
    	border-right: 6px solid transparent;
    	border-top: 6px solid #888;
    	z-index: 1;
    }
    #nav .submenu p {
    	padding-top: 12px;
    	padding-bottom: 12px;
    	 88%;
    	margin: 0 auto;
    	position: relative;
    }
    #nav .submenu p:first-child:after {
    	content: "";
    	display: block;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	border-top: 0px;
    }
    #nav .submenu p:after {
    	content: "";
    	display: block;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	border-top: 1px solid #999;
    	 200%;
    	height: 1px;
    	transform: scale(0.5,0.5);
    	transform-origin: 0 0;
    	-webkit-transform: scale(0.5,0.5);
    	-webkit-transform-origin: 0 0;
    	box-sizing: border-box;
    }
    #nav .submenu p a {
    	color: #333;
    }
    #nav .on {
    	display: block;
    }
    

    js

    $(function() {
    	$('#nav li').click(function() {
    		if($(this).attr('data-show') == 'on') {
    			$(this).attr('data-show', 'off');
    			$(this).find('.submenu').hide();
    		} else {
    			$(this).attr('data-show', 'on').siblings().attr('data-show', 'off');
    			$(this).find('.submenu').show();
    			$(this).siblings().find('.submenu').hide();
    		}
    		return false;
    	});
    
    	$('#nav li .submenu p a').click(function(event) {
    		event.stopPropagation();
    	})
    });
    
  • 相关阅读:
    QString::toStdString() crashes
    Consolas 字体
    Mesh BRep Shapes
    PyOpenCL库安装
    全国精确到乡镇的行政边界、路网水系建筑poi等矢量shp免费下载
    DEM数据(ASTER GDEM|SRTM|GLS2005|ALOS DEM)下载
    IDL基础
    辐射定标与FLAASH大气校正
    Circos绘图—基础
    R-散点密度图
  • 原文地址:https://www.cnblogs.com/chenshuo/p/5110150.html
Copyright © 2011-2022 走看看