您的位置:首页 » Wordpress » 正文

WordPress非插件实现二级菜单效果及如何通过代码知道导航有二级菜单

本篇文章将解决3个问题。

1、如何通过代码知道该菜单项是否有二级菜单

2、非jquery插件实现WordPress的二级菜单

3、如何实现在菜单项中添加其他代码标签,如小箭头

如何通过代码知道该菜单项是否有二级菜单

我的网站是自己开发的主题,导航我使用了二级菜单,在WordPress 4.0版本之前,也就是两年前,是无法通过WordPress导航的class知道某个导航项是否有二级菜单标识的。如下图:

WordPress的二级菜单代码

那么在该版本之前如果要实现判断导航是否拥有二级菜单,需要使用代码修正。

将如下代码加入到主题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)。如下图:

有二级菜单的导航项会添加menu-item-has-children

非jquery插件实现WordPress的二级菜单

要添加二级菜单,我们仅需要在后台的外观–菜单中拖动即可。假设你已经完成这个步骤。那么现在的代码结构就相当于如下所述:

有二级菜单的导航项会添加menu-item-has-children

所以我们首先要做的就是将二级菜单通过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;
}

至此完成整个导航效果。

  • 有2,067次围观
除特别声明外, 本站所有内容皆为原创,转载时请务必以超链接形式标明文章出处和作者信息

分享给我的好友看看:

 

关于作者:

贡献:kouok已经在第三评发表83篇文章了,你也来试试

简介:互联网从业者、WEB前端开发讲师;一WordPress工作室负责人、博主、站长。从小到大折腾过很多东西,也尝试了很多。招第三评测网编辑、合伙人

Ta的专栏 | 新浪微薄 | 腾讯微薄 | 其他SNS






快捷键:Ctrl+Enter