wordpress添加二级导航功能CSS代码
2023-06-13 09:11:05 时间
wordpress添加二级导航功能CSS代码
作者:matrix 被围观: 1,226 次 发布时间:2013-09-21 分类:Wordpress 零零星星 | 无评论 »
这是一个创建于 3267 天前的主题,其中的信息可能已经有所发展或是发生改变。
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 Mix、hjyl.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;}
相关文章
- 教大家一个WordPress博客程序安装教程
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- css 更改所有text,CSS之cssText「建议收藏」
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- 在html中加入外部css样式,如何引入CSS样式表?
- WordPress可重用自定义css样式
- wordpress美化登录界面Wordpress博客 2 年前 桃李Taoli
- WordPress添加说说微语
- CSS 换行_css不允许换行
- 为 WordPress 添加前台 AJAX 注册登录功能
- php更换wordpress用户头像,将用户本地上传头像功能集成到WordPress主题中
- 使用WP Super Cache插件优化wordpress博客
- 如何查看 WordPress 文章,页面和分类等的 ID
- WordPress 遗嘱插件:Next of Kin
- 把 WordPress 作为 CSS Gallery
- WordPress 头像插件:Gravatars2
- 使用 Menu Icons 插件给 WordPress 菜单参加图标
- CSS 和 JS 合并压缩工具 Minify 及其 WordPress 插件
- WordPress 主题教程 #6e:窗体化侧边栏
- WordPress 技巧:用户注册时候不能含有非法关键字
- 指定你 WordPress 博客的 URL 范式
- WordPress 一键式全站优化插件:WPJAM-Basic
- wordpress如何解决Cookie没有HttpOnly标志-发现robots.txt文件-X-Frame-Options头未设置
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS如何影响MySQL的使用(css影响MySQL)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- CSS规则层叠的应用css必须要注意的几点
- CSS顶级技巧大放送,div+css布局必知
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)