Jquery实现wordpress菜单的鼠标跟随效果

看别人家的博客，菜单栏下有一条装饰线，会根据鼠标悬停的位置来回滑动，且根据滑动距离长短，有明显的速度变化。一直心向往之，正好在学习wordpress的wp_nav_menu函数，顺便尝试一下实现这个效果。看过张戈博客主题的元素，似乎是在ul中存在一个特殊类名的li，这个li的定位为absolute，可以根据js提供的数值事实变化自己的位置。

为wordpress菜单添加一个元素

wp_nav_menu生成的菜单样例如下：

<ul id="menu-menu" class="primary-menu"><li class="menu-item current-menu-item"><a href="https://blog.abddb.com/">首页</a></li>
<li class="menu-item"><a href="https://blog.abddb.com/category/%e5%88%86%e7%b1%bb%e4%ba%8c/">分类二</a></li>
<li class="menu-item"><a href="https://blog.abddb.com/category/%e5%88%86%e7%b1%bb%e4%b8%89/">分类三</a></li>
<li class="menu-item"><a href="https://blog.abddb.com/category/%e5%88%86%e7%b1%bb%e5%9b%9b/">分类四</a></li>
<li class="menu-item"><a href="https://blog.abddb.com/category/%e5%88%86%e7%b1%bb%e4%ba%94/">分类五</a></li>
</ul>

反正都用上jquery了，就不费心去修改wp_nav_menu的参数去实现一个修饰的元素了，直接尝试js添加吧：

$("#menu-menu").append('<li id="navline"></li>')

不使用jquery的场合，也可以直接使用js的createElement命令创建元素。

jquery获取宽度与位置信息

$('li').on('mouseenter',function(){
    $("#navline").css("width",parseFloat($(this).width()+20)+"px");
    $("#navline").css("left",parseFloat($(this)[0].offsetLeft)+"px");
    $(this).addClass('hover');
    console.log($(this).offset());}
).on('mouseleave',function(){
    $(this).removeClass('hover');}
)

实现了类名变化与数据的获取，接下来的事就交给css了。