很多新手朋友還不會做二級導航菜單的調用,建站和網站優化是息息相關的,建站和網站優化結合,可以對網站內部優化做出調整,促進做網站優化的排名。
1、新建 functions.php 函數文件并添加以下代碼:
<?php
//自定義菜單
register_nav_menus(
array(
‘header-menu’ => __( ‘導航自定義菜單’ ),
)
);?>
2、把導航位置的li標簽都刪除掉,換上調用代碼:
<?php wp_nav_menu( array( ‘container’ => ”,’menu_class’ => ‘navigation’,’menu_id’ => ‘nav_sgBhgn’) ); ?>
3、添加一個jquery庫,放在body開始和結束的適合的位置即可:
<script type=”text/jscript”>
$(document).ready(function(){
$(‘ul.navigation li’).hover(function(){
$(this).find(‘ul:first’).slideDown(200);//顯示二級菜單,括號中的數字表示下拉菜單完全顯示出來需要200毫秒。
$(this).addClass(“hover”);
},function(){
$(this).find(‘ul’).css(‘display’,’none’);
$(this).removeClass(“hover”);
});
function hide_submenu(){
$(‘ul.navigation li’).find(‘ul’).css(‘display’,’none’);//紅色標注改為當前導航ul的class名稱
}
$(‘ul.navigation li li:has(ul)’).find(“a:first”).append(“”);
document.onclick = hide_submenu;
});
</script>
4、使用jquery庫文件加載,大家可以測試一下模板打開的速度,哪個快用那個:
谷歌加載:<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>
百度加載:<script type=”text/javascript” src=”//libs.baidu.com/jquery/2.0.3/jquery.min.js”></script>
新浪加載:<script type=”text/javascript” src=”//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js”></script>
5、添加CSS樣式:
/* 二級菜單 */
.sub-menu{
display:none;/*初始狀態下隱藏子目錄*/
position:absolute;/*顯示最頂層*/
}
.sub-menu li{
width:100%;/*顯示子目錄寬度/*針對IE6*/
clear:both;/*垂直顯示*/
background:#000;/*子目錄背景顏色*/
}
wp網站二級導航菜單制作完成。大家根據主題的不同,用火狐瀏覽器定位,做出微調的動作即可。