html5 css3仿微信底部固定响应式导航菜单代码



224 895 299



特效描述:html5 css3仿微信 底部固定 响应式导航菜单,仿微信底部固定响应式导航菜单代码

代码结构

1. 引入CSS

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

2. 引入JS

<script src="nav4.js"></script>

3. HTML代码

<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">&nbsp;</div>
</div>
<script type="text/javascript">
nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll("li>a"), document.getElementById("nav4_masklayer"));
</script>		



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 二级导航菜单 文字提示框 下拉导航菜单 提示框/弹出层 竖直导航菜单 layer 图标导航菜单 lightbox 固定导航菜单 侧边导航菜单 Tooltip工具提示框 树形导航菜单 浮动提示框 网址导航菜单 html5弹窗动画 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 弹出层拖动 窗口提示框 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到