效果图:
<template>
<nav class="menu">
<a><div>HOME</div></a>
<ul>
<li>HOME11111</li>
<li>HOME22222</li>
<li>HOME33333</li>
</ul>
<a><div>HTML</div></a>
<ul>
<li>HTML11111</li>
<li>HTML22222</li>
<li>HTML33333</li>
</ul>
<a><div>CSS</div></a>
<ul>
<li>CSS11111</li>
<li>CSS22222</li>
<li>CSS33333</li>
</ul>
<a><div>JS</div></a>
<ul>
<li>JS11111</li>
<li>JS22222</li>
<li>JS33333</li>
</ul>
<a><div>ABOUT</div></a>
<ul>
<li>ABOUT11111</li>
<li>ABOUT22222</li>
<li>ABOUT33333</li>
</ul>
</nav>
</template>
<script>
export default {
mounted() {
document.addEventListener("mousemove", function () {
if (event.y <= 20) {
document.querySelector(".menu").style.transform = "translate(0,400px)";
}
});
document.querySelector(".menu").addEventListener("mouseleave", function () {
this.style.transform = "translate(0,-400px)";
});
},
};
</script>
<style>
.menu {
position: absolute;
left: 0;
top: -400px;
width: 100%;
height: 50px;
background-color: black;
transition: 1s;
z-index: 100;
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 0;
margin: 0;
}
.menu a {
display: flex;
width: 20%;
justify-content: space-evenly;
align-items: center;
opacity: 0.5;
height: 100%;
cursor: pointer;
}
.menu a:hover {
opacity: 1;
}
.menu a:hover + ul {
opacity: 1;
}
.menu a div {
width: auto;
height: auto;
font-size: 5%;
font-weight: bold;
color: white;
}
.menu ul {
position: absolute;
width: 20%;
height: auto;
left: 0;
top: 50px;
opacity: 0;
background-color: black;
padding: 0;
margin: 0;
transition: 0.5s;
}
.menu ul:nth-child(2) {
left: 0;
}
.menu ul:nth-child(4) {
left: 20%;
}
.menu ul:nth-child(6) {
left: 40%;
}
.menu ul:nth-child(8) {
left: 60%;
}
.menu ul:nth-child(10) {
left: 80%;
}
.menu ul:before {
content: "";
position: absolute;
left: 0;
top: -20px;
width: 100%;
height: 20px;
}
.menu ul:hover {
opacity: 1;
}
.menu ul li {
list-style: none;
text-align: center;
font-size: 5%;
font-weight: bold;
color: white;
opacity: 0.5;
padding: 5px 0 5px 0;
cursor: pointer;
}
.menu ul li:hover {
opacity: 1;
}
</style>