Loading...

wordpress下拉式导航栏

2007-01-14 18:20:23 发表于HTML客户端, PHP, 网站技术 本文链接: wordpress下拉式导航栏

在网上搜索“wordpress下拉式导航栏”,搜索到了桑林志的该文章,可是该文章的代码好多都是全角字符,经过修改之后又发现js代码错误,只好根据他上面的文章找到源头的网页,终于做出了本站的效果。具体代码如下:


#nav_a {
float:left;
MARGIN: 0px 1px 0px 0px;
PADDING: 0px 0px 0px 0px;
TEXT-ALIGN: center;
COLOR: #666;
width:800px;
HEIGHT:25px;
margin-top:35px;/* suit for logo*/
z-index:10;
float:left;
}
ul#navsite,
#navsite ul {
font: 12px Verdana, sans-serif;
padding: 0;
margin: 0;
list-style: none;
}
#navsite li {
float: left; /* arrange top menu items horizontally */
text-align: center;
}

/* Absolute position with auto setting means the item will appear
where it would have appeared normally, but is taken out of the
flow and floats above all the content. */
#navsite li ul {
position: absolute;
top: auto;
left: -999em; /* for better accessibility than using display:none */
}
* > 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;
WIDTH: 130px;
height:21px !important;
height:25px;
color:#ffffff;
BACKGROUND: url(images/nav_bg.gif) #99cc00 no-repeat 0px 0px;
}
#nav_a ul li ul li A {
width:120px;
}
#nav_a ul li.current-cat A {
BACKGROUND: url(images/nav_bg.gif) #99cc00 no-repeat 0px -42px;
color:#000;
}
#nav_a ul li ul.children li A {
BACKGROUND: url() #99cc00 no-repeat 0px -42px;
color:#fff;
}
#nav_a ul li ul.children li.current-cat A {
BACKGROUND: url() #99cc00 no-repeat 0px -42px;
color:#000;
font-weight:bold;
}
#nav_a ul li ul li A {
display:block;
padding-top:4px;
WIDTH: 130px;
border:1px solid #999900;
border-top:0;
color:#ffffff;
height:25px;
BACKGROUND: url() #99cc00 no-repeat 0px 0px;
}

/* note: important to keep ordering of LVHA link, visited, hover, active */
#navsite li a:link:hover,
#navsite li a:visited:hover {
color: #000;
BACKGROUND: url(images/nav_bg.gif) #99cc00 no-repeat 0px -42px;
}
#navsite ul li a:link:hover,
#navsite ul li a:visited:hover {
color: #000;
BACKGROUND: url() #fff no-repeat 0px -42px;
}

html文件

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Enjoy Life




js文件

sfHover = function() {
var sfEls = document.getElementById("navsite").getElementsByTagName("li");
for (var i=0; i

css文件已经在HTML文件中,请需要的朋友根据需要修改自己的css

该日志未加标签
发表于 2007-01-14 18:20:23 目录:HTML客户端, PHP, 网站技术 [RSS 2.0] 您可以评论. Pinging 不可用.
  • 相关阅读
  • homezz 美国专业主机商
    已经有3位大师动手指导 拒绝低俗
    • 1楼 江 东 在2007.01.14 18:51发表评论如下: 回复

      coolcode好像有问题,所以js下载下来会出错,大家可以用这个链接下载js:http://www.storyday.com/wp-content/themes/cosbeta/nav.js

      • 2楼 ryan 在2007.04.16 09:31发表评论如下: 回复

        不好用啊。

        • 3楼 cosβ 在2007.04.16 09:33发表评论如下: 回复

          自己修改最好要熟悉css。否者很难做出好看的menu,有点难度的

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