通过jQuery实现WordPress下拉菜单

分类:前端技巧 热度:

通过jQuery实现WordPress下拉菜单

下拉菜单能把导航菜单以分类的形式整理起来,是网页UI设计中不可缺少的一部分。因为浏览器的兼容性问题,下拉菜单大部分是通过js实现的,而这其中用的最多的jQuery插件是superfish,superfish可以帮助我们实现多级下拉菜单,和丰富的视觉菜单效果,对于下拉菜单比较复杂的情况,superfish是一个不错的选择。

可是很多情况下,我们用不到superfish这么多丰富的功能,今天我们要说的就是简单的情况,只有一级下拉菜单的情况。通过下面一段jQuery代码就可以实现下拉菜单,并且直接支持WordPress默认的菜单功能。

$('.menu-item-has-children').mouseenter(function() {
    $(this).children('.sub-menu').show();
});

$('.menu-item-has-children').mouseleave(function() {
    $(this).children('.sub-menu').hide();
});

代码中的.menu-item-has-children.sub-menu都是WordPress给菜单自动加上的css类,通过鼠标的进入和离开事件来控制子菜单的显示和隐藏,实现非常优雅和简洁。

当然,只有这一段代码还不够,还需要一些CSS的支持。

.menu-item-has-children{
    position:relative;
}

li.menu-item-has-children .sub-menu{
    display:none;
    position: absolute;
    background: #333;
    margin-left: -50%;
    left: 50%;
}

上面的css是完成本实力中的代码所必须的,各位看官可以根据自己的需求增加css来美化下拉菜单。

上一篇:jQuery存储、获取、删除Cookies的函数 下一篇:对象不支持“preventDefault”属性或方法的解决办法
猜你喜欢
热门排行
精彩图文