html一个滑动菜单

html一个相对好看的菜单

QQ截图20190301120934.jpg

鼠标左右移动实现了高亮和彩色滑块的切换效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标经过文字下划线导航菜单</title>

<style>
body {
  background: #ededed;
  padding: 0 20px;
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
}

h1 {
  text-align: center;
  margin: 80px 0;
}

.mynav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

.mynav li:not(:last-child) {
  margin-right: 20px;
}

.mynav a {
  display: block;
  font-size: 20px;
  color: black;
  text-decoration: none;
  padding: 7px 15px;
}

.target {
  position: absolute;
  border-bottom: 4px solid transparent;
  z-index: -1;
  -webkit-transform: translateX(-60px);
          transform: translateX(-60px);
}

.mynav a,
.target {
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}</style>
</head>
<body>
<h1>鼠标经过文字下划线导航菜单</h1>

<nav class="mynav">
  <ul>
    <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>
</nav>

<span class="target"></span>

<script>
"use strict";

(function () {

  var target = document.querySelector(".target");
  var links = document.querySelectorAll(".mynav a");
  var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

  function mouseenterFunc() {
    if (!this.parentNode.classList.contains("active")) {
      for (var i = 0; i < links.length; i++) {
        if (links[i].parentNode.classList.contains("active")) {
          links[i].parentNode.classList.remove("active");
        }
        links[i].style.opacity = "0.25";
      }

      this.parentNode.classList.add("active");
      this.style.opacity = "1";

      var width = this.getBoundingClientRect().width;
      var height = this.getBoundingClientRect().height;
      var left = this.getBoundingClientRect().left + window.pageXOffset;
      var top = this.getBoundingClientRect().top + window.pageYOffset;
      var color = colors[Math.floor(Math.random() * colors.length)];

      target.style.width = width + "px";
      target.style.height = height + "px";
      target.style.left = left + "px";
      target.style.top = top + "px";
      target.style.borderColor = color;
      target.style.transform = "none";
    }
  }

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function (e) {
      return e.preventDefault();
    });
    links[i].addEventListener("mouseenter", mouseenterFunc);
  }

  function resizeFunc() {
    var active = document.querySelector(".mynav li.active");

    if (active) {
      var left = active.getBoundingClientRect().left + window.pageXOffset;
      var top = active.getBoundingClientRect().top + window.pageYOffset;

      target.style.left = left + "px";
      target.style.top = top + "px";
    }
  }

  window.addEventListener("resize", resizeFunc);
})();</script>


<div style="text-align:center;">
<p>效果图</p>
</div>
</body>
</html>

标签: html

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://blog.kos.org.cn/bw/60.html

相关推荐

你肿么看?

        

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。