免费资源部落

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

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

这里是演示，也就是我们将要实现的Wordpress下拉菜单效果（请在IE7和火狐浏览器测试）.

开始

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

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

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

一般地在你的导航栏中都会形成<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>

将它们变成动态的

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

<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>

脚本控制

这里有一小段的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";
}
}

最后你的整个导航栏的代码将会如下这样（包括这个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代码

现在你将会需要在你的CSS文件做一点点的改动从而让这个导航栏适合你的主题.需要注意的是,需要用CSS来隐藏<ul>标签列表和绝对位置,为了是当它显示出来时不会影响其他的网页因素.

@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;}

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

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

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

您或许对下面这些文章有兴趣：

• Son of Suckerfish一级下拉菜单制作方法
• Son of Suckerfish二级、三级、多级下拉菜单制作方法
• 手动修改实现wordpress博客导航栏子分类下拉菜单显示
• 新手需要知道Wordpress主题制作的基本步骤和大致过程
• Multi-level Navigation Plugin插件使用方法与教程
• 微软必应bing在线双语浏览器网页免费翻译
• docspal.com轻松在线打开转换各种格式的文档文件
• GAppProxy使用教程