點(diǎn)評(píng)：這篇文章主要介紹了使用jquery實(shí)現(xiàn)HTML5響應(yīng)式導(dǎo)航菜單的方法,需要的朋友可以參考下
通過jquery+html5實(shí)現(xiàn)，當(dāng)瀏覽器窗口縮小或者手機(jī)訪問的時(shí)候，導(dǎo)航菜單變成按鈕下拉式菜單。效果圖：
HTML代碼：
復(fù)制代碼代碼如下:<nav id="nav-wrap">
<ul id="nav">
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</nav>
jQuery代碼：
通過以下jquery代碼，會(huì)把<div id="menu-icon">添加到<nav id="nav_wrap">中，當(dāng)點(diǎn)擊 #menu-icon 時(shí)，菜單就會(huì)顯示出來：
復(fù)制代碼代碼如下:
<script type="text/javascript" src="<a ></script</a>>
<script type="text/javascript">
$(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
通過瀏覽器查看元素可以看到html顯示的代碼如下：
復(fù)制代碼代碼如下:
<nav id="nav-wrap">
<div id="menu-icon">Menu</div>
<ul id="nav">
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</nav>
CSS代碼：
在css代碼中要先把#menu-icon的屬性設(shè)置為display:none;，然后通過媒體查詢media query判斷再把#menu-icon改為display:block;，下面是關(guān)鍵的CSS樣式代碼，判斷瀏覽器寬度小于600px時(shí)的樣式：
最終效果看文章第一張效果圖。