教你自己动手制作WordPress下拉菜单

免费教程   2009年11月06日 21:34  

当我们想到要创建一个网站时,一个拥有多级和下拉的导航菜单是我们实现网站导航栏简洁和实用重要方式。这里有一些插件你可以用来实现这一设想。

但是我发现这些插件中大多数拥有了太多无用的东西,并且并不会按照我想要它们工作方式来发挥作用.所以,下面我将会教大家如何自动动手制作Wordpress下拉菜单。

这也是免费教程中的WordPress教程重要内容之一.这里是演示,也就是我们将要实现的Wordpress下拉菜单效果(请在IE7和火狐浏览器测试).

一、开始

1、首先,你需要将你的页面创建一个具有不同等级体系的菜单,例如:


Home Page 
About Us (2) 
    What We Do 
    What We’ve Done 
    Who Works For Us 
Services (6) 
    Portfolio 
    Our Clients 
Contact Us 

2、注意:括号里的数字代表着不同页面的ID,你需要将它们替换成为你自己的页面ID.

3、一般地在你的导航栏中都会形成<ul> 和 <li>标签值列表,如下:

<ul id="nav">
    <li><a href= "#">主页</a></li>
    <li><a href= "#">关于我</a>
        <ul id="aboutus">
            <li><a href= "#">What We Do</a></li>
            <li><a href= "#">What We've Done</a></li>
            <li><a href= "#">Who Works For Us</a></li>
        </ul>
    </li>
    <li><a href= "#">服务</a>
        <ul id="services">
            <li><a href= "#">Portfolio</a></li>
            <li><a href= "#">Our Clients</a></li>
        </ul>
    </li>
    <li><a href= "#">Contact Us</a></li>
</ul>

二、将它们变成动态的

1、当你的决定这样的做的话,你要修改这些列表并创建成你自己的导航栏,这个顶级的菜单项目是稳定的,而它们的子页面将会变成动态的。如下:

<ul id="nav">
    <li><a href= "#">主页</a></li>
    <li><a href= "#">关于我</a>
        <ul id="aboutus">
            <? wp_list_pages('title_li=&sort_column=
menu_order&child_of=2'); ?>
        </ul>
    </li>
    <li><a href= "#">服务</a>
        <ul id="services">
            <? wp_list_pages('title_li=&sort_column=
menu_order&child_of=6'); ?>
        </ul>
    </li>
    <li><a href= "#">Contact Us</a></li>
</ul>

2、脚本控制

3、这里有一小段的Javascript代码用来显示和隐藏和下拉菜单.代码如下:


// JavaScript 文档   function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

4、最后你的整个导航栏的代码将会如下这样(包括这个Javascript代码):


   <ul id="nav">
   <li><a href= "#">主页</a></li>
   <li onmouseover="javascript:toggleLayer('aboutus');"
 onmouseout="javascript:toggleLayer('aboutus');">
<a href= "#">关于我</a>
   <ul id="aboutus">
   <? wp_list_pages('title_li=&sort_column=
menu_order&child_of=2'); ?>
   </ul>
   </li>
   <li onmouseover="javascript:toggleLayer('services');"
 onmouseout="javascript:toggleLayer('services');">
<a href= "#">服务</a>
   <ul id="services">
   <? wp_list_pages('title_li=&sort_column=
menu_order&child_of=6'); ?>
   </ul>
   </li>
   <li><a href= "#">Contact Us</a></li>
   </ul>

三、这个是CSS代码

1、现在你将会需要在你的CSS文件做一点点的改动从而让这个导航栏适合你的主题.需要注意的是,需要用CSS来隐藏<ul>标签列表和绝对位置。

2、为了是当它显示出来时不会影响其他的网页因素.


@charset "utf-8";
/* CSS Document */  
* {margin:0;padding:0;}
body {text-align:left;padding: 30px;font: 12px Tahoma, 
Arial, Helvetica, sans-serif;}   
ul, ol {padding: 10px 0;}   
#nav ul {display:none;position:absolute;margin: 16px 0 0 -1px;} 
/* hide the sub nav */
*+ html #nav ul {margin: 16px 0 0 -122px;} /* ie 7 hack */
#nav li {list-style:none;display:block;float:left;}
#nav a {display:block;float:left;padding: 5px 15px;border:1px 
solid #ddd;margin: 0 0 0 -1px;text-decoration:none;width:90px;}  
 /*subnav styling*/
#nav ul li, #nav ul li a {float:none;}
#nav ul li a {margin: -1px 0 0 0;width:150px;}
#nav ul li a:hover {background:#efefef;color:#000;}

3、上面的CSS代码是用来测试演示的,你可以修改它们从而让它更加适合你的网站风格.

4、现在,你已经有了一个下拉的菜单了,当你向这些顶级项目中添加子页面时,这些页面项目就会自动包含在你的下拉菜单当中了. via:wpguru.co.za

文章出自:免费资源部落 https://www.freehao123.com/ 版权所有。本站文章皆为作者原创文章,可自由引用,但请注明来源。 禁止全文转载

您或许对下面这些文章有兴趣:                    本月吐槽辛苦排行榜

在这个部落村庄里,已经有17 位神马家族成员冒出泡来在农场开始干活了
  • m u s l c

    你好,不知道该怎么称呼你,但却是我的网站太需要这个功能了,也不知道自己有没有看懂。但我决定自己尝试一下,还请大哥加下我的qq965111000,因为这是我网站最后的一个问题了。如果我不行的话,请你帮帮忙

    qi 回复:

    好的,我的QQ:798558110

    这是农场的第 1 块农田,部落批准 [m u s l c] 在[2011-7-16 07:28]开垦完成.
  • m u s l c

    不对阿,大侠。你没讲这段JS脚本应该放在那里阿?求回复,记得加qq哦

    qi 回复:

    js脚本可以放在任意位置,或者直接用js调用也行。

    Kevin 回复:

    博主您好,请问这脚本是放在INDXE这个文件里还是FUNCTION这个文件里?谢谢

    qi 回复:

    放在header文件或者footer文件中

    Kevin 回复:

    谢谢!

    这是农场的第 2 块农田,部落批准 [m u s l c] 在[2011-7-16 07:32]开垦完成.
  • anopos 1

    来个图片演示下就好了,博客内容真丰富啊。

    qi 回复:

    这个文章是我#译国外的,#译也不是很好。

    这是农场的第 3 块农田,部落批准 [anopos] 在[2012-4-4 08:43]开垦完成.
  • chenvic0

    强大!!学习了

    这是农场的第 4 块农田,部落批准 [chenvic0] 在[2012-8-20 11:40]开垦完成.
  • 於志远

    “首先,你需要将你的页面创建一个具有不同等级体系的菜单,例如:”
    这句话是什么意思?是自己写的html文件还是在WP后台建立菜单??

    qi 回复:

    @於志远, 是自己写代码,将这段代码是在header.php中的,最后效果就是这一部分的:“二、将它们变成动态的”

    於志远 回复:

    @qi, 感谢了!

    这是农场的第 5 块农田,部落批准 [於志远] 在[2012-9-29 10:13]开垦完成.
  • 艾丝凡

    不好使,好几个地方报错,

    这是农场的第 6 块农田,部落批准 [艾丝凡] 在[2013-11-8 14:50]开垦完成.
  • 小蔡 7

    新手第一步就卡住了。

    qi 回复:

    @小蔡, 可以拿Wordpress的header.php文件修改,不过现在不是主题都集成了这个功能了吗?

    这是农场的第 7 块农田,部落批准 [小蔡] 在[2013-11-18 12:20]开垦完成.
  • 小蔡 7

    目前正在学习阶段,一些专业术语还不是很了解,英语不好,有点小吃力,满满学习中。

    这是农场的第 8 块农田,部落批准 [小蔡] 在[2013-11-18 14:21]开垦完成.
看贴要回贴有N种理由!看帖不回贴的后果你懂得的!


评论内容 (*必填):
(Ctrl + Enter提交)   

部落快速搜索栏

各类专题梳理

网站导航栏

X

返回顶部