皇家元林

位置: 首页 > WordPress二级导航功能CSS版

WordPress二级导航功能CSS版

Aug 2011 23

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

最近我的博客和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;}

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

--转载请注明: 皇家元林 » WordPress二级导航功能CSS版

28条评论

  1. #21
  2. #22

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

  3. #23

    哎哟,你out很久了啊

  4. #24

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

  5. #25

    没关系,最主要的是那份心意,我懂了!

  6. #26

    哈哈 css无所不能

  7. #27

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

  8. #28

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

  9. 1 2

    发表评论

    (必填)

    1291