之前道招网一直是使用的是此主题simple-m的默认的设置,即是页面导航。目前是分类导航+页面导航,并且都支持二级子分类和二级子页面哦。实现这个功能要用到两个函数

<!-- 页面导航菜单 START -->
<div id="menu">
<div class="menub">
      <ul>
<li<?php if (is_home()) { echo ' class="current-cat"';} ?>><a title="<?php _e('Home', 'default'); ?>" href="<?php echo get_settings('home'); ?>/"><?php _e('Home', 'default'); ?></a></li>
<?php
$currentcategory = '';

// 以下这行代码用于在导航栏添加分类列表,
if  (!is_page() && !is_home()) {
    $catsy = get_the_category();
    $myCat = $catsy[0]->cat_ID;
    $currentcategory = '&current_category='.$myCat;
}
wp_list_categories('depth=2&title_li=&show_count=0&hide_empty=0'.$currentcategory);

// 以下这行代码用于在导航栏添加页面列表
wp_list_pages('depth=2&title_li=&sort_column=menu_order');

?><li><a rel="nofollow" href="<?php bloginfo('url'); ?>/?random" title="随便看看" target="_blank">随便看看</a></li><div id="close-sidebar"><li class="close-bar" style="float:right;"><a rel="nofollow" href="/daozhao/none" title="隐藏侧边栏">隐藏侧边栏</a></li>
</ul>
</div>
</div>
<!-- 页面导航菜单 END -->

然后就是css来设置这个menub了,

#menu{width:960px;margin:10px auto 0px;border:1px #aaa;-webkit-box-shadow:#ccc 0 0 5px;-moz-box-shadow:#CCC 0 0 5px;box-shadow:#CCC 0 0 5px;background:#FFF;height:35px}
/*#menu{width:960px;margin:10px auto 0px;border:1px solid #aaa;-webkit-box-shadow:#ccc 0 0 5px;-moz-box-shadow:#CCC 0 0 5px;box-shadow:#CCC 0 0 5px;background:#FFF;height:35px}*/
#footer{width:960px;margin:30px auto 10px;border:1px solid #aaa;-webkit-box-shadow:#CCC 0 0 5px;-moz-box-shadow:#CCC 0 0 5px;box-shadow:#CCC 0 0 5px;background:#FFF;height:35px}
#menu ul li,#footer ul li{float:left;text-align:center;min-width:57px}
#menu ul li a,#footer ul li a{font-size:14px;display:block;padding:7px 14px;white-space:nowrap}
#menu ul li:hover a,#footer ul li:hover a{transform:rotate(6deg);-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg)}
#menu ul li:hover,#footer ul li:hover{background:#f2f2f2;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
#menu ul li.current-cat a,.current_page_item a{color:#1ba1e2}
.menub{font-size:12px;position:relative;z-index:100;}
.menub ul{list-style:none;}
.menub li {float:left;position:relative;}
.menub ul ul {visibility:hidden;position:absolute;}
.menub table {position:absolute; top:0; left:0;}
.menub ul li:hover ul,
.menub ul a:hover ul{visibility:visible;}
.menub a{display:block;background:#ffffff;padding:0px;margin:0px;color:#777777;text-decoration:none;}
.menub a:hover{background:#f2f2f2;color:#f09609;}
.menub ul ul{}
.menub ul ul li {clear:both;text-align:left;font-size:12px;}
.menub ul ul li a{display:block;width:100px;height:13px;margin:0;border-bottom:1px solid #000000;}
.menub ul ul li a:hover{border:0;background:#bce27f;}

随机文章

魔兽世界大脚插件也有时不给力啊
魔兽世界大脚插件也有时不给力啊

Flipboard更新后一大优点已经不再了
Flipboard更新后一大优点已经不再了

采用Intel HAXM对模拟器进行加速
采用Intel HAXM对模拟器进行加速

将excel里面的数据导入mysql
将excel里面的数据导入mysql

如何越狱你的IOS 7设备
如何越狱你的IOS 7设备

新浪微博支持电信天翼和联通帐号登录
新浪微博支持电信天翼和联通帐号登录

相关文章

百度新首页看法
百度新首页看法

QQ电脑管家的Q盘登陆超时
QQ电脑管家的Q盘登陆超时

大家快来免费抢阿里云主机哦
大家快来免费抢阿里云主机哦

Eclipse不能自动编译java为class的解决办法
Eclipse不能自动编译java为class的解决办法

企业邮箱用户名太短的悲哀
企业邮箱用户名太短的悲哀

新浪微博纪念乔布斯,腾讯微博没有
新浪微博纪念乔布斯,腾讯微博没有

内容分享:道招
本文链接:更改道招网导航栏实现wordpress二级分类目录(页面)导航
道招声明:除特别标注或作者不详外,本站所有文章均为原创,转载请注明。欢迎共同关注互联网!