透過jquery html5實現,當瀏覽器視窗縮小或手機存取的時候,導航選單變成按鈕下拉式選單。效果圖:
HTML程式碼:
<br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode103'));"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode103"><nav id="nav-wrap"><br> <ul id="nav"> <br> <li><a href="#">Button</a></li> <br> <li><a href="#">Button</a></li> <br> </ul> <br></nav></div>
jQuery代碼:
透過以下jquery程式碼,會把
透過瀏覽器查看元素可以看到html顯示的程式碼如下:
<br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode105'));"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode105"> <br><nav id="nav-wrap"><br> <div id="menu-icon">Menu</div> <br> <ul id="nav"> <br> <li><a href="#">Button</a></li> <br> <li><a href="#">Button</a></li> <br> </ul> <br></nav> </div>
CSS代碼:
在css程式碼中要先把#menu-icon的屬性設定為display:none;,然後透過媒體查詢media query判斷再把#menu-icon改為display:block;,下面是關鍵的CSS樣式程式碼,判斷瀏覽器寬度小於600px時的樣式:
最終效果看文章第一張效果圖。