Magic Navigation Menu

The Magic Navigation Menu is an interactive navigation system built using HTML, CSS, and JavaScript. It features smooth animations, clickable controls, and attractive transitions like sliding highlights. This project is ideal for developers who want to learn modern CSS animations and micro-interactions without using heavy libraries.

Create a semantic navigation using <nav> and unordered lists.
Use CSS transforms, transitions, and clip-path to create smooth, magical animations.
Add depth and style using SVG icons.
Use a hamburger toggle and responsive layout for a mobile-friendly experience.

How to Design:

HTML Structure: Create a <nav> element containing link lists. Add nested lists for dropdown menus and a hamburger button for mobile view. Use accessibility attributes like aria-expanded and aria-controls.

CSS Styling: Use CSS variables to control colors and animation timing. Apply transform and transition for animated effects. Add responsive breakpoints to switch between mobile and desktop layouts smoothly.

JavaScript: Use JavaScript to toggle menu states, update ARIA attributes, and manage keyboard navigation. Use requestAnimationFrame to ensure smooth visual transitions.

HTML

CSS

JavaScript


			<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Magic Navigation Menu </title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="navigation">
        <ul>
            <li class="list active">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="text">Home</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="person-outline"></ion-icon>
                    </span>
                    <span class="text">Profile</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="chatbubble-outline"></ion-icon>
                    </span>
                    <span class="text">Message</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="image-outline"></ion-icon>
                    </span>
                    <span class="text">Photos</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon">
                        <ion-icon name="settings-outline"></ion-icon>
                    </span>
                    <span class="text">Settings</span>
                </a>
            </li>
            <div class="indicator"></div>
        </ul>
    </div>

  <script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'></script>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js'></script><script  src="./script.js"></script>

</body>
</html>


 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
:root
{
    --clr:#151F28;

}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--clr);
}
.navigation
{
    width: 400px;
    height: 70px;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.navigation ul
{
    display: flex;
    width: 350px;
}
.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;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
}
.navigation ul li a .icon
{
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 1.5rem;
    text-align: center;
    transition: 0.5s;
    color: var(--clr);
}
.navigation ul li.active a .icon
{
    transform: translateY(-32px);
}
.navigation ul li a .text
{
    position: absolute;
    color: var(--clr);
    font-weight: 400;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
}
.navigation ul li.active a .text
{
    transform: translateY(10px);
    opacity: 1;
}
.indicator
{
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    background: #29fd53;
    border-radius: 50%;
    border: 6px solid var(--clr);
    transition: 0.5s;
}
.indicator::before
{
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 0 var(--clr);
}
.indicator::after
{
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 0 var(--clr);
}
.navigation ul li:nth-child(1).active ~ .indicator
{
    transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator
{
    transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator
{
    transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator
{
    transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator
{
    transform: translateX(calc(70px * 4));
}


        const list = document.querySelectorAll('.list');
function activeLink(){
    list.forEach((item)=>
    item.classList.remove('active'));
    this.classList.add('active');
}
list.forEach((item) =>
item.addEventListener('click',activeLink));

Magic Navigation Menu

Leave Comments

Blog Categories

Recent post

Travel Destinations Image Slider

Periodic Table

Stunning 3D Image Gallery

Tags

FOLLOW US

JavaScript Projects

Magic Navigation Menu

Leave Comments

Blog Categories

Recent post

Travel Destinations Image Slider

Periodic Table

Stunning 3D Image Gallery

Tags

FOLLOW US