Loading...

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

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

wordpress模板代码

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

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

javascript代码由于IE不兼容某些css描述,因此这里要用到javascript来弥补之不足,代码如下:

建议需要使用的兄弟直接在实例中进行修改:menu.html

鸣谢:部分css代码借鉴了先辈的代码,而javascript则是直接copy过来使用的,由于很久以前使用的,所以忘记css部分代码和js全部代码的原创者是谁了.

标签:, ,
发表于 2007-11-30 10:35:22 目录:Wordpress, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • homezz 美国专业主机商
    已经有2位大师动手指导 拒绝低俗
    • 1楼 非常秀 在2008.01.03 13:17发表评论如下: 回复

      不错,学习学习

      • 2楼 Ian 在2008.04.23 12:01发表评论如下: 回复

        您好,我想在我把我的网页上Page显示成dropdown menu形式的。但是我不知道怎么把上面的code复制过去。请问能不能赐教下? ^^

        评论分页: 1
        (Required)
        (Required, not published)
        如果留言未显示无需重复留言,我将为你恢复!