jQuery响应式网站导航栏特效代码下载


jQuery响应式网站导航栏特效代码下载
jQuery响应式网站导航栏特效代码下载以及响应式、网站导航栏等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="./css/layout.css">

2. 引入JS

<script src="./js/JQuery2.1.4.js"></script>

3. HTML代码

<h1 style="text-align: center;font-size: 20px;padding: 30px 0;">响应式导航,切换为移动端模式可预览</h1>
<div class="nav">
	<div class="mobNav">
		<div class="toolBar">
				<button class="menuBtn"></button>
				<a href="#">
					<img src="./imgs/addidas.png" alt="">
				</a>
				<span></span>
		</div>
	</div>
	<div class="dropdown">
		<ul class="menu">
			<li><a href="#">网站主页</a></li>
			<li><a href="#">新闻中心</a></li>
			<li><a href="#">产品中心</a></li>
			<li><a href="#">荣誉资质</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">发展历程</a></li>
			<li><a href="#">联系方式</a></li>
		</ul>
	</div>
</div>
<script>
	$(function(){
		$('.menuBtn').click(function(){
			$('.dropdown').toggleClass('show');
			$(this).toggleClass('close');
		});
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章