HTML6實(shí)現(xiàn)折疊菜單與手風(fēng)琴菜單的實(shí)例代碼
發(fā)布時(shí)間:2019-08-28 14:23:01 作者:佚名
我要評(píng)論

這篇文章主要介紹了HTML6實(shí)現(xiàn)折疊菜單與手風(fēng)琴菜單的實(shí)例代碼,需要的朋友可以參考下
頁面主體部分:
<body> <ul id="menu"> <li> <a href="#">一級(jí)菜單1</a> <ul> <li>二級(jí)菜單1-1</li> <li>二級(jí)菜單1-2</li> <li>二級(jí)菜單1-3</li> </ul> </li> <li> <a href="#">一級(jí)菜單2</a> <ul> <li>二級(jí)菜單2-1</li> <li>二級(jí)菜單2-2</li> <li>二級(jí)菜單2-3</li> </ul> </li> <li> <a href="#">一級(jí)菜單3</a> <ul> <li>二級(jí)菜單3-1</li> <li>二級(jí)菜單3-2</li> <li>二級(jí)菜單3-3</li> </ul> </li> <li> <a href="#">一級(jí)菜單4</a> <ul> <li>二級(jí)菜單4-1</li> <li>二級(jí)菜單4-2</li> <li>二級(jí)菜單4-3</li> </ul> </li> <ul> </body>
折疊菜單 例:
css部分
<head> <style type="text/css"> li{ list-style:none; 去掉列表前面圖形 } li a{ color:#123; 設(shè)置一級(jí)菜單文本顏色 } #menu ul{ display:none; 設(shè)置二級(jí)菜單默認(rèn)不顯示 } #menu>li:hover ul{ display:block; 鼠標(biāo)滑過一級(jí)菜單時(shí),顯示二級(jí)菜單 } </style> </head>
手風(fēng)琴菜單 例:
css部分
<head> <style type="text/css"> li{ list-style:none; 去掉列表前面圖形 } li a{ color:#123; 設(shè)置一級(jí)菜單文本顏色 } #menu>li,#menu>li>a,#menu>li>ul{ float:left; 一級(jí)菜單,二級(jí)菜單左移動(dòng) } #menu>li>a{ display:block; background-color;red; } #menu>li:hover ul{ display:block; } #menu>ul{ dispaly:none; width:100px; background-color:#123 ; padding-top:20px; } </style> </head>
總結(jié)
以上所述是小編給大家介紹的HTML6實(shí)現(xiàn)折疊菜單與手風(fēng)琴菜單的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
HTML5+CSS3實(shí)現(xiàn)的自定義下拉框菜單效果源碼 3D卡片折疊動(dòng)畫
今天要分享的一款CSS3自定義下拉框取代了傳統(tǒng)的Select樣式,用不一樣的風(fēng)格來讓select更加美觀。這款CSS3下拉框還有3D立體的卡片折疊動(dòng)畫效果,非???/div> 2014-11-07最新評(píng)論