wordpress 主题之下拉列表导航栏
{Graygift} 2009年07月31日 星期五12:09 下午. 点击量：171 次
看到别人的导航栏是下拉列表式的，就只有一个感觉，羡慕。但是我又不想单单为了这个功能去用上一个插件，怎么办呢？自己动手呗！可是在Google上找了很多的导航栏样式，都很漂亮，但漂亮的代价也是沉重的！为了漂亮而付出速度那是不行的！所以找来找去，终于找到了简单的导航栏方法！
哈哈！其实我想要得就是想在导航栏上加上分类下拉式导航，当然想要加其他的方法都是一样的，就是li里面套li啊，不过对我来说没什么意义！
先当然是该html代码了，加上分类的导航链接就是在主导航栏ul之下再加也一个li项。
?Download download.txt
1 2 3 4 5 6 7 8 9 10 11 12 13 | <li class="cat-item"><a href="#">分类Categories</a> <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 "</ul><ul>"; wp_list_categories('orderby=id&show_count=0&title_li= &use_desc_for_title=1&child_of='.$this_category->cat_ID); echo "</ul>"; } ?> </li> |
接下来就是CSS代码了，这个需要自己调试了。
?Download download.txt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
对《wordpress 主题之下拉列表导航栏》评论