教你自己动手制作WordPress下拉菜单-皮皮s免费高清影视

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

但是我发现这些插件中大多数拥有了太多无用的东西,并且并不会按照我想要它们工作方式来发挥作用.所以,下面我将会教大家如何自动动手制作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 Weve 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 workvar style2 = document.getElementById(whichLayer).style;style2.display = style2.display? :block;}else if (document.all){// this is the way old msie versions workvar style2 = document.all[whichLayer].style;style2.display = style2.display? :block;}else if (document.layers){// this is the way nn4 worksvar 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