modernizr html5响应式网站滑动下拉导航菜单自适应屏幕菜单效果



76 300 101



特效描述:响应式导航 滑动下拉导航 适应屏幕菜单,

代码结构

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

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