WordPress二级导航功能CSS版

14年前 28

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

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

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

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

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

首先看演示:
image

WordPress二级导航演示

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

&link_after='); ?>

或者

 'menu-header', 'theme_location' => 'primary', 'link_before' => '', 'link_after' => '') ); ?>

即这样的结构:


注意看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;}

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

28 条评论

  1. #1

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

  2. #2

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

  3. #3

    不错,支持一个。

  4. #4

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

  5. #5

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

  6. #6

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

  7. #7

    我觉得不管你怎么改主题,都应该留下作者版权。
    现在好多知名的博客,都是改动别人,而且哪怕改动再大也都会留下以前的版权。而且这样做,照样无损博客的知名。
    这是做人问题。

  8. #8

    wordpress官方文档最给力~~

  9. #9

    这个能不能在后台里的菜单里控制啊………还是要手动在源码里加菜单的呀?我的意思是不是原生的3.0菜单?

  10. #10

    学习了!

  11. #11

    還在用 IE6的飄過 表示非常淡定 :mrgreen:

  12. #12

    博主更新不大给力,记得一篇博文能评论好几次

  13. #13

    哈哈 css无所不能

  14. #14

    现在在学这个东西呢,感觉好麻烦的说!郁闷死我了!老大看看能不能换个友情链接类? 😆

    • @small 呵呵,很不好意思,你是做SEO的,我的站首页被百度K了。。暂时不做链接!