注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

WordPress 3.0 二级菜单  

2011-05-20 11:46:26|  分类: Wordpress |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  最近我在研究二级菜单,令我非常的头痛,因为在前台调出菜单容易,但要按照你的想法顺序调出来,可不是一件容易的事。

  困难的事就不提了,本文主要讲的是后台中“菜单”这个选项,在前台是怎么调出来的。注意了:不是“分类目录”,也不是“页面”这两个功能。

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'//指定显示的导航名,如果没有设置,则显示第一个

  评论这张
 
阅读(1167)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018