导航栏菜单 —— 滑块随鼠标移动

最新推荐文章于 2024-11-28 13:18:25 发布

原创最新推荐文章于 2024-11-28 13:18:25 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

实战项目专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何创建一种交互式导航栏菜单，该菜单的滑块部分会随着鼠标的移动而移动，提供动态的用户体验。内容涵盖菜单设计、鼠标事件监听以及滑块动画的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

在这里插入图片描述

        <div id="navbar" class="collapse">
          <ul class="nav navbar-nav navbar-nav-c">
            <li class="my-toggle"><a class="active" href="javascript:;">首页</a></li>
            <li class="my-toggle">
              <a href="./history.html">百年品牌 </a> <span class="caret caretwebShow"></span>
              <div class="caretphoneShow"><span class="caret"></span></div>
              <ul class="my-toggle-list">
                <li><a href="brand-history.html">品牌故事</a></li>
                <li><a>创新基因</a></li>
                <li><a>全球布局</a></li>
                <li><a>班尼戈中国</a></li>
              </ul>
            </li>
            <li class="my-toggle">
              <a href="javascript:;">产品与运用 </a> <span class="caret caretwebShow"></span>
              <div class="caretphoneShow"><span class="caret"></span></div>
              <ul class="my-toggle-list">
                <li><a>管路系统</a></li>
                <li><a>流体控制</a></li>
                <li><a>经典案例</a></li>
              </ul>
            </li>
            <li class="my-toggle">
              <a href="javascript:;">新闻中心 </a> <span class="caret caretwebShow"></span>
              <div class="caretphoneShow"><span class="caret"></span></div>
              <ul class="my-toggle-list">
                <li><a>企业咨询</a></li>
                <li><a>行业咨询</a></li>
              </ul>
            </li>
            <li class="my-toggle">
              <a href="javascript:;">更多依赖 </a> <span class="caret caretwebShow"></span>
              <div class="caretphoneShow"><span class="caret"></span></div>
              <ul class="my-toggle-list">
                <li><a>班管家365服务</a></li>
                <li><a>班尼戈商学院</a></li>
                <li><a>招商加盟</a></li>
                <li><a>系统设计</a></li>
                <li><a>资料下载</a></li>
                <li><a>联系我们</a></li>
                <li><a>招贤纳士</a></li>
              </ul>
            </li>
            <div class="nav-scroll"></div>       
          </ul>
        </div>

<script>
  $(function(){
    let navScroll = $('.nav-scroll'),
        navActive = $('.active');
        navScrollWidth = navActive.width();
        navScrollLeft = navActive.parent().position().left+navActive.position().left;
      navScroll.css({"width":navScrollWidth,left:navScrollLeft})
      $('.my-toggle').mouseenter(function(){
        console.log($(this))
        navScroll.stop().animate({left:$(this).children('a').position().left+$(this).position().left,width:$(this).width()},350)
      })
      $('.my-toggle').mouseleave(function(){
        navScroll.stop().animate({left:navScrollLeft,width:navScrollWidth},350)
      })
  })
  $('.product_head,.product_img,.about_img,.about_wz,.wedo_wz,.wedo_box,.wedo_box2,.footer-col').smoove({offset:'10%'});
</script>