零基礎建站培訓教程介紹

當前位置:

WordPress網站導航制作二級下拉菜單通用方法

有些網站的欄目比較多,單行的網站導航很難全部顯示這些欄目,這時可以通過制作二級下拉菜單的方法來顯示更多的導航欄目。

網站二級下拉菜單

下面學做網站論壇給廣大學習建網站的學員介紹一下Wordpress網站導航制作二級下拉菜單的簡單方法。

方法/步驟

  1. 下載導航下拉菜單jquery特效基礎包。點擊下載?提取碼: cme9;
  2. 將下載的壓縮包解壓出來,將里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二個文件通過FTP工具上傳到自己模板的js文件夾里;
  3. 在頭部模板header.php里找到</head> 標簽,將下的代碼放到</head> 標簽上面;(注意文件路徑)
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>
  4. 使用以下的代碼替換原來的網站導航菜單代碼。(一般在header.php)
    <div id="menuun">
    ?       <?php wp_nav_menu( array( 'container' => '','menu_class' => 'topnav clearfix','menu_id' => "topmeau",'depth' => 2, ) ); ?>
    <script id="jsID" type="text/javascript">
    ?          
    ?           jQuery("#menuun").slide({
    ?               type:"menu",
    ?               titCell:"#topmeau>li",
    ?               targetCell:".sub-menu",
    ?               effect:"slideDown",
    ?               delayTime:300 ,
    ?               triggerTime:0,
    ?               returnDefault:true
    ?           });
    ?       </script>        
    ?   </div>
  5. 將以下的CSS樣式代碼粘貼到style.css文件最下面。
    #menuun{width:1000px;margin:0 auto;background:#A03128;}
    ?       .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    ?       .topnav{ height:40px;line-height:40px;padding:0 20px; position:relative; z-index:1;  }
    ?       .topnav a{ color:#fff; font-weight:400; }
    ?       .topnav ul,.topnav ol,.topnav li{list-style:none;}
    ?       .topnav>li{ float:left;  position:relative; }
    ?       .topnav>li a{ display:block;padding:0 20px; font-size:14px;  }
    ?       .topnav .sub-menu{ display:none; width:100%; left:0; top:40px;  position:absolute; background:#1B120B;/*修改下拉框背景顏色*/  line-height:26px; padding:5px;  }
    ?       .topnav .sub-menu li{text-align:center; overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;zoom:1; }
    ?       .topnav .sub-menu a{ display:block; padding:5px 10px; }
    ?       .topnav .sub-menu a:hover{ color:#fff;  }
    ?       .topnav .current-menu-item a{ color:#F00 !important; /*修改選中的文字顏色*/  }
  6. 在網站后臺--外觀---菜單,進行導航菜單的添加。(如果沒有開啟后臺菜單,先要開啟菜單功能。)
    導航菜單
  7. 這樣就可以制作出二級下拉菜單導航了。

發表評論

電子郵件地址不會被公開。 必填項已用*標注

相關教程

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图