jQuery动画下拉导航菜单特效代码下载


jQuery动画下拉导航菜单特效代码下载
jQuery动画下拉导航菜单特效代码下载以及动画下拉、导航菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/modernizr-custom.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<header class="cd-morph-dropdown">
	<a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>
	<nav class="main-nav">
		<ul>
			<li class="has-dropdown gallery" data-content="about">
				<a href="#0">About</a>
			</li>
			<li class="has-dropdown links" data-content="pricing">
				<a href="#0">Pricing</a>
			</li>
			<li class="has-dropdown button" data-content="contact">
				<a href="#0">Contact</a>
			</li>
		</ul>
	</nav>
	<div class="morph-dropdown-wrapper">
		<div class="dropdown-list">
			<ul>
				<li id="about" class="dropdown gallery">
					<a href="#0" class="label">About</a>
					<div class="content">	
						<ul>
							<li>
								<a href="#0">
									<em>Title here</em>
									<span>A brief description here</span>
								</a>
							</li>
							<li>
								<a href="#0">
									<em>Title here</em>
									<span>A brief description here</span>
								</a>
							</li>
							<li>
								<a href="#0">
									<em>Title here</em>
									<span>A brief description here</span>
								</a>
							</li>
							<li>
								<a href="#0">
									<em>Title here</em>
									<span>A brief description here</span>
								</a>
							</li>
						</ul>
					</div>
				</li>
				<li id="pricing" class="dropdown links">
					<a href="#0" class="label">Pricing</a>
					<div class="content">
						<ul>
							<li>
								<h2>Services</h2>
								<ul class="links-list">
									<li><a href="#0">Logo Design</a></li>
									<li><a href="#0">Branding</a></li>
									<li><a href="#0">Web Design</a></li>
									<li><a href="#0">iOS</a></li>
									<li><a href="#0">Android</a></li>
									<li><a href="#0">HTML/CSS/JS</a></li>
									<li><a href="#0">Packaging</a></li>
									<li><a href="#0">Mobile</a></li>
									<li><a href="#0">UI/UX</a></li>
									<li><a href="#0">Prototyping</a></li>
								</ul>
							</li>
							<li>
								<h2>Projects</h2>
								<ul class="links-list">
									<li><a href="#0">Logo Design</a></li>
									<li><a href="#0">Branding</a></li>
									<li><a href="#0">Web Design</a></li>
									<li><a href="#0">iOS</a></li>
									<li><a href="#0">Android</a></li>
									<li><a href="#0">HTML/CSS/JS</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</li>
				<li id="contact" class="dropdown button">
					<a href="#0" class="label">Contact</a>
					<div class="content">	
						<ul class="links-list">
							<li><a href="#0">Link #1</a></li>
							<li><a href="#0">Link #2</a></li>
							<li><a href="#0">Link #3</a></li>
							<li><a href="#0">Link #4</a></li>
							<li><a href="#0">Link #5</a></li>
							<li><a href="#0">Link #6</a></li>
						</ul>
						<a href="#0" class="btn">Get in Touch</a>
					</div>
				</li>
			</ul>
			<div class="bg-layer" aria-hidden="true"></div>
		</div> <!-- dropdown-list -->
	</div> <!-- morph-dropdown-wrapper -->
</header>
<main class="cd-main-content">
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</main>
<script src="js/main.js"></script> <!-- Resource jQuery -->

相关推荐

发表评论

相关文章