在之前的建網(wǎng)站的教程中，我們給大家講了如何制作網(wǎng)站導航的二級導航，通過DIV+CSS的方式，可以制作出網(wǎng)站的二級菜單。這種方法是可能幫助我們?nèi)ブ谱鞒鰞?nèi)容固定的二級菜單出來，需要手動的修改二級導航里面的內(nèi)容，才能變成屬于我們自己需要的二級導航欄。

今天給廣大學習如何做網(wǎng)站的學員介紹另一種更加方便快捷的wordpress下拉菜單制作的方法，它的內(nèi)容是自動顯示我們后臺的菜單設置的內(nèi)容。

wordpress下拉菜單制作步驟

1. 放一個jquery-xl.js到主題文件夾下的images文件夾；下載地址：http://pan.baidu.com/s/1eQH7EP8
2. 將以下的代碼放到自己網(wǎng)站模板頭部文件header.php的</head>標簽的上方。
   <script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/images/jquery-xl.js"></script>
3. 刪除原有的網(wǎng)站導航的整個DIV框，這個DIV框可以通過火狐瀏覽器的“審查元素”來找到；
4. 將以下的HTML代碼放在上一步刪除的導航的位置；（相關教程：html視頻教程）
   <div id="navnew">
   <?php wp_nav_menu( array( 'container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 5, ) ); ?>
   </div>
   <script type="text/javascript">
   var topMenuNum = 0;
   $("#nav_sgBhgn li").hover(
   function(){
   topMenuNum++;
   $(this).attr("id","kindMenuHover"+topMenuNum);
   $("#kindMenuHover" + topMenuNum + " > ul").show();
   $(this).parent().addClass("hover");
   },
   function(){
   $("#"+$(this).attr("id")+" > ul").hide();
   $(this).attr("id","");
   $(this).parent().removeClass("hover");
   }
   );
   </script>
5. 將以下的CSS樣式加入到自己網(wǎng)站模板的style.css的底部。
   /*wordpress下拉菜單，二級菜單制作 https://www.xuewangzhan.com/*/
   #navnew {line-height: 60px; width: 100%; background: #3598db; height: 60px}
   #navnew .navigation {margin:0 auto;width:980px;height:100%;}
   #navnew .navigation li {height:60px;line-height:60px;width:100px; z-index: 100; POSITION: relative;text-align:center; FLOAT: left;border-right:1px solid #2f89c5;}
   #navnew .navigation li A {display: block; height: 100%;width:100%; TEXT-DECORATION: none;color: #ffffff;font-size:16px;}
   #navnew .navigation li:hover{background: #2f89c5;}
   #navnew .navigation li ul li,#navnew .navigation li ul li ul li,#navnew .navigation li ul li ul li ul li{border-right:none;border-top:1px solid #2f89c5;}
   #navnew .navigation ul {display: none}
   #navnew .navigation ul li {line-height: 60px; width: 101px;background: #3598db; height: 60px;}
   #navnew .navigation li ul {z-index: 999; POSITION: absolute; width: 100px; display: none; background: #0099ff; TOP: 60px;}
   #navnew .navigation li ul ul {z-index: 999; TOP: 0px; left: 101px}
6. 進入網(wǎng)站后臺，在左側有一個菜單的選項，可以創(chuàng)建菜單，通過拖拉就可以隨意的修改自己網(wǎng)站的導航和二級導航內(nèi)容。
7. 有些學習如何做網(wǎng)站的學員使用的主題可能沒有開啟后臺菜單功能，如果你進入網(wǎng)站后臺后沒有“菜單”選項的話，可以在自己網(wǎng)站的模板函數(shù)functions.php中加入以下的函數(shù)來開啟菜單。
   //添加菜單功能
   if (function_exists('add_theme_support')) {
   add_theme_support('nav-menus');
   register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'primary' ) ) );
   }

通過以上的步驟，我們可以在自己建網(wǎng)站時創(chuàng)建一個wordpress下拉菜單，如果你想制作三級，四級菜單，方法可以參考網(wǎng)站三級菜單、四級菜單制作。

標簽： isp 代碼 建網(wǎng)站 網(wǎng)站的模板 網(wǎng)站模板 制作網(wǎng)站

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