비전공자 개발일기

Arrow Magic Menu Indicator 본문

HTML _CSS

Arrow Magic Menu Indicator

HiroDaegu 2022. 6. 28. 00:59
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARROW MAGIC MENU INDICATOR</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <ul>
    <span id="marker"></span>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #333;
}

ul {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul li a {
  position: relative;
  font-size: 2em;
  color: #FFF;
  margin: 10px 0;
  display: inline-block;
}

#marker {
  position: absolute;
  height: 50px;
  transition: .5s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#marker::before {
  content: '';
  width: 15px;
  height: 15px;
  border-top: 4px solid #2598EB;
  border-right: 4px solid #2598EB;
  transform: rotate(45deg) translate(-20px, 20px);
}

#marker::after {
  content: '';
  width: 15px;
  height: 15px;
  border-top: 4px solid #2598EB;
  border-right: 4px solid #2598EB;
  transform: rotate(225deg) translate(-20px, 20px);
}
let marker = document.querySelector("#marker");
let itme = document.querySelectorAll("ul li a");

function Indicator(e) {
  marker.style.top = `${e.offsetTop}px`;
  marker.style.width = `${e.offsetWidth}px`;
}

itme.forEach(link => {
  link.addEventListener('mousemove', (e) => {
    Indicator(e.target)
  })
})
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

CSS Wave  (0) 2022.07.04
Google Search Clone  (0) 2022.07.01
3D Text Animation Effect  (0) 2022.06.27
Animated Hot Cup of Tea  (0) 2022.06.26
Dark Card Hover Effect  (0) 2022.06.25
'HTML _CSS' Related Articles more