網生@誌 | zEUS.'Blog

首页 » Wordpress模板 , 网页美化 » 2008-11-26 »

给 D&Z Theme 增加一个额外的悬浮菜单

字体大小:T | T

D&Z Theme 在导航栏的设计上最多只能容纳5个导航链接,虽然看起来很和谐,但是对于部分使用者来说导航链接过于少了点。这里我介绍一下如何给 D&Z Theme 额外增加一个酷酷的悬浮导航链接区域(例如本站导航栏中的“展开导航”),此方法基于小胖共享的——JavaSript 下拉菜单。这里我放弃 CSS 而选择使用 JS 来实现这个效果的原因其一是因为 CSS 实现起来兼容性问题很头疼,其二是 JS 实现起来的代码比 CSS 的更少!

D&Z Theme 主题的 header.php 中普通导航栏的默认代码是:

1
2
3
4
5
6
<div class="nav">
        <ul>
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="博客首页">博客首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=1&exclude=&title_li=');?>
        </ul>
</div>

其中第四行代码就是页面页列表,也就是我们每新建一个页面(Page)页,就会在导航栏上出现一个页面页的标题连接。wp_list_pages() 函数的用法可以参考官方文档的说明:
http://codex.wordpress.org/wp_list_pages

下面是我给导航栏增加悬浮菜单后的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="nav">
        <ul>
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="HOME">博客首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=1&exclude=491,515,8,523,36&title_li=');?>
	    <script type="text/javascript">
            function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
            }
            function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
            }
            </script>
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            	<a href="javascript:void(0)">展开导航</a>
                <ul>
                <span class="subnav-l"></span>
                <?php wp_list_pages('sort_column=menu_order&depth=1&include=36,523,515,8&title_li=');?>        
                </ul>
            </li>
        </ul>
</div>

同样是第四行,我使用 exclude 参数排除了几个页面(id)链接,使得它们不会出现在导航栏里,同时也在导航栏里腾出了一个位置放“展开导航”,第20行代码是用于显示在悬浮菜单里的页面(Page)页,这里使用了 include 参数来指定需要显示的页面标题连接。

PS:wp_list_pages() 函数里的 exclude 和 include 这2个参数后面的值需要根据自己的页面 ID 号来进行设定。

当然了,悬浮菜单里还能放分类列表,也就是使用 wp_list_categories() 函数代替这里的wp_list_pages() 函数。前者使用方法请参考函数 wp_list_categories 参数详解

下面是悬浮菜单的样式代码,将其添加到 style.css 中即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Javascript 悬浮菜单样式 */
.subnav-l {
background:url(images/subnav-l.gif) no-repeat;
height:28px;
width:10px;
margin-top:2px;
float:left;
}
.nav ul li ul {
display:none;
padding:0 10px 0 0;
margin:0;
position:absolute;
right:0;
height:30px;
width:auto;
background:#333 url(images/subnav-r.gif) no-repeat right;
list-style:none;
float:left;
z-index:30;
}
.nav ul li ul li {
float:right;
height:26px;
padding:2px 11px;
}

样式中的图片,点击 这里 下载。

这样,导航栏的悬浮菜单就增加完毕了,如果是使用 D&Z Theme 的朋友,除了参数中的几个 ID 需要修改外,无需再改动其它任何内容。

我在给导航栏增加悬浮菜单后在 IE 下遇到了个问题,一旦悬浮菜单展开,文章栏就会下移一小段(被悬浮菜单挤下去的),但我在本地测试却又没有这种情况… 不知道其他朋友会不会碰到这种“怪事” ❓ 如果大家还有其它问题,请直接在下面留言。

最后希望大家使用愉快 :mrgreen:

zEUS.

« »

已经有25人发表了评论

  1. 我按照你的方法 改了下 D&Z Theme widgt ready
    结果导航栏显示不正常
    二级菜单 显示错位 而且无法用鼠标选中~

    请指教!

    先谢过~

    http://nothend.cn/wukaijj1314

  2. 菜鸟上路,来学习学习!

  3. 囧 rss咋不全文输出……

发表您的看法

TOP COMMENTS BOTTOM