具有滑动悬停效果的导航菜单答案

【问题标题】：navigation menu with sliding hover effect具有滑动悬停效果的导航菜单
【发布时间】：2016-11-30 08:33:34
【问题描述】：

谁能帮我做这个？我有一个导航/菜单栏。每当我将鼠标悬停在任何“li”上时，它都会获得背景颜色（红色）。每当我将光标移动到下一个/上一个li 时我想要做什么我想以平滑的效果移动background color。当我从导航/菜单栏移出时，背景颜色（红色）应默认返回“Home li”。请检查我的codepen 以方便您。

$('nav li').hover(
 function() {
  $('ul', this).stop().slideDown(200);
 },
function() {
 $('ul', this).stop().slideUp(200);
}
);

 function myFunction() {
   var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
   }
 }

nav {background: #2ba0db;}
nav ul {font-size : 0;margin : 0;padding : 0;}
nav ul li { display : inline-block; position : relative;}
nav ul li:first-Child {display : inline-block;position :   relative;background:red;}

nav ul li a {color : #fff;display : block;font-size:14px;padding:15px  14px; transition : 0.3s linear;text-decoration: none;}

nav ul li:hover {background : red;}

nav ul li ul {border-bottom : 5px solid #2ba0db;display : none;position : absolute;width : 250px;z-index: 1;}
nav ul li ul li {border-top : 1px solid #444;display : block;}

nav ul li ul li:first-child{border-top none;}
nav ul li ul li a {
  background: #373737;
  display: block;
  padding:10px 14px; 
  text-decoration: none;
}

nav ul li ul li a:hover { 
  background: #126d9b;
}
ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) { 
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {float: right;display: inline-block;}}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position:relative;}
  ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}
  ul.topnav.responsive li {float: none;display: inline; }
  ul.topnav.responsive li a {display: block;text-align: left; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="#">Categories </a>
    <ul>
      <li><a href="#">Category One</a></li>
      <li><a href="#">Category Two</a></li>
      <li><a href="#">Category Three</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

https://codepen.io/shoumiksk/pen/PoJmQEN

这里是主要功能

const marker = document.querySelector('#marker')
      const item = document.querySelectorAll('ul li a')
      function indicator(e){
        marker.style.top = e.offsetTop+'px';
        marker.style.width = e.offsetWidth+'px';
        
      }
      item.forEach(link=>{
        link.addEventListener('mousemove', (e)=>{
          indicator(e.target)
        })
      })

我知道我已经很晚了，但是对于那些还在徘徊的人，我做了一个类似的更简单的:)

【讨论】：