css+js实现导航栏色块跟随滑动+点击后增加样式

这篇文章，我给大家分享一个导航菜单的效果。用css+JS实现，效果如图：

本例实现效果：当鼠标移动到其他菜单项时，会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后，被点击的菜单名称文字字体会加粗。

现在，看看简单的菜单布局结构：

    <ul>
        <span class="li_bg"></span> <!-- 滑动的背景色 -->
        <li><a href="###">首页</a></li>
        <li><a href="###">热播剧集</a></li>
        <li><a href="###">最新电影</a></li>
        <li><a href="###">影业资讯</a></li>
        <li><a href="###">娱乐八卦</a></li>
        <li><a href="###">明星图库</a></li>
    </ul>

非常清爽简洁的标准菜单结构，css也很简单：

        * {
            margin: 0px;
            padding: 0px;
        }
 
        ul {
            list-style: none;
        }
 
        html,
        body {
            height: 100%;
            width: 100%;
            background: #ececec;
        }
 
        a {
            text-decoration: none;
        }
 
        ul {
            position: relative;            
            background: #f9f9f9;                      
            display: flex;
            width: 50%;
            border-radius: 25px;
            height: auto;
            padding:0px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);  
            }
 
        ul li {
            position: relative;
            z-index: 10;
            flex: 1;
            text-align: center;
        }
 
        ul li a {
            font-size:14px;
            color: #666;
            width: auto;
            height:20px;
            padding:15px;
            display: block;
            text-align: center;
            transition: all .3s;

        }
        ul li a:hover{           
            text-shadow:0px 0px 15px #fff;           
            transition: all .3s;
        }
 
        .li_bg {
            width: 17%;
            height: auto;
            display: inline-block;
            background-color: #ffcc00;
            box-shadow: 0 0px 15px 0 rgba(255, 204, 0, 0.58);
            position: absolute;
            left: 0;
            top: 0px;
            bottom: 0px;
            margin: auto;
            z-index: 2;
            border-radius: 25px;            
        }
        .this a{  
            font-weight: 700;  
            color: #333;
                    
        }

在css中定义的 .this 就是当li被点击时，给它增加的样式类名，通过修改 .this a 就可以实现点击后想要的效果。我这里就是给字体加粗，改变了字体颜色的深度。

接下来，我们让背景色块跟着鼠标动起来：

        // 需求：鼠标经过哪个导航栏目，背景色滑动过去  
        var liList = document.getElementsByTagName('li');
        var bg = document.getElementsByClassName('li_bg')[0];
        var header = 0;
        var liLeft = 0;
        console.log(0);
 
        // 添加事件
        // 遍历li 
        for (var i = 0; i < liList.length; i++) {
            liList[i].onmouseover = function () {
                liLeft = this.offsetLeft + (this.offsetWidth - bg.offsetWidth) / 2;
            }
        }
 
        // 使用定时器
        setInterval(function () {
            header = header + (liLeft - header) / 10;
            bg.style.left = header + 'px';
        }, 10)

写到这里，背景色块跟随鼠标滑动已经实现了。接下来我们来完善点击后给li增加this属性的的代码：

        $(document).ready(function (){
            $("li").each(function(index){
                $(this).click(function(){ 
                  $("li").removeClass("this");
                  $("li").eq(index).addClass("this");
                });
            });
        });

这段代码也很容易理解，当那个li项被点击，移除所有li的this类名，然后，给被点击的li增加this类名。

好了，这个例子的效果就完美实现了。需要《css+js实现导航栏色块跟随滑动+点击后增加样式》源码的同学，可以点击下载了。 感谢您阅读本篇，如果对您有所帮助，请收藏+点赞，谢谢！