分享一下第一次做WP模板的下拉菜单代码

时间：2007-11-30 10:35:22 类别：Web技术|WEB Tech, Wordpress 本文链接：生活点滴Enjoy Life

首先看看下面的例子
可能有很多朋友和我以前的爱好一样，喜欢悬停的下拉菜单，所以这里我就将这个代码分享出来。代码分三个部分：1.wordpress模板代码；2.css代码；3.javascript代码。

wordpress模板代码

<div id="nav_a">
<ul id="navsite">
< ?php
$mycat = $cat;//通过全局变量获取当前cat id
$cat = get_category_parentID($cat);//获取父类ID，以保证在每页都显示全部分类
wp_list_cats('use_desc_for_title=1&sort_column=id&sort_order=desc&children=1');
?>
</ul>
</div>

通过上面的代码，便可以将两级分类获取出来。

css代码根据个人模板不同的风格，你可能要对某些参数进行修改，下面是代码，解说将在注释中。

ul#navsite,
#navsite ul {
font: 12px Verdana, sans-serif;
padding: 0;
margin: 0;
list-style: none;
}
#navsite li {
float: left; /* 将li标签水平排列 */
text-align: center;
}
#navsite li ul {
position: absolute;
top: auto;
left: -999em; /*隐藏 */
}
* > html #navsite li ul { /* "Tan Hack" for IE Mac only */
display: none;
left: auto;
}
#navsite li:hover ul,
* html #navsite li.sfhover ul { /* for IE-Win and other non-IE browsers */
left: auto;
}
* > html #navsite li.sfhover ul { /* "Tan Hack" for IE Mac only */
display: block; /* IE-Mac gets confused by the left:-999em rule, so we do this. */
border: 2px solid #778; /* to visually confirm this rule is being used on IE-Mac */
}
#navsite li ul li {
float: none; /* sub-menu items will stack vertically as normal list */
text-align: left;
}
#nav_a ul li A {
display:block;
padding-top:4px !important;
padding-top:8px;
WIDTH: 130px;
height:21px !important;
height:21px;
color:#ffffff;
BACKGROUND: red ;/*主菜单色调*/
}
#nav_a ul li.current-cat A ,#nav_a ul li.current-cat-parent A {
BACKGROUND: blue;
color:#000;
}
#nav_a ul li ul.children {
padding:0 0 5px 0;
width:130px !important;
width:127px;
BACKGROUND: url(images/ulbt.gif) #ffffff no-repeat bottom left;
}
#nav_a ul li ul.children li A {
BACKGROUND: blue;/*二级菜单背景颜色*/
color:#fff;
}
#nav_a ul li ul.children li A:hover {
BACKGROUND: red;/*二级菜单鼠标悬停背景颜色*/
color:#fff;
}
av_a ul li ul.children li.current-cat A ,#nav_a ul li ul.children li.current-cat-parent A {
BACKGROUND: green;
color:#000;
font-weight:bold;
}
#nav_a ul li ul li A {
display:block;
padding-top:4px;
width:130px;
border:0;
border-top:1px solid #999900;
text-indent:4px;
color:#ffffff;
height:25px;
BACKGROUND: url() #99cc00 no-repeat 0px 0px;
}