分享一个微信底部固定的菜单栏超赞

最新推荐文章于 2024-02-27 18:24:11 发布

AgileHo

最新推荐文章于 2024-02-27 18:24:11 发布

阅读量3.1k

点赞数

分类专栏： PHP CSS Html

本文链接：https://blog.csdn.net/agileho/article/details/47445033

版权

CSS 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

PHP

7 篇文章 0 订阅

订阅专栏

Html

3 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title> New Document </title>

<link rel="stylesheet" type="text/css" href="menu.css" media="all">

</head>

 <body>
 
<div class="bg"><img src="imgs/home-default17.jpg" width="100%" height="100%"></div>

<div class="nav4">

	<nav>
		<div id="nav4_ul" class="nav_4">
			<ul class="box">
				<li>
					<a href="javascript:;" class=""><span>关于我们</span></a>
					<dl>
						<dd><a href="#"><span>电话</span></a></dd>
						<dd><a href="#"><span>地址</span></a></dd>
						<dd><a href="#"><span>在线客服</span></a></dd>
						<dd><a href="#"><span>在线QQ</span></a></dd>
					</dl>
				</li>
				<li>
					<a href="javascript:;" class=""><span>电商</span></a>
					<dl>
						<dd><a href="#"><span>微信会员卡</span></a></dd>
						<dd><a href="#"><span>微社区</span></a></dd>
						<dd><a href="#"><span>微投票</span></a></dd>
						<dd><a href="#"><span>微调研</span></a></dd>
					</dl>
				</li>
				<li>
					<a href="javascript:;" class="on"><span>会员专区</span></a>
					<dl>
						<dd><a href="#"><span>微商城</span></a></dd>
						<dd><a href="#"><span>微餐饮</span></a></dd>
						<dd><a href="#"><span>微团购</span></a></dd>
						<dd><a href="#"><span>微汽车</span></a></dd>
					</dl>
				</li>
			
			</ul>
		</div>
	</nav>
	
	<div id="nav4_masklayer" class="masklayer_div on"> </div>

</div>

<script src="nav4.js"></script>
<script type="text/javascript">
nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll("li>a"), document.getElementById("nav4_masklayer"));
</script>		
																
</body>
</html>

使用HTML5 和css 3 编写的很不错来自于这里