wordpress 主题之下拉列表导航栏

Graygift — Fri, 31 Jul 2009 04:09:50 +0000

看到别人的导航栏是下拉列表式的，就只有一个感觉，羡慕。但是我又不想单单为了这个功能去用上一个插件，怎么办呢？自己动手呗！可是在Google上找了很多的导航栏样式，都很漂亮，但漂亮的代价也是沉重的！为了漂亮而付出速度那是不行的！所以找来找去，终于找到了简单的导航栏方法！

哈哈！其实我想要得就是想在导航栏上加上分类下拉式导航，当然想要加其他的方法都是一样的，就是li里面套li啊，不过对我来说没什么意义！

先当然是该html代码了，加上分类的导航链接就是在主导航栏ul之下再加也一个li项。

^?Download download.txt

<li class="cat-item"><a href="#">分类Categoriesa>
<ul class="children">
< ?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "
";
}
?>
 
li>

接下来就是CSS代码了，这个需要自己调试了。

^?Download download.txt

#nav {
}
#nav ul {
}
#nav li {
}
#nav li a {,
}
#nav li a:hover {
}
#nav li ul {
}
#nav li ul li {
}
#nav li ul li a {
}
#nav li ul li a:hover {
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: auto;
}

最后就是对万恶的IE6的兼容了，因为IE6中只支持啊a：hover，而不支持其他的：hover，你应当看到上面的css中有一些代码不能运行啊！所以需要Javascript脚本支持。

^?Download download.txt

    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfels .length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

感谢：peterzsk

Graygift@ye » 下拉列表

wordpress 主题之下拉列表导航栏