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();
    	})
    });
    
  • 相关阅读:
    Sublime Text 2 实用快捷键[Mac OS X]
    SublimeText2 快捷键一览表
    sublime text 3 快捷键大全以及配置编译环境
    解决Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in
    PHP中include和require的区别详解
    Call to undefined function imagettftext()解决方法
    mysql单引号和双引号的用法
    php.ini 配置文件的深入解析
    《JavaScript设计模式与开发实践》—— 代理模式
    《JavaScript高级程序设计》—— DOM
  • 原文地址:https://www.cnblogs.com/chenshuo/p/5110150.html
Copyright © 2011-2022 走看看