CSS3實現的美觀多級下拉選單效果程式碼例項
本章節分享一段程式碼例項,它利用CSS3實現了美觀的多級下拉選單效果。關於CSS3的程式碼本人感覺真的沒有什麼好分析的,首先CSS比較簡單,只要理解了各個屬性的含義,明白實現過程和原理都是不成問題的,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0px; padding:0px; } body{ background:#b1b1b1; margin:0px; padding:0px; font-size:14px; color:#000; } .tips{ width:702px; margin:0 auto; line-height:24px; padding-top:10px; } .bredcolor{ color:#fff; }#menu{ width:700px; text-align:center; height:38px; background:#069; margin:50px auto 300px auto; padding:3px 6px; border-radius:6px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.5); } #menu ul{ margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#069; } #menu ul{ display:inline-block; } #menu li{ margin:0; padding:0; list-style:none; }#menu li{ display:inline-block; display:inline; } #menu ul ul{ position:absolute; left:-9999px; opacity:0; padding:3px 6px; border-radius:6px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.5); -webkit-transition<img src="static/image/smiley/default/shocked.gif" smilieid="6" border="0" alt="">pacity 1s; -moz-transition<img src="static/image/smiley/default/shocked.gif" smilieid="6" border="0" alt="">pacity 1s; -ms-transition<img src="static/image/smiley/default/shocked.gif" smilieid="6" border="0" alt="">pacity 1s; -o-transition<img src="static/image/smiley/default/shocked.gif" smilieid="6" border="0" alt="">pacity 1s; transition<img src="static/image/smiley/default/shocked.gif" smilieid="6" border="0" alt="">pacity 1s; } #menu ul.level1{margin:0 auto;} #menu ul.level1 li.level1-li{ float:left; display:block; position:relative; }#menu a{ display:block; font:normal 12px tahoma,arial,宋體b8b\4f53,sans-serif; color:#fff; line-height:30px; text-decoration:none; padding:0 20px 0 10px; margin:3px; background:#069; border:1px solid #09c; border-radius:3px; background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2)),color-stop(0.5,transparent),to(rgba(255,255,255,0.3))); background-image:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); background-image:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); background-image:-o-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); background-image:linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); -webkit-transition:0.25s; -moz-transition:0.25s; -ms-transition:0.25s; -o-transition:0.25s;transition:0.25s; } #menu input{ display:none; } #menu label{ display:block; font:normal 12px tahoma,arial,宋體b8b\4f53,sans-serif; color:#fff; line-height:30px; padding:0 20px 0 10px; margin:3px; position:relative; background:#069; border:1px solid #09c; border-radius:3px; background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2)),color-stop(0.5,transparent),to(rgba(255,255,255,0.3))); background-image:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); background-image:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); background-image:-o-linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); background-image:linear-gradient(top,rgba(255,255,255,0.7) 0,rgba(255,255,255,0.2) 50%,transparent 50%,rgba(255,255,255,0.3) 100%); -webkit-transition:0.25s; -moz-transition:0.25s; -ms-transition:0.25s; -o-transition:0.25s; transition:0.25s; } #menu label img{ position:absolute; left:0; top:0; width:100%; height:100%; }#menu label b{ color:#ff0; } #menu ul.level1 li.level1-li a.level1-a{float:left;} #menu input#tab1:checked~ul.level1 ul.ul1,#menu input#tab2:checked~ul.level1 ul.ul2,#menu input#tab3:checked~ul.level1 ul.ul3{ opacity:1; left:-6px; top:50px; }#menu input#tab4:checked~ul.level1 ul.ul4{ opacity:1; left:auto; right:0; top:50px; } #menu input#tab2a:checked~ul.level1 ul.ul2,#menu input#tab2b:checked~ul.level1 ul.ul2,#menu input#tab2c:checked~ul.level1 ul.ul2,#menu input#tab2aa:checked~ul.level1 ul.ul2{ opacity:1; left:-6px; top:50px; }#menu input#tab2a:checked~ul.level1 ul.ul2 ul.ul2a,#menu input#tab2b:checked~ul.level1 ul.ul2 ul.ul2b,#menu input#tab2c:checked~ul.level1 ul.ul2 ul.ul2c,#menu input#tab2aa:checked~ul.level1 ul.ul2 ul.ul2a,#menu input#tab2aa:checked~ul.level1 ul.ul2 ul.ul2a ul.ul2aa{ opacity:1; left:100%; top:auto; margin-top:-40px; margin-left:5px; } #menu input#tab4a:checked~ul.level1 ul.ul4,#menu input#tab4b:checked~ul.level1 ul.ul4,#menu input#tab4aa:checked~ul.level1 ul.ul4{ opacity:1; left:auto; right:0; top:50px; } #menu input#tab4a:checked~ul.level1 ul.ul4 ul.ul4a,#menu input#tab4b:checked~ul.level1 ul.ul4 ul.ul4b,#menu input#tab4aa:checked~ul.level1 ul.ul4 ul.ul4a,#menu input#tab4aa:checked~ul.level1 ul.ul4 ul.ul4a ul.ul4aa{ opacity:1; left:auto; right:100%; top:auto; margin-top:-40px; margin-right:5px; } #menu li a:hover{ border-color:#fff; } #menu label.close{ position:absolute; width:100%; height:30px; display:none; padding:0; left:0; top:0; border:0; background:transparent; } #menu input#tab1:checked~ul.level1 label.lab1,#menu input#tab2:checked~ul.level1 label.lab2,#menu input#tab2a:checked~ul.level1 label.lab2,#menu input#tab2b:checked~ul.level1 label.lab2,#menu input#tab2c:checked~ul.level1 label.lab2,#menu input#tab2aa:checked~ul.level1 label.lab2,#menu input#tab3:checked~ul.level1 label.lab3,#menu input#tab4:checked~ul.level1 label.lab4,#menu input#tab4a:checked~ul.level1 label.lab4,#menu input#tab4b:checked~ul.level1 label.lab4,#menu input#tab4aa:checked~ul.level1 label.lab4{display:block;} </style> </head> <body> <div id="menu"> <input type="radio" name="tab" id="tab1" class="tabs"> <input type="radio" name="tab" id="tab2" class="tabs"> <input type="radio" name="tab" id="tab2a" class="tabs"> <input type="radio" name="tab" id="tab2aa" class="tabs"> <input type="radio" name="tab" id="tab2ab" class="tabs"> <input type="radio" name="tab" id="tab2b" class="tabs"> <input type="radio" name="tab" id="tab2c" class="tabs"> <input type="radio" name="tab" id="tab3" class="tabs"> <input type="radio" name="tab" id="tab4" class="tabs"> <input type="radio" name="tab" id="tab4a" class="tabs"> <input type="radio" name="tab" id="tab4aa" class="tabs"> <input type="radio" name="tab" id="tab4b" class="tabs"> <input type="radio" name="tab" id="tabclose" class="tabs"> <ul class="level1"> <li class="level1-li"><a class="level1-a" href="#">首 頁</a></li> <li class="level1-li"> <label for="tab1" class="open">關於我 <b>↓</b></label> <label for="tabclose" class="close lab1"></label> <ul class="ul1"> <li><a href="#">郵 箱</a></li> <li><a href="#">電 話</a></li> <li><a href="#">地 址</a></li> </ul> </li> <li class="level1-li"> <label for="tab2">度 假 <b>↓</b></label> <label for="tabclose" class="close lab2"></label> <ul class="ul2"> <li><a href="#">度假圖片</a></li> <li><label for="tab2a">度假商店 <b>→</b></label> <ul class="ul2a"> <li><a href="#">買東西</a></li> <li><a href="#">網際網路銷售</a></li> <li><label for="tab2aa">買東西聖地 <b>→</b></label> <ul class="ul2aa"> <li><a href="#">考 驗</a></li> <li><a href="#">附近的</a></li> <li><a href="#">指導書</a></li> <li><a href="#">滑 板</a></li> </ul> </li> <li><a href="#">專家介紹</a></li> </ul> </li> <li><a href="#">有趣生活</a></li> <li><label for="tab2b">餐 廳 <b>→</b></label> <ul class="ul2b"> <li><a href="#">冬季旅館</a></li> <li><a href="#">夏季旅館</a></li> <li><a href="#">秋季旅館</a></li> <li><a href="#">冬季旅館</a></li> </ul> </li> <li><label for="tab2c">篝火晚會 <b>→</b></label> <ul class="ul2c"> <li><a href="#">主題晚會</a></li> <li><a href="#">報導晚會</a></li> <li><a href="#">野外晚會</a></li> </ul> </li> </ul> </li> <li class="level1-li"> <label for="tab3">景區周圍環境 <b>↓</b></label> <label for="tabclose" class="close lab3"></label> <ul class="ul3"> <li><a href="#">為什麼去那</a></li> <li><a href="#">我們做什麼</a></li> <li><a href="#">風 景</a></li> <li><a href="#">生活卡品</a></li> </ul> </li> <li class="level1-li"> <label for="tab4">動態資訊 <b>↓</b></label> <label for="tabclose" class="close lab4">/label> <ul class="ul4"> <li><a href="#">支付方法</a></li> <li><label for="tab4a"><b>←</b> 瞭解度假村</label> <ul class="ul4a"> <li><a href="#">本質生活</a></li> <li><a href="#">保 險</a></li> <li><label for="tab4aa"><b>←</b> 廉價房租</label> <ul class="ul4aa"> <li><a href="#">客 廳</a></li> <li><a href="#">臥 室</a></li> <li><a href="#">陽 臺</a></li> </ul> </li><li><a href="#">附近學校</a></li> <li><a href="#">學世界</a></li> <li><a href="#">附近學校</a></li> </ul> </li> <li><label for="tab4b"><b>←</b> 語 言</label> <ul class="ul4b"> <li><a href="#">英 語</a></li> <li><a href="#">中 文</a></li> <li><a href="#">法 語</a></li> </ul> </li> <li><a href="#">厲害啊</a></li> </ul> </li> <li class="level1-li"><a class="level1-a" href="#">世界觀</a></li> </ul> </div> </body> </html>
相關文章
- select下拉選單多級級聯效果程式碼例項
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- select下拉選單級聯效果例項程式碼
- css二級下拉選單程式碼例項CSS
- css3實現的立體導航選單效果程式碼例項CSSS3
- select下拉選單項互換效果程式碼例項
- css3實現的多啦a夢效果程式碼例項CSSS3
- JavaScript多級選項卡效果程式碼例項JavaScript
- Android實現三級聯動下拉框 下拉選單spinner的例項程式碼Android
- 純CSS實現的二級導航選單效果程式碼例項CSS
- 模擬實現select下拉選單例項程式碼單例
- select級聯下拉選單程式碼例項分析
- css三級下拉導航選單程式碼例項CSS
- 滑鼠懸浮出現下拉選單程式碼例項
- css3實現的折角效果程式碼例項CSSS3
- css實現的二級下拉選單效果CSS
- js模擬實現select下拉選單程式碼例項JS
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- 選擇下拉選單項實現跳轉效果
- jquery實現的選項卡效果例項程式碼jQuery
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- jQuery結合ul和li實現的下拉選單例項程式碼jQuery單例
- js實現的垂直選項卡效果程式碼例項JS
- css3實現tab選項卡程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- 點選回車實現表單提交效果程式碼例項
- select下拉選單美化程式碼例項
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3