wordpress添加二级导航功能CSS代码

作者:Matrix 被围观: 574 次 发布时间:2013-09-21 分类:wordpress建站 拷贝型 码字型 零零星星 | 无评论 »

NOTICE:这是一个创建于 1169 天前的主题,其中的信息可能已经有所发展或是发生改变。

NGRO主题没有导航菜单,也就只有自己动手了。

最终样式,感觉还不错:

最终样式

 

步骤:

1.header.php中添加

  1. <?php wp_nav_menu(array('theme_location'=>'primary'));?>  

2.在style.css中添加

  1. .menu {font-weightbold;text-alignrightright;  
  2.     positionabsolute;  
  3. margin-left0px;  
  4.     top30px;  
  5.     padding5px;  
  6.     font-size13px;  
  7.     list-style-typenone;  
  8.     font-family: 'Lucida Sans Unicode', 'Lucida Grande', Tahomasans-serif;  
  9. }  
  10. .menu li a {  
  11.     padding5px 8px;  
  12.     margin: 0 8px;  
  13.     color#F1F7FA;  
  14.     font-size14px;  
  15.     displayblock;  
  16.     border-bottom:none;  
  17. }  
  18. /*.menu li { 
  19.     float: left; 
  20.     padding: 0 10px; 
  21. }*/  
  22. .menu li.current_page_item a{  
  23.     border-bottom3px solid #C0DEED;  
  24.     color#fff;  
  25. }  
  26. .menu li a:hover{color:#fff;border-bottom3px solid #C0DEED;}  
  27. .menu li:hover > ul{list-style-typenone;display:block; }   
  28. .menu li:hover > ul li a{color:#000;}  
  29. .menu li:hover > ul li a:hover{color:#FFF;}  
  30. .menu ul {displaynone;positionabsolute;topauto;leftauto;floatleft;width:224px;z-index: 999;}   
  31. .menu ul li {text-alignleft;  
  32.     background:#b4cfe8;  
  33.     padding:0px;  
  34.     border:1px solid #ccc;  
  35.     -moz-border-radius: 5px;  
  36.     -webkit-border-radius: 5px;  
  37.     border-radius: 5px;  
  38.     -webkit-box-shadow:0px 0px 3px #333;  
  39.     -moz-box-shadow:0px 0px 3px #333;  
  40.     box-shadow:0px 0px 3px #333;  
  41. font-size13px;list-style:none;margin-right:1px;}  
  42. .menu ul ul {left100px;top0px;}   
  43. ol.menu li.current  , ol.menu li a:hover {  
  44.     border-bottom3px solid #C0DEED;  
  45.     color#fff;  
  46. }  

说明:代码都是杂七杂八的综合型,有取自JS Mixhjyl.org

参考:http://hjyl.org/WordPress-second-wp-menu-css/

另一种样式

就换了个颜色  TMD 太小清新了

重新修改了一下。 ➡ 好像就是变了个颜色

css代码:

  1. /*导航菜单*/  
  2. .menu {font-weightbold;text-alignrightright;whitewhite-space:nowrap;  
  3.     positionabsolute;  
  4. margin-left0px;  
  5.     top30px;  
  6.     padding5px;  
  7.     font-size13px;  
  8.     list-style-typenone;  
  9.     font-family: 'Lucida Sans Unicode', 'Lucida Grande', Tahomasans-serif;  
  10. }  
  11. .menu li a {  
  12.     padding5px 8px;  
  13.     margin: 0 8px;  
  14.     color#F1F7FA;  
  15.     font-size14px;  
  16.     displayblock;  
  17.     border-bottom:none;  
  18. }  
  19. /*.menu li { 
  20.     float: left; 
  21.     padding: 0 10px; 
  22. }*/  
  23. .menu li.current_page_item a{  
  24.     border-bottom3px solid #C0DEED;  
  25.     color#fff;  
  26. }  
  27. .menu li a:hover{color:#fff;border-bottom3px solid #C0DEED;}  
  28. .menu li:hover > ul{list-style-typenone;display:block; }   
  29. .menu li:hover > ul li a{color:#000;}  
  30. .menu li:hover > ul li a:hover{color:#FFF;}  
  31. .menu ul {displaynone;positionabsolute;topauto;leftauto;floatleft;width:224px;z-index: 999;}   
  32. .menu ul li {  
  33. text-alignleft;  
  34.     color#fff;    
  35.     /*padding: 5px;  */  
  36.     background#b4cfe8;    
  37.     -moz-box-shadow: 0px 0px 5px #8EC1DA;    
  38.     -webkit-box-shadow: 0px 0px 5px #8EC1DA;    
  39.     box-shadow: 0px 0px 5px #8EC1DA;    
  40.     -moz-border-radius: 3px;    
  41.     -webkit-border-radius: 3px;    
  42.    border-radius: 5px;    
  43.     
  44.    text-shadow1px 1px 1px #888888;    
  45.   
  46.   
  47. }  
  48. .menu ul ul {left100px;top0px;}   

 

http://www.neoease.com/Wordpress-menubar-2/

本文固定链接:http://www.hhtjim.com/secondary-navigation-function-is-added-to-the-wordpress-css-code.html
Matrix
本文章由 Matrix 于2013年09月21日发布在wordpress建站, 拷贝型, 码字型, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:wordpress添加二级导航功能CSS代码-HHTjim'S 部落格
关键字:, ,

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!