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();
    	})
    });
    
  • 相关阅读:
    邀请函|2021 云原生实战峰会,邀请您免费现场参会报名
    Game On Serverless:SAE 助力广州小迈提升微服务研发效能
    说出你和「云原生」的故事,获得年度云原生顶级盛会通行证
    巧用浏览器F12调试器定位系统前后端bug
    测试人员怎样定位bug原因
    mysql删除某个表前100条数据
    设计模式之工厂方法模式
    2021.11.19
    20211117
    JQuery插件集合
  • 原文地址:https://www.cnblogs.com/chenshuo/p/5110150.html
Copyright © 2011-2022 走看看