困难的事就不提了，本文主要讲的是后台中“菜单”这个选项，在前台是怎么调出来的。注意了：不是“分类目录”，也不是“页面”这两个功能。
1、先把下面代码加入functions.php 中：
if ( function_exists('register_nav_menus') ) {
register_nav_menus(array(
'primary' => '导航菜单'
));
}
然后，在 header.php 中调用如下代码：
<?php
if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
}
?>
2、接下来是添加JS和CSS即可
链接JQuery，然后在header.php中加入下面JS：
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(300)
},
function() {
$('ul', this).slideUp(300)
});
});
</script>
3、CSS
以下是简单的CSS
ul,li{padding:0;margin:0;list-style:none;}
a{text-decoration:none;}
#nav li{width:100px;line-height:30px;float:left;}
#nav li a{text-align:center;display:block;width:100px;background:#ccc;}
#nav li a:hover{background:#000;color:#fff;}
.sub-menu{display:none;}
/*二级菜单*/
#nav li ul{
position:absolute;
z-index:100;
background:url(images/menu_drop_bg.png) repeat-y;
border:1px solid #086BA3;
float:left;
}
#nav li ul li{
width:163px;
height:29px;
line-height:29px;
background:url(images/menu_drop_line.png) no-repeat bottom;
float:none;
}
#nav li ul li a{
width:163px;
height:29px;
line-height:29px;
font-weight:normal;
color:#000;
}
#nav li ul li a:hover{
width:163px;
background:url(images/menu_drop_hover.png);
font-weight:normal;
color:#000;
}
wp_nav_menu()函数的详细参数如下：
'container' => 'div',//最外层容器的标签名，默认div
'container_class' => 'mainNavBlock',//最外层容器的class名
'container_id' => 'menu',//最外层容器的id名
'menu_class' => 'mainNav',//导航菜单ul标签的class名
'menu_id' => "nav",//导航菜单ul标签的id名
'echo' => true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false
'fallback_cb' => 'the_main_nav',//备用的导航菜单函数，用于没有在后台设置导航时调用
'before' => '<p>',//显示在导航a标签之前
'after' => '</p>',//显示在导航a标签之后
'link_before' => '<em>',//显示在导航链接名之前
'link_after' =>'</em>',//显示在导航链接名之后
'depth' => 0,//显示的菜单层数，默认0，0是显示所有层
'walker' => new Walker_Nav_Menu(),//调用一个对象定义显示导航菜单
'theme_location' => 'primary'//指定显示的导航名，如果没有设置，则显示第一个
评论