本篇文章将解决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; }
至此完成整个导航效果。