很多新手朋友還不會(huì)做二級(jí)導(dǎo)航菜單的調(diào)用,建站和網(wǎng)站優(yōu)化是息息相關(guān)的,建站和網(wǎng)站優(yōu)化結(jié)合,可以對(duì)網(wǎng)站內(nèi)部優(yōu)化做出調(diào)整,促進(jìn)做網(wǎng)站優(yōu)化的排名。
1、新建 functions.php 函數(shù)文件并添加以下代碼:
<?php
//自定義菜單
register_nav_menus(
array(
‘header-menu’ => __( ‘導(dǎo)航自定義菜單’ ),
)
);?>
2、把導(dǎo)航位置的li標(biāo)簽都刪除掉,換上調(diào)用代碼:
<?php wp_nav_menu( array( ‘container’ => ”,’menu_class’ => ‘navigation’,’menu_id’ => ‘nav_sgBhgn’) ); ?>
3、添加一個(gè)jquery庫,放在body開始和結(jié)束的適合的位置即可:
<script type=”text/jscript”>
$(document).ready(function(){
$(‘ul.navigation li’).hover(function(){
$(this).find(‘ul:first’).slideDown(200);//顯示二級(jí)菜單,括號(hào)中的數(shù)字表示下拉菜單完全顯示出來需要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’);//紅色標(biāo)注改為當(dāng)前導(dǎo)航ul的class名稱
}
$(‘ul.navigation li li:has(ul)’).find(“a:first”).append(“”);
document.onclick = hide_submenu;
});
</script>
4、使用jquery庫文件加載,大家可以測試一下模板打開的速度,哪個(gè)快用那個(gè):
谷歌加載:<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樣式:
/* 二級(jí)菜單 */
.sub-menu{
display:none;/*初始狀態(tài)下隱藏子目錄*/
position:absolute;/*顯示最頂層*/
}
.sub-menu li{
width:100%;/*顯示子目錄寬度/*針對(duì)IE6*/
clear:both;/*垂直顯示*/
background:#000;/*子目錄背景顏色*/
}
wp網(wǎng)站二級(jí)導(dǎo)航菜單制作完成。大家根據(jù)主題的不同,用火狐瀏覽器定位,做出微調(diào)的動(dòng)作即可。