css

css/style.less

@@ -30,6 +30,7 @@
             }
             
             .menu-box {
+                position: relative;
                 height: 100%;
                 
                 .menu {
@@ -91,6 +92,15 @@
                     }
                 }
                 
+                .slider {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    height: 5px;
+                    background: #FFFFFF;
+                    transition: all 0.3s ease;
+                }
+                
                 .simplified-chinese {
                     .iconfont {
                         margin-right: 4px;

css/style.min.css

@@ -217,6 +217,7 @@ body {
   height: 58px;
 }
 .head-wrap .head .main .menu-box {
+  position: relative;
   height: 100%;
 }
 .head-wrap .head .main .menu-box .menu {
@@ -265,6 +266,14 @@ body {
 .head-wrap .head .main .menu-box .menu li:hover dl {
   display: block;
 }
+.head-wrap .head .main .menu-box .slider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  background: #FFFFFF;
+  transition: all 0.3s ease;
+}
 .head-wrap .head .main .menu-box .simplified-chinese .iconfont {
   margin-right: 4px;
   font-size: 20px;

js/global.js

@@ -4,6 +4,7 @@
       this.created(this).handleBind(this);
     },
     created: function () {
+
       new WOW().init();//全局页面动画初始化
 
       $("#slideBox").slide({
@@ -18,8 +19,31 @@
         }
       });
 
+      this.menuChnage();
+
       return this;
     },
+    /**
+     * 菜单里滑块效果
+     */
+    menuChnage: function () {
+      // 创建滑块标记并添加到导航条中
+      const $slider = $('<div class="slider"></div>');
+      $('.menu-box').append($slider);
+
+      // 监听鼠标移入菜单项事件
+      $('.menu li').on('mouseenter', function() {
+        const $currentItem = $(this);
+        const offsetLeft = $currentItem.position().left;
+        const width = $currentItem.outerWidth();
+
+        // 更新滑块标记位置和宽度
+        $slider.css({
+          'width': width + 'px',
+          'transform': 'translateX(' + offsetLeft + 'px)'
+        });
+      });
+    },
     handleBind: function (opt) {
 
       $(window).scroll(function () {
@@ -88,6 +112,7 @@
         });
       });
 
+
       return this;
     },
   }, $(function () {