WordPress二级导航功能CSS版

好长时间没博起了，今儿个雄起。。。唉，都怪宿舍网络不给力，老断网，没办法，便宜嘛！凑合着吧。。。

最近我的博客和W7C都还不错，排名一个劲往上凑，看了看统计，也没发现有多少流量，有点弄不清楚alexa是怎么排名的了，难道是别人退步了？很多人都很喜欢我yTwo和yCms这两个主题，我也很高兴。我发现更多的是新手，他们连说明都没看清楚就一个劲的问问题，“怎么会有logo下面都是页面的链接，分类哪去了”，“那个图片广告是怎么添加的”，“侧边栏怎么会只有一个小工具”等等，有时候我也很无助，但是没办法，还是得回答。也希望这些朋友们谅解，自定义菜单，后台设置，小工具设置，是WordPress最基础的，就算我没这个主题，它也是存在的，希望你们多多熟悉下WordPress先。。。

关于版权的说说。这个版权的问题虽然在我们这个国度很正常的问题，但是还是得说。就像之前五个木童鞋、萧涵童鞋一样，我也发现了这个问题。最近一位热心的童鞋发短信联系我，问了我一大堆的问题，怎么改这个怎么改那个，但当我看到他的网站的时候，他改的很彻底，所有关于皇家元林的信息全没了，包括版权。其实我做主题，为了方便大家，能自动调用的就自动调用自己博客上的内容，所以“皇家元林”的信息很少，而版权，我相信大家都明白，WordPress本身是个开源免费的博客，为了尊重做主题人的无私奉献，保留版权信息应该说是一种共识，对WordPress官方也一样，我们做主题的同样会加上一个WordPress官方的链接，表示尊重！如果我们看到自己的主题被别人改成他们自己的东西，而且他们还一个劲的问我们这个怎么改，那个怎么改，我们是什么样的心情？所以，我希望大家可以尊重我的主题，并且呼吁所有人可以尊重所有的主题！免费不一定是最好的，但是免费更需要得到尊重，这对你我他都没有损失！

言归正传。我最近帮一朋友做公司主题，终于明白了WordPress默认主题里二级导航的CSS设置。之前一直看不懂，也找了不少设置二级导航的方法，js版，query版等等，我都没有成功，所以我做主题一直都不支持二级导航。

不过这个方法有个缺点：不支持IE6.0！不过不要紧，我想现在没几个想用IE6的吧，如果你现在还在用IE6，那你真的out了！

首先看演示：

WordPress二级导航演示

其次，我们来看我用的调用代码

1	<?php wp_nav_menu('container=\'\'&title_li=&link_before=<span>&link_after=</span>'); ?>

或者

1	<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'link_before' => '<span>', 'link_after' => '</span>') ); ?>

即这样的结构：

<ul class="menu">
    <li class="current-menu-item current_page_item menu-item-home....">
        <a href="#"><span>主导航</span></a>
        <ul class="sub-menu">
             <li class="current-menu-item current_page_item menu-item-home....">
                 .......依次循环下去......
             </li>
        </ul>
    </li>
</ul>

注意看CSS样式：

ul.menu{background:#EEEEEE;display:block;height:44px;border-radius:0 5x 5px 0;}  //定义全局menu
.menu li{float:left;position:relative;list-style:none;padding:12px;line-height:20px;font-weight:bold;font-size:14px;} //定义主导航的排序，注意position很重要
.menu li a:hover{color:#fff;}
.menu li:hover > ul{display:block;background:#EEEEEE;}  //这个最关键，就是当鼠标hover时发生的事，注意display属性
.menu li:hover > ul li a{color:#737373;}
.menu li:hover > ul li a:hover{color:#FFF;}
.menu ul {box-shadow: 0px 3px 3px rgba(0,0,0,0.2);-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);display: none;position: absolute;top: 44px;left: 0;float: left;width: 85px;z-index: 99999;} //这个也是最关键的，就是当鼠标移开时发生的事，注意display、position的属性。
.menu ul li {min-width: 85px; margin:0;padding:5px 0;}
.menu ul ul {left: 100%;top: 0;} //这句没看懂，但是觉得也是重要的，应该是关于三级导航的位置
.menu li:hover,li.current-menu-item, li.current_page_item, li.current-cat{background:#06B11A;box-shadow: 0px 3px 3px rgba(0,0,0,0.2);-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);}
li.current-menu-item a, li.current_page_item a, li.current-cat a{color:#fff;}

注释的很重要，其他的属性自己看着办，本例仅供参考。

Eake.net

2011/08/23 22:02 -@

那个经常发短信的是我。。。

皇家元林
2011/08/24 09:12 -@

对对，说的就是你。。呵呵，你这个例子很经典。。

2011/08/24 09:27 -@

我这就把版权改回来！呵呵。

一路向北

2011/08/25 08:22 -@

不错，支持一个。

肖俊

2011/08/25 09:36 -@

在现在的国内互联网里面谈版权真的伤感情，也伤不起。

皇家元林
2011/08/25 10:31 -@

唉。。很杯具。。。
不过我一直坚信着。。希望。。

七小罗汉

2011/08/25 11:35 -@

版权问题在中国没法谈，尤其是再网络上没有监管的机制

皇家元林
2011/08/25 12:05 -@

这得靠大家自觉了

正小成

2011/08/25 15:24 -@

我是默默滴，使劲滴把元林兄的主题改了个遍，不过链接还是一直留着滴
元林兄会不会告我侵权，然后跨省啊

皇家元林
2011/08/25 15:43 -@

谢谢你的支持！
呵呵，我会跨省请你吃饭。。
- 正小成
  2011/08/25 15:52 -@
  
  居然收不到邮件回复通知啊？？？
  - 皇家元林
    2011/08/25 16:43 -@
    
    你是说我的博客？还是你的？
    - 正小成
      2011/08/25 20:48 -@
      
      我在你博客留言收不到邮件我的博客可以
      - 皇家元林
        2011/08/26 14:33 -@
        
        郁闷了，WP-Mail-SMTP插件失效了一半，你们留言我可以收到。
        现在我禁用了这个插件，用系统默认的mail()函数还是可以的。。
        好在不是主题的问题。。