下拉列表导航栏

发表评论 | Trackback 2009年8月5日作者：死兔子点击量：1,309 次

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

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

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

 <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代码了，这个需要自己调试了。

 #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脚本支持。

 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);
 </sfels>