溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3怎么實(shí)現(xiàn)的多級(jí)漸變下拉菜單導(dǎo)航效果代碼

發(fā)布時(shí)間：2021-08-04 18:18:37 來源：億速云 閱讀：168 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“css3怎么實(shí)現(xiàn)的多級(jí)漸變下拉菜單導(dǎo)航效果代碼”，在日常操作中，相信很多人在css3怎么實(shí)現(xiàn)的多級(jí)漸變下拉菜單導(dǎo)航效果代碼問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css3怎么實(shí)現(xiàn)的多級(jí)漸變下拉菜單導(dǎo)航效果代碼”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

這是一款基于css3實(shí)現(xiàn)的下拉菜單導(dǎo)航，是非常漂亮的動(dòng)畫菜單，而且是多級(jí)菜單的形式，測(cè)試時(shí)發(fā)現(xiàn)可支持5級(jí)，估計(jì)還可以支持更多的子菜單項(xiàng)，只有你想這么增加下去，CSS3實(shí)現(xiàn)的效果真的很棒，期待朋友們現(xiàn)在就趕快學(xué)習(xí)一下CSS3吧，這些Demo肯定會(huì)對(duì)你幫助很大。

運(yùn)行效果截圖如下：

css3怎么實(shí)現(xiàn)的多級(jí)漸變下拉菜單導(dǎo)航效果代碼

在線演示地址如下：

http://demo.jb51.net/js/2015/css3-jb-menu-nav-codes/

具體代碼如下：

代碼如下:

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3下拉菜單導(dǎo)航</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: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 -o-transition: opacity 1s;
 transition: opacity 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"><img src="images/trans.gif" >關(guān)于我 <b>&darr;</b></label><label for="tabclose" class="close lab1"><img src="images/trans.gif" ></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"><img src="images/trans.gif" >度 假 <b>&darr;</b></label><label for="tabclose" class="close lab2"><img src="images/trans.gif" ></label>
     <ul class="ul2">
       <li><a href="#">度假圖片</a></li>
       <li><label for="tab2a"><img src="images/trans.gif" >度假商店 <b>&rarr;</b></label>
         <ul class="ul2a">
           <li><a href="#">買東西</a></li>
           <li><a href="#">互聯(lián)網(wǎng)銷售</a></li>
           <li><label for="tab2aa"><img src="images/trans.gif" >買東西圣地 <b>&rarr;</b></label>
             <ul class="ul2aa">
               <li><a href="#">考 驗(yàn)</a></li>
               <li><a href="#">附近的</a></li>
               <li><a href="#">指導(dǎo)書</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"><img src="images/trans.gif" >餐 廳 <b>&rarr;</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"><img src="images/trans.gif" >篝火晚會(huì) <b>&rarr;</b></label>
         <ul class="ul2c">
           <li><a href="#">主題晚會(huì)</a></li>
           <li><a href="#">報(bào)導(dǎo)晚會(huì)</a></li>
           <li><a href="#">野外晚會(huì)</a></li>
         </ul>
       </li>
     </ul>
   </li>
   <li class="level1-li"><label for="tab3"><img src="images/trans.gif" >景區(qū)周圍環(huán)境 <b>&darr;</b></label><label for="tabclose" class="close lab3"><img src="images/trans.gif" ></label>
     <ul class="ul3">
       <li><a href="#">為什么去那</a></li>
       <li><a href="#">我們做什么</a></li>
       <li><a href="#">風(fēng) 景</a></li>
       <li><a href="#">生活卡品</a></li>
     </ul>
   </li>
   <li class="level1-li"><label for="tab4"><img src="images/trans.gif" >動(dòng)態(tài)信息 <b>&darr;</b></label><label for="tabclose" class="close lab4"><img src="images/trans.gif" ></label>
     <ul class="ul4">
       <li><a href="#">支付方法</a></li>
       <li><label for="tab4a"><img src="images/trans.gif" ><b>&larr;</b> 了解度假村</label>
         <ul class="ul4a">
           <li><a href="#">本質(zhì)生活</a></li>
           <li><a href="#">保 險(xiǎn)</a></li>
           <li><label for="tab4aa"><img src="images/trans.gif" ><b>&larr;</b> 廉價(jià)房租</label>
             <ul class="ul4aa">
               <li><a href="#">客 廳</a></li>
               <li><a href="#">臥 室</a></li>
               <li><a href="#">陽 臺(tái)</a></li>
             </ul>
           </li><li><a href="#">附近學(xué)校</a></li>
           <li><a href="#">學(xué)世界</a></li>
           <li><a href="#">附近學(xué)校</a></li>
         </ul>
       </li>
       <li><label for="tab4b"><img src="images/trans.gif" ><b>&larr;</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>

到此，關(guān)于“css3怎么實(shí)現(xiàn)的多級(jí)漸變下拉菜單導(dǎo)航效果代碼”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手