当前位置:首页 > CMS教程 > WordPress > 列表

wordpress中CSS来简单实现下拉菜单效果

发布:smiling 来源: PHP粉丝网  添加日期:2014-03-23 22:25:26 浏览: 评论:0 

最近,群里很多朋友都安装了ssmay主题,感觉还不错,不过,有几个朋友提出,为什么ssmay主题没有下拉菜单呀,当时,也没在意,因为这个主题是根据自己的需求来设计的,后来,又有几个朋友提到这个事情,我觉得也是,为什么不给ssmay主题弄一个下拉菜单呢?那样启不是让网站更加的人性——可展示的分类就更加多了,其实,实现下拉菜单,有好几种途径可以实现,如JS实现、插件实现、还有CSS实现,这里,我只是介绍通过CSS来简单实现 下拉菜单效果.

首先,我们要对菜单做相应的设置。

进入后台——>外观——>菜单,创建菜单并把分类目录添加到这个菜单里,这里不多说,然后,把你需要显示的二级菜单(或子分类)移到它的一级菜单下面(或父分类).

如果你使用的主题是Ssmay 1.1主题,那么到这里你的菜单就是下拉式菜单了,到这里就可以结束了,如果你想研究一下,可以继续向下看.

然后,修改头部文件导航菜单的代码,把原有的导航菜单代码换成下面的这句代码.

<?php wp_nav_menu( array( ‘container’ => ”,’items_wrap’ => ‘<ul id=”nav” class=”menu”>%3$s</ul>’,'fallback_cb’ => ” ) ); ?>

最后,是设置相关的CSS代码,把下面这段代码放到style.css文件里,代码如下:

  1. /*下拉菜单*/ 
  2. #nav
  3. background:#222
  4. font-size:1.1em
  5. #nav#nav ul { 
  6. list-stylenone
  7. line-height1
  8. #nav a, #nav a:hover { 
  9. displayblock
  10. text-decorationnone
  11. border:none
  12. #nav li { 
  13. floatleft
  14. list-style:none
  15. border-right:1px solid #a9a9a9
  16. #nav a, #nav a:visited { 
  17. display:block
  18. font-weight:bold
  19. color#f5f5f4
  20. padding:0px 0px
  21. #nav a:hover, #nav a:active, .current_page_item a, #home .on { 
  22. background:#000
  23. text-decoration:none 
  24. #nav li ul { 
  25. positionabsolute
  26. left: -999em
  27. heightauto
  28. width90px
  29. border-bottom1px solid #a9a9a9
  30. #nav li li { 
  31. width90px
  32. border-top1px solid #a9a9a9
  33. border-right1px solid #a9a9a9
  34. border-left1px solid #a9a9a9
  35. background#777
  36. #nav li li a, #nav li li a:visited { 
  37. font-weight:normal
  38. font-size:0.9em
  39. color:#FFF
  40. #nav li li a:hover, #nav li li a:active { 
  41. background:#000
  42. }www.111cn.net 
  43. #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
  44. left: auto
  45. a.main:hover { 
  46. background:none

这样,下拉菜单就实现了,当然,我这里只实现了二级下拉菜单,没有实现三级下拉菜单,如果想实现三级下拉菜单,还可以进一步去做,不过,我觉得wordpress网站没有必要设置到三级下拉菜单,因为站点一般都不会太大,呵呵,虽然这样的下拉菜单没有JS设计出来的炫酷,但是在SEO方面却要略胜一筹.

Tags: wordpress 下拉菜单 效果

分享到: