滑动导航栏

欢迎访问我的博客地址 : 博客地址

一个简单的滑动导航栏,拿来就用的那种

<div class='navsSlider'>
             <ul>
                    <li><a href="javascript:void(0)">首页</a></li>
                    <li><a href="javascript:void(0)">内容</a></li>
                    <li><a href="javascript:void(0)">模板</a></li>
                    <li><a href="javascript:void(0)">招聘</a></li>
                    <li><a href="javascript:void(0)">介绍</a></li>
                    <li><a href="javascript:void(0)">成功</a></li>
                    <li><a href="javascript:void(0)">论坛</a></li>
                    <li><a href="javascript:void(0)">论坛</a></li>
                    <li><a href="javascript:void(0)">论坛</a></li>
             </ul>
</div>

.header-nav{width:100%;height:60px;background-color:#333;display:flex;justify-content:space-around;flex-direction:row;align-items:center;}
.logo{width:500px;background-color:red;}
.navsSlider li { float: left;width:80px; height: 40px; display:flex;justify-content:center;align-items:center;}
.navsSlider li a { font-style: normal; position: relative; color: mediumslateblue; text-align: center; text-decoration: none; display: block;z-index:10;}
.navSlider { position: absolute; background-color:floralwhite; border-radius: 10px; width: 70px; height: 40px; z-index:9; }

引入jqury

!(function ($) {
    $.fn.extend({
        slider: function (sibling) {
            sibling.first().after("<li class='navSlider'></li>")
            $(this).hover(function () { var nowleft = $(this).position().left;
                 var navSlider = $(".navSlider").position().left;
                  if (nowleft > navSlider) {
                       $(".navSlider").stop().animate({ left: nowleft + 20 }, 300, function () { 
                           $(".navSlider").stop().animate({ left: nowleft }, 100) }) 
                } else {
                     $(".navSlider").stop().animate({ left: nowleft - 20 }, 300, function () {
                          $(".navSlider").stop().animate({ left: nowleft }, 100) }) } }, function () { return false; })
                 }
    })
})(jQuery);


$(function () {
    $(".navsSlider>ul li").slider($(".navsSlider>ul li"))
})