HTML5+CSS3制作简单的滑块导航栏

效果图

说明

• 由于是同学拿着代码过来问这个效果怎么实现，所以自己这里也是基于他的代码改的
• 他们只学了HTML5+CSS3，所以只用这两个做了简单的实现

问题

• 这里有一些体验很差的地方，就是鼠标在菜单中移动，很明显滑块老是会有回家的冲动
• 还有一个不是很懂的地方，如果不用JS或者JQ，有什么办法可以实现那种active的效果
• 有懂了的大佬麻烦麻烦教教我，蟹蟹蟹蟹！

代码

• index.html

  <nav class="navbar">
    <ul> 
      <li><a><h1>首页</h1></a></li>
      <li><a href="category.html"><h1>种类</h1></a></li>
      <li><a><h1>产地</h1></a></li>
      <li><a><h1>购买</h1></a></li>
      <li><a><h1>用户</h1></a></li>
      <div class="bar active-first"></div>
    </ul>
  </nav>

• category.html

  <nav class="navbar">
    <ul> 
      <li><a href="index.html"><h1>首页</h1></a></li>
      <li><a><h1>种类</h1></a></li>
      <li><h1>产地</h1></li>
      <li><h1>购买</h1></li>
      <li><h1>用户</h1></li>
      <div class="bar active-second"></div>
    </ul>
  </nav>

• css

html,body{
  margin: 0;
  padding: 0;
}
nav{
  padding-top: 2.5rem;
}
a{
  text-decoration: none;
  color: #fe682e;
}
.navbar ul li{
  float: left;
  margin-left: 5rem;
  color: #fe682e;
  list-style: none;
  cursor: pointer;
  /* transition: 0.5s ease; */
}
.navbar ul li:nth-of-type(1):hover{
  color: #fff;
}

.navbar ul li:nth-of-type(2){
  margin-left: 60rem;
}
.bar{
  position: absolute;
  background-color: #22bc64;
  z-index: -1;
  width: 6rem;
  height: 4.5rem;
  border-radius: 1rem;
  transition: 0.5s ease;
}

.active-first, .navbar ul li:nth-of-type(1):hover + * + * + * + * + .bar {
  left: 6rem;
}
.active-second, .navbar ul li:nth-of-type(2):hover + * + * + * + .bar {
  left: 69rem;
}
.active-3rd, .navbar ul li:nth-of-type(3):hover + * + * + .bar {
  left: 77rem;
}
.active-4th, .navbar ul li:nth-of-type(4):hover + * + .bar {
  left: 85rem;
}
.active-5th, .navbar ul li:nth-of-type(5):hover + .bar {
  left: 93rem;
}

总结

• 对 HTML5 和 CSS3 了解不是很多，所以感觉用的方法是很笨的
• 用了   + 和   * 来找到 hover 状态下的 li 后面的兄弟元素.bar类
• 不知道怎么在选中一个菜单后，将滑块固定在那里，也就是实现active的效果，所以用了.active-*的方法，然后给不同页面的滑块div加上对应的css类名,比如第一个加的是.active-first，其他的类推

 

成长路上对自己所学的一些总结，各路大侠若有更好的办法望留言相助哇！

如果这篇文章对你有帮助的话请点帮我点个赞，让我知道我写的文章有帮助到他人哈哈哈，谢谢！