本篇文章将解决3个问题。
1、如何通过代码知道该菜单项是否有二级菜单
2、非jquery插件实现WordPress的二级菜单
3、如何实现在菜单项中添加其他代码标签，如小箭头
如何通过代码知道该菜单项是否有二级菜单
我的网站是自己开发的主题，导航我使用了二级菜单，在WordPress 4.0版本之前，也就是两年前，是无法通过WordPress导航的class知道某个导航项是否有二级菜单标识的。如下图：
那么在该版本之前如果要实现判断导航是否拥有二级菜单，需要使用代码修正。
将如下代码加入到主题function.php中即可：
function menu_set_dropdown( $sorted_menu_items, $args ) {
$last_top = 0;
foreach ( $sorted_menu_items as $key => $obj ) {
// it is a top lv item?
if ( 0 == $obj->menu_item_parent ) {
// set the key of the parent
$last_top = $key;
} else {
//将拥有二级菜单的导航项添加dropdown这个class
$sorted_menu_items[$last_top]->classes['dropdown'] = 'dropdown';
}
}
return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );
但是这种方式会影响程序性能，尤其是当你的网站有特别多的导航条目时。幸好在4.0以后的版本WordPress官方更新了导航函数wp_nav_menu()功能。如果某个导航项有二级，它自动添加.menu-item-has-children这个class。所以我们仅需要将WordPress的版本更新到最新即可（目前最新版本为4.8.2）。如下图：
非jquery插件实现WordPress的二级菜单
要添加二级菜单，我们仅需要在后台的外观–菜单中拖动即可。假设你已经完成这个步骤。那么现在的代码结构就相当于如下所述：
所以我们首先要做的就是将二级菜单通过CSS隐藏。在主题style中，添加如下样式：
//导航容器样式
.nav {
margin: 25px 0 0 0;
background: #0073aa;
border: 1px solid #4b85a1;
box-shadow: 0 0 15px #999;
}
//一级菜单样式
.nav li.menu-item {
float: left;
position: relative;
z-index: 6;
}
//菜单链接样式
.nav-menu a:link, .nav-menu a:visited {
display: block;
position: relative;
padding: 12px 22px 12px 20px;
font: normal 500 14px "微软雅黑";
color: #d8f1fc;
border-right: 1px solid #3e82a6;
}
//二级菜单样式
.sub-menu{
position: absolute;
width: 10em;
padding: 5px 0;
background: #005b88;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 1px 1px 1px 0 #666;
display: none; /* 隐藏二级菜单*/
}
然后添加如下jquery代码，在添加jquery代码之前请先确保已经导入jquery库：
//给menu-item-has-children添加鼠标移入和移出事件
$(".menu-item-has-children").mouseenter(function() {
//鼠标移入时给一级菜单添加sfHover这个class，然后清除二级菜单动画队列，并显示二级菜单
$(this).addClass("sfHover").children("ul").stop(true,true).slideDown(200);
}).mouseleave(function() {
//鼠标移出时清除class，并隐藏二级菜单
$(this).removeClass("sfHover").children("ul").stop(true,true).slideUp(200);
});
为了更好的视觉效果我们还需要添加导航高亮CSS样式：
//菜单鼠标经过链接样式 ，sfHover添加的用处在这里
.nav-menu li.current-menu-item a, .nav-menu li a:hover, .sfHover a, .current_page_item a {
background: #005b88;
text-decoration: none;
}
具体效果就如你从我的IPLAYSEO博客中看到的那样。
如何实现在菜单项中添加其他代码标签，如小箭头
按照我给的代码做出来的效果会发现少了点东西，没错，为了直观看到哪些导航项有二级菜单，我们很有必要在该导航项旁边加个向下的小箭头。
添加的方法其实有很多种，比如可以通过JS插入到导航中，那么我这里介绍一种很冷门也很好用的方法。就是在后台–外观–菜单中添加的导航中插入HTML代码！
比如我要使用代码
<span class="sf-sub-indicator"> »</span>
插入到具有二级菜单的导航项的a链接标签内，我们就可以将代码复制到后台菜单的导航标签输入框中，如下图即为操作步骤：
这种添加方式不需要任何插件或代码的介入，很干净。完成以上步骤，我们就要添加CSS代码到主题样式中了，首先下载这个小三角，然后添加如下样式：
.sf-sub-indicator {
position: absolute;
top: 22px;
right: 10px;
width: 5px;
height: 3px;
text-indent: -9999em;
background: url(images/nav-arrows.png) no-repeat 0 -3px;
}
至此完成整个导航效果。
