modernizr html5響應式網站滑動下拉導航菜單自適應屏幕菜單效果



80 317 106



特效描述:響應式導航 滑動下拉導航 適應屏幕菜單,

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/cbpHorizontalSlideOutMenu.min.js"></script>

3. HTML代碼

<div class="main">
	<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
		<div class="cbp-hsinner">
			<ul class="cbp-hsmenu">
				<li>
					<a href="#">Lovely Spirits</a>
					<ul class="cbp-hssubmenu">
						<li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
						<li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
						<li><a href="#"><img src="images/3.png" alt="img03"/><span>Heavenly Ale</span></a></li>
						<li><a href="#"><img src="images/4.png" alt="img04"/><span>Juicy Lemonade</span></a></li>
						<li><a href="#"><img src="images/5.png" alt="img05"/><span>Wise Whiskey</span></a></li>
						<li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
					</ul>
				</li>
				<li>
					<a href="#">Delicious Beverages</a>
					<ul class="cbp-hssubmenu cbp-hssub-rows">
						<li><a href="#"><img src="images/7.png" alt="img07"/><span>Lovely Slurp</span></a></li>
						<li><a href="#"><img src="images/8.png" alt="img08"/><span>Lemony Grappa</span></a></li>
						<li><a href="#"><img src="images/9.png" alt="img09"/><span>Eggy Liquor</span></a></li>
						<li><a href="#"><img src="images/10.png" alt="img10"/><span>Fresh Juice</span></a></li>
						<li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
						<li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
						<li><a href="#"><img src="images/3.png" alt="img03"/><span>Heavenly Ale</span></a></li>
						<li><a href="#"><img src="images/4.png" alt="img04"/><span>Juicy Lemonade</span></a></li>
						<li><a href="#"><img src="images/5.png" alt="img05"/><span>Wise Whiskey</span></a></li>
						<li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
						<li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
						<li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
					</ul>
				</li>
				<li>
					<a href="#">Fine Liquors</a>
					<ul class="cbp-hssubmenu">
						<li><a href="#"><img src="images/10.png" alt="img10"/><span>Fresh Juice</span></a></li>
						<li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
						<li><a href="#"><img src="images/9.png" alt="img09"/><span>Eggy Liquor</span></a></li>
					</ul>
				</li>
				<li><a href="#">Our Mission</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
	</nav>
</div>
<script type="text/javascript">
var menu = new cbpHorizontalSlideOutMenu( document.getElementById( 'cbp-hsmenu-wrapper' ) );
</script>



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


熱門標簽:
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子