DEV Community

Robson Muniz
Robson Muniz

Posted on

4 2

🎬Animated Menu Indicator | CSS & JavaScript

💡Learn how to build an Animated Menu Indicator in HTML, CSS and JavaScript using modern syntax!

Source Code:

Markup

<!DOCTYPE html>
<html lang="en">

<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>Animated Menu Indicator</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="app.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>

<body>
  <div class="navigation">

    <ul>

      <li class="list active" data-color="#e1422e"><a href="#">
          <span class="icon"><i class="fa-solid fa-house"></i></span>
          <span class="title">Home</span>
        </a>
      </li>

      <li class="list" data-color="#f6bc02"><a href="#">
          <span class="icon"><i class="fa-solid fa-user"></i></span>
          <span class="title">Profile</span>
        </a>
      </li>

      <li class="list" data-color="#49a84c"><a href="#">
          <span class="icon"><i class="fa-solid fa-message"></i></span>
          <span class="title">Message</span>
        </a>
      </li>

      <li class="list" data-color="#4c86f9"><a href="#">
          <span class="icon"><i class="fa-solid fa-circle-question"></i></span>
          <span class="title">Help</span>
        </a>
      </li>

      <li class="list" data-color="#461447">
        <a href="#">
          <span class="icon">
            <i class="fa-solid fa-gear"></i>
          </span>
          <span class="title">Settings</span>
        </a>
      </li>

      <div class="indicator"></div>

    </ul>
  </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #223160;
    overflow: hidden;
    transition: 0.5s;
}

.navigation {
    position: relative;
    width: 70px;
    height: 350px;
    background: #fff;
    border-radius: 35px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}

.navigation ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.navigation ul li {
    position: relative;
    list-style: none;
    width: 70px;
    height: 70px;
    z-index: 1;
}

.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #333;
    font-weight: 500;
}

.navigation ul li a .icon {
    position: relative;
    display: block;
    line-height: 75px;
    text-align: center;
}

.navigation ul li.active a .icon {
    color: #fff;
}

.navigation ul li a .icon i {
    font-size: 24px;
}

.navigation ul li a .title {
    position: absolute;
    top: 50%;
    left: 110px;
    background: #fff;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

.navigation ul li a:hover .title {
    opacity: 1;
    visibility: visible;
    transform: translateX(-25px) translateY(-50%);
}

.navigation ul li a .title::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    left: -8px;
    top: 46%;
    transform: rotate(45deg) translateY(-50%);
    border-radius: 2px;
    transition: 0.5s;
}
.navigation ul .indicator {
    position: absolute;
    left: 0;
    width: 70px;
    height: 70px;
    transition: 0.5s;
}

.navigation ul .indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    background: #223160;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: 0.5s;
}

.navigation ul li:nth-child(1).active ~ .indicator {
    transform: translateY(70px * 0);
}
.navigation ul li:nth-child(2).active ~ .indicator {
    transform: translateY(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator {
    transform: translateY(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator {
    transform: translateY(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator {
    transform: translateY(calc(70px * 4));
}

.navigation ul li:nth-child(1).active ~ .indicator::before {
    background: #e1422e;
}
.navigation ul li:nth-child(2).active ~ .indicator::before {
    background: #f6bc02;
}
.navigation ul li:nth-child(3).active ~ .indicator::before {
    background: #49a84c;
}
.navigation ul li:nth-child(4).active ~ .indicator::before {
    background: #4c86f9;
}
.navigation ul li:nth-child(5).active ~ .indicator::before {
    background: #461447;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

let list = document.querySelectorAll('li');

for (let i = 0; i < list.length; i++) {
    list[i].onmouseover = function() {
        let j = 0;
        while (j < list.length) {
            list[j++].className = 'list';
        }
        list[i].className = 'list active';
    };
}

// Change Body Color According to Indicator
list.forEach((element) => {
    element.addEventListener('mouseenter', function(event) {
        let bg = document.querySelector('body');
        let color = event.target.getAttribute('data-color');
        bg.style.backgroundColor = color;
    });
});
Enter fullscreen mode Exit fullscreen mode

🛴 Follow Me If You Want to Increase Your Dev Skills with 💡Project-Based Learning:
👉YouTube: https://bit.ly/WDevMadeEasy
👉Facebook: https://bit.ly/3cp2S5W
👉New Instagram: https://bit.ly/3ura3TW

Sentry workshop image

Sick of your mobile apps crashing?

Let Simon Grimm show you how to fix them without the guesswork. Join the workshop and get to debugging.

Save your spot →

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay