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

作者:matrix 被围观: 1,708 次 发布时间:2013-09-21 分类:Wordpress 零零星星 | 无评论 »

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

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

最终样式,感觉还不错:

最终样式

步骤:

1.header.php中添加

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

2.在style.css中添加

.menu {font-weight: bold;text-align: rightright;  
    position: absolute;  
margin-left: 0px;  
    top: 30px;  
    padding: 5px;  
    font-size: 13px;  
    list-style-type: none;  
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', Tahoma, sans-serif;  
}  
.menu li a {  
    padding: 5px 8px;  
    margin: 0 8px;  
    color: #F1F7FA;  
    font-size: 14px;  
    display: block;  
    border-bottom:none;  
}  
/*.menu li { 
    float: left; 
    padding: 0 10px; 
}*/  
.menu li.current_page_item a{  
    border-bottom: 3px solid #C0DEED;  
    color: #fff;  
}  
.menu li a:hover{color:#fff;border-bottom: 3px solid #C0DEED;}  
.menu li:hover > ul{list-style-type: none;display:block; }   
.menu li:hover > ul li a{color:#000;}  
.menu li:hover > ul li a:hover{color:#FFF;}  
.menu ul {display: none;position: absolute;top: auto;left: auto;float: left;width:224px;z-index: 999;}   
.menu ul li {text-align: left;  
    background:#b4cfe8;  
    padding:0px;  
    border:1px solid #ccc;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -webkit-box-shadow:0px 0px 3px #333;  
    -moz-box-shadow:0px 0px 3px #333;  
    box-shadow:0px 0px 3px #333;  
font-size: 13px;list-style:none;margin-right:1px;}  
.menu ul ul {left: 100px;top: 0px;}   
ol.menu li.current  , ol.menu li a:hover {  
    border-bottom: 3px solid #C0DEED;  
    color: #fff;  
}  

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

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

另一种样式

就换了个颜色  太小清新了

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

css代码:

/*导航菜单*/  
.menu {font-weight: bold;text-align: rightright;whitewhite-space:nowrap;  
    position: absolute;  
margin-left: 0px;  
    top: 30px;  
    padding: 5px;  
    font-size: 13px;  
    list-style-type: none;  
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', Tahoma, sans-serif;  
}  
.menu li a {  
    padding: 5px 8px;  
    margin: 0 8px;  
    color: #F1F7FA;  
    font-size: 14px;  
    display: block;  
    border-bottom:none;  
}  
/*.menu li { 
    float: left; 
    padding: 0 10px; 
}*/  
.menu li.current_page_item a{  
    border-bottom: 3px solid #C0DEED;  
    color: #fff;  
}  
.menu li a:hover{color:#fff;border-bottom: 3px solid #C0DEED;}  
.menu li:hover > ul{list-style-type: none;display:block; }   
.menu li:hover > ul li a{color:#000;}  
.menu li:hover > ul li a:hover{color:#FFF;}  
.menu ul {display: none;position: absolute;top: auto;left: auto;float: left;width:224px;z-index: 999;}   
.menu ul li {  
text-align: left;  
    color: #fff;    
    /*padding: 5px;  */  
    background: #b4cfe8;    
    -moz-box-shadow: 0px 0px 5px #8EC1DA;    
    -webkit-box-shadow: 0px 0px 5px #8EC1DA;    
    box-shadow: 0px 0px 5px #8EC1DA;    
    -moz-border-radius: 3px;    
    -webkit-border-radius: 3px;    
   border-radius: 5px;    

   text-shadow: 1px 1px 1px #888888;    


}  
.menu ul ul {left: 100px;top: 0px;} 

 

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

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

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

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