摘要：有些站長說想做一個手機適應(yīng)的網(wǎng)站,但是導航太難了,如果要使用框架的話,代碼非常多,冗余.再用dreamwear打開,那直接就不響應(yīng)了.我一直都喜歡用簡單的代碼來實現(xiàn),js,css3利用的好,同樣可以做...

有些站長說想做一個手機適應(yīng)的網(wǎng)站,但是導航太難了,如果要使用框架的話,代碼非常多,冗余.再用dreamwear打開,那直接就不響應(yīng)了.我一直都喜歡用簡單的代碼來實現(xiàn),js,css3利用的好,同樣可以做出好看實用的導航,關(guān)鍵是代碼極少.現(xiàn)在我把步驟分享出來。

展開后:

效果演示請縮小你的瀏覽器比例,或者直接用手機訪問.

思路是這樣的:

兩個導航,一個用于手機端顯示,一個用于電腦端顯示.自適應(yīng)的css代碼,當media screen width＜480px,則顯示mnav,隱藏PC端的nav樣式.

按鈕的動作:默認隱藏,動作點擊后出現(xiàn). 可以用×圖標,或者css直接來寫. 雖然用圖片來比較簡單,也不費事,但是css能實現(xiàn)就別用圖片了,用css來實現(xiàn)吧.

html：

<div id="mobile_nav">
    <div class="nav_box"><span class="navicon"></span></div>
    <ul class="nav_ul">
        <li><a href="#">首頁</a></li>
        <li><a href="#">前端</a></li>
        <li><a href="#">程序</a></li>
        <li><a href="#">生活</a></li>
        <li><a href="#">娛樂</a></li>
        <li><a href="#">關(guān)于</a></li>
        <li><a href="#">留言</a></li>
    </ul>
</div>

css：

	#mobile_nav { display: none; width: 100%; position: fixed; top: 0; right: 0; }
	#mobile_nav div { text-align: right; color: #fff; font-size: 18px; height: 40px; line-height: 40px; padding-left: 10px; width: 100% }
	#mobile_nav div.open { text-align: right; background: rgba(1,1,1,0.8); width: 100%; }
	#mobile_nav ul { display: none; background: rgba(1,1,1,0.8); width: 100%; padding-bottom:40px}        
	#mobile_nav li {  height: 40px; line-height: 40px; vertical-align: top; font-size: 16px; display: block; overflow: hidden; text-align: center }
	#mobile_nav a { color: #fff;}
	/* 默認 */
	#mobile_nav .navicon { margin-right: 15px; }
	.navicon { display: inline-block; position: relative; width: 30px; height: 5px; background-color: #fff; }
	.navicon:before, .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #fff; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
	.navicon:before { margin-top: -10px; }
	.navicon:after { margin-top: 10px; }
	/* 展開后導航欄目 */
	#mobile_nav div.open .navicon { background: rgba(1,1,1,0.8) }/* 使用背景色隱藏中間的紅線 */
	#mobile_nav div.open .navicon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	#mobile_nav div.open .navicon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
	#mobile_nav div.open .navicon:before, #mobile_nav div.open .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #fff; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }

	@media screen and (max-width: 480px) {
	nav { display: none }
	#mobile_nav { display: block; z-index: 99999; margin-bottom: 30px }
	}

js:

<script type="text/javascript">
window.onload = function (){
    var nav_box = document.getElementsByClassName("nav_box")[0];
    var ul = document.getElementsByClassName("nav_ul")[0];
    nav_box.onclick = function (){
        var style = ul.style;
        style.display = style.display == "block" ? "none" : "block";
        nav_box.className = style.display == "block" ? "open" : ""
    }
}
</script>

原文地址：http://www.yangqq.com/jstt/css3/2018-03-14/806.html