我們?cè)谧约鹤鼍W(wǎng)站時(shí)，經(jīng)常需要制作二級(jí)下拉菜單，通過(guò)下拉菜單可以將我們很多的欄目放到網(wǎng)站導(dǎo)航菜單上。
今天介紹一下網(wǎng)站彈性二級(jí)下拉菜單的制作方法，先看下效果：

方法/步驟

1. 在網(wǎng)站導(dǎo)航欄位置放上調(diào)用后臺(tái)導(dǎo)航菜單的代碼；

   
   <div class="top_nav">
   
           <div class="wid_main">
   
   ?       <?php wp_nav_menu( array( 'container' => '','menu_class' => 'fix','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>        
   
   ?              <div class="nav_bg_cur">
   
                   <img src="<?php echo get_template_directory_uri(); ?>/images/icon_nav.png">
   
               </div>
   
           </div>
   
       </div>
   
   

2. 新建一個(gè)JS文件，將以下的JS代碼放進(jìn)去，保存為public.js，然后上傳到自己的模板文件夾下；并且在自己的頭部模板里進(jìn)行引用。（如果不會(huì)引用，請(qǐng)學(xué)習(xí)一下建站入門(mén)基礎(chǔ)教程）

   
   // 菜單js
   
   $(function(){
   
       var n=0;
   
       var m=$(".top_nav ul li.current-menu-item").index();
   
       $(".nav_bg_cur").hide()
   
       $(".top_nav .nav_bg_cur").css("left",((133.3333*m)+15))
   
       $(".top_nav ul li .sub-menu").hide()
   
       $(".top_nav ul li").hover(
   
           function(){
   
               n=$(this).index();
   
               $(".top_nav .nav_bg_cur").stop().animate({left:(133.3333*n)+15},300)
   
               $(this).addClass("current-menu-item")
   
               $(this).siblings().removeClass("current-menu-item")
   
               $(this).find(".sub-menu").slideToggle()
   
           }
   
       )
   
   
   
       if ($(".top_nav ul li").hasClass("current-menu-item")) {
   
           $(".nav_bg_cur").show()
   
           $(".top_nav").mouseleave(
   
               function(){
   
                   $(".top_nav ul li").eq(m).addClass("current-menu-item")
   
                   $(".top_nav ul li").eq(m).siblings().removeClass("current-menu-item")
   
                   $(".top_nav .nav_bg_cur").stop().animate({left:(133.3333*m)+15},300)
   
               }
   
           )
   
       }else{
   
           $(".top_nav ul li").hover(
   
               function(){
   
                   $(this).addClass("current-menu-item")
   
                   $(this).siblings().removeClass("current-menu-item")
   
                   $(".nav_bg_cur").show()
   
               }
   
           )
   
           $(".top_nav").mouseleave(
   
               function(){
   
                   $(".top_nav ul li").removeClass("current-menu-item")
   
                   $(".nav_bg_cur").hide()
   
               }
   
           )
   
       }
   
   })
   
   

3. 將下面的CSS樣式代碼放到自己網(wǎng)站主題的style.css里；

   
   /*導(dǎo)航*/
   
   .top_nav{
   
       border-top: #111 solid 1px;
   
       height: 50px;
   
       background-color: #faf8f5;
   
   }
   
   .top_nav .wid_main{
   
       position: relative;
   
       z-index: 5;
   
   }
   
   .top_nav .nav_bg_cur{
   
       position: absolute;
   
       left: 15px;
   
       top: 5px;
   
   }
   
   .top_nav ul li{
   
       float: left;
   
       line-height: 50px;
   
       width: 133.3333px;
   
       position: relative;
   
   }
   
   .top_nav ul li>a{
   
       display: block;
   
       text-align: center;
   
       color: #111;
   
       font-size: 16px;
   
       transition: all .2s;
   
   }
   
   .top_nav ul li.current-menu-item{
   
       background-color: #111111;
   
   }
   
   .top_nav ul li.current-menu-item>a{
   
       color: #fff;
   
       text-indent: 1em;
   
       position: relative;
   
       z-index: 5;
   
   }
   
   .top_nav ul li.current-menu-item>a i{
   
       display: inline-block;
   
       width: 15px;
   
       height: 40px;
   
       vertical-align: middle;
   
       background:url(../images/icon_nav.png) no-repeat center center;
   
       margin: -4px 10px 0 15px;
   
   }
   
   .top_nav ul li:hover>a{
   
       color: #fff;
   
       text-indent: 1em;
   
   }
   
   .top_nav ul li .sub-menu{
   
       background-color: #111;
   
       text-align: center;
   
       padding:10px 0;
   
       display: none;
   
       position: absolute;
   
       width: 100%;
   
       opacity: .9;
   
   }
   
   .top_nav ul li .sub-menu li{
   
       line-height: 40px;
   
   }
   
   .top_nav ul li .sub-menu li a{
   
       font-size: 14px;
   
       color: #fff;
   
       display: block;
   
       transition: all .2s;
   
   }
   
   .top_nav ul li .sub-menu li a:before{
   
       content: "·"; margin-right: 5px;
   
   }
   
   .top_nav ul li .sub-menu li a:hover{
   
       color: #faa528;
   
       text-indent: 1em;
   
   }
   
   

通過(guò)以上三步的操作，就可以在自己建網(wǎng)站時(shí)，制作出彈性二級(jí)下拉菜單了。

標(biāo)簽： isp 代碼 建網(wǎng)站 建站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。