html一个相对好看的菜单
鼠标左右移动实现了高亮和彩色滑块的切换效果
<!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>
评论