CSS 是網(wǎng)頁(yè)設(shè)計(jì)中的必備工具,本文將介紹如何使用 CSS 來(lái)實(shí)現(xiàn)顯示/隱藏菜單欄。
首先,讓我們來(lái)看一下 HTML 代碼:
<div id="nav"> <ul> <li>首頁(yè)</li> <li>關(guān)于我們</li> <li>服務(wù)項(xiàng)目</li> <li>聯(lián)系我們</li> </ul> </div>
我們需要的是將 上面這段 HTML 代碼 轉(zhuǎn)化為可以被顯示/隱藏的菜單欄,通過(guò) CSS,我們可以使用以下代碼來(lái)實(shí)現(xiàn):
#nav { display: none; /* 默認(rèn)隱藏 */ } /* 點(diǎn)擊按鈕時(shí)顯示菜單欄 */ input[type="checkbox"]:checked ~ #nav { display: block; }
其中,我們使用了 CSS 中的display
屬性將菜單欄默認(rèn)隱藏。接著,我們利用input
標(biāo)簽的checked
狀態(tài),通過(guò)“兄弟選擇器”來(lái)顯示菜單欄。
通過(guò)在 HTML 中添加以下代碼,我們可以實(shí)現(xiàn)一個(gè)顯示/隱藏菜單欄的按鈕:
<input type="checkbox" id="toggle"> <label for="toggle">≡</label>
完整的 HTML 代碼如下:
<input type="checkbox" id="toggle"> <label for="toggle">≡</label> <div id="nav"> <ul> <li>首頁(yè)</li> <li>關(guān)于我們</li> <li>服務(wù)項(xiàng)目</li> <li>聯(lián)系我們</li> </ul> </div> <style> #nav { display: none; } input[type="checkbox"]:checked ~ #nav { display: block; } </style>
通過(guò)以上代碼,我們便成功地實(shí)現(xiàn)了一個(gè)能夠顯示/隱藏的菜單欄,只需要添加一些樣式和內(nèi)容,你就可以創(chuàng)建符合自己需求的菜單欄了。