jquery簡潔的企業網站響應式導航菜單代碼



117 466 156



特效描述:響應式導航 導航菜單,

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

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

3. HTML代碼

	<header class="cd-main-header">
		<a class="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Logo"></a>
		<ul class="cd-header-buttons">
			<li><a class="cd-search-trigger" href="#cd-search">Search<span></span></a></li>
			<li><a class="cd-nav-trigger" href="#cd-primary-nav">Menu<span></span></a></li>
		</ul> <!-- cd-header-buttons -->
	</header>
	<main class="cd-main-content">
		<!-- your content here -->
		<div class="cd-overlay"></div>
	</main>
	<nav class="cd-nav">
		<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
			<li class="has-children">
				<a href="#" >Clothing</a>
				<ul class="cd-secondary-nav is-hidden">
					<li class="go-back"><a href="#0">Menu</a></li>
					<li class="see-all"><a href="#" >All Clothing</a></li>
					<li class="has-children">
						<a href="#" >Accessories</a>
						<ul class="is-hidden">
							<li class="go-back"><a href="#0">Clothing</a></li>
							<li class="see-all"><a href="#" >All Accessories</a></li>
							<li class="has-children">
								<a href="#0">Beanies</a>
								<ul class="is-hidden">
									<li class="go-back"><a href="#0">Accessories</a></li>
									<li class="see-all"><a href="#" >All Benies</a></li>
									<li><a href="#" >Caps &amp; Hats</a></li>
									<li><a href="#" >Gifts</a></li>
									<li><a href="#" >Scarves &amp; Snoods</a></li>
								</ul>
							</li>
							<li class="has-children">
								<a href="#0">Caps &amp; Hats</a>
								<ul class="is-hidden">
									<li class="go-back"><a href="#0">Accessories</a></li>
									<li class="see-all"><a href="#" >All Caps &amp; Hats</a></li>
									<li><a href="#" >Beanies</a></li>
									<li><a href="#" >Caps</a></li>
									<li><a href="#" >Hats</a></li>
								</ul>
							</li>
							<li><a href="#" >Glasses</a></li>
							<li><a href="#" >Gloves</a></li>
							<li><a href="#" >Jewellery</a></li>
							<li><a href="#" >Scarves</a></li>
							<li><a href="#" >Wallets</a></li>
							<li><a href="#" >Watches</a></li>
						</ul>
					</li>
					<li class="has-children">
						<a href="#" >Bottoms</a>
						<ul class="is-hidden">
							<li class="go-back"><a href="#0">Clothing</a></li>
							<li class="see-all"><a href="#" >All Bottoms</a></li>
							<li><a href="#" >Casual Trousers</a></li>
							<li class="has-children">
								<a href="#0">Jeans</a>
								<ul class="is-hidden">
									<li class="go-back"><a href="#0">Bottoms</a></li>
									<li class="see-all"><a href="#" >All Jeans</a></li>
									<li><a href="#" >Ripped</a></li>
									<li><a href="#" >Skinny</a></li>
									<li><a href="#" >Slim</a></li>
									<li><a href="#" >Straight</a></li>
								</ul>
							</li>
							<li><a href="#0">Leggings</a></li>
							<li><a href="#0">Shorts</a></li>
						</ul>
					</li>
					<li class="has-children">
						<a href="#" >Jackets</a>
						<ul class="is-hidden">
							<li class="go-back"><a href="#0">Clothing</a></li>
							<li class="see-all"><a href="#" >All Jackets</a></li>
							<li><a href="#" >Blazers</a></li>
							<li><a href="#" >Bomber jackets</a></li>
							<li><a href="#" >Denim Jackets</a></li>
							<li><a href="#" >Duffle Coats</a></li>
							<li><a href="#" >Leather Jackets</a></li>
							<li><a href="#" >Parkas</a></li>
						</ul>
					</li>
					<li class="has-children">
						<a href="#" >Tops</a>
						<ul class="is-hidden">
							<li class="go-back"><a href="#0">Clothing</a></li>
							<li class="see-all"><a href="#" >All Tops</a></li>
							<li><a href="#" >Cardigans</a></li>
							<li><a href="#" >Coats</a></li>
							<li><a href="#" >Hoodies &amp; Sweatshirts</a></li>
							<li><a href="#" >Jumpers</a></li>
							<li><a href="#" >Polo Shirts</a></li>
							<li><a href="#" >Shirts</a></li>
							<li class="has-children">
								<a href="#0">T-Shirts</a>
								<ul class="is-hidden">
									<li class="go-back"><a href="#0">Tops</a></li>
									<li class="see-all"><a href="#" >All T-shirts</a></li>
									<li><a href="#" >Plain</a></li>
									<li><a href="#" >Print</a></li>
									<li><a href="#" >Striped</a></li>
									<li><a href="#" >Long sleeved</a></li>
								</ul>
							</li>
							<li><a href="#" >Vests</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="has-children">
				<a href="#" >Gallery</a>
				<ul class="cd-nav-gallery is-hidden">
					<li class="go-back"><a href="#0">Menu</a></li>
					<li class="see-all"><a href="#" >Browse Gallery</a></li>
					<li>
						<a class="cd-nav-item" href="#" >
							<img src="img/img.jpg" alt="Product Image">
							<h3>Product #1</h3>
						</a>
					</li>
					<li>
						<a class="cd-nav-item" href="#" >
							<img src="img/img.jpg" alt="Product Image">
							<h3>Product #2</h3>
						</a>
					</li>
					<li>
						<a class="cd-nav-item" href="#" >
							<img src="img/img.jpg" alt="Product Image">
							<h3>Product #3</h3>
						</a>
					</li>
					<li>
						<a class="cd-nav-item" href="#" >
							<img src="img/img.jpg" alt="Product Image">
							<h3>Product #4</h3>
						</a>
					</li>
				</ul>
			</li>
			<li class="has-children">
				<a href="#" >Services</a>
				<ul class="cd-nav-icons is-hidden">
					<li class="go-back"><a href="#0">Menu</a></li>
					<li class="see-all"><a href="#" >Browse Services</a></li>
					<li>
						<a class="cd-nav-item item-1" href="#" >
							<h3>Service #1</h3>
							<p>This is the item description</p>
						</a>
					</li>
					<li>
						<a class="cd-nav-item item-2" href="#" >
							<h3>Service #2</h3>
							<p>This is the item description</p>
						</a>
					</li>
					<li>
						<a class="cd-nav-item item-3" href="#" >
							<h3>Service #3</h3>
							<p>This is the item description</p>
						</a>
					</li>
					<li>
						<a class="cd-nav-item item-4" href="#" >
							<h3>Service #4</h3>
							<p>This is the item description</p>
						</a>
					</li>
					<li>
						<a class="cd-nav-item item-5" href="#" >
							<h3>Service #5</h3>
							<p>This is the item description</p>
						</a>
					</li>
					<li>
						<a class="cd-nav-item item-6" href="#" >
							<h3>Service #6</h3>
							<p>This is the item description</p>
						</a>
					</li>
					<li>
						<a class="cd-nav-item item-7" href="#" >
							<h3>Service #7</h3>
							<p>This is the item description</p>
						</a>
					</li>
					<li>
						<a class="cd-nav-item item-8" href="#" >
							<h3>Service #8</h3>
							<p>This is the item description</p>
						</a>
					</li>
				</ul>
			</li>
			<li><a href="#" >Standard</a></li>
		</ul> <!-- primary-nav -->
	</nav> <!-- cd-nav -->
	<div id="cd-search" class="cd-search">
		<form>
			<input type="search" placeholder="Search...">
		</form>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 導航切換 菜單切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子