Magic Navigation

This project builds a modern animated bottom navigation menu with a floating indicator that moves smoothly between menu items. Each navigation icon lifts upward when active, while a circular indicator slides underneath to highlight the selection. The design mimics mobile app navigation patterns commonly seen in modern UI/UX. The animation feels fluid and responsive thanks to CSS transitions and minimal JavaScript. Overall, the project demonstrates clean interaction design using HTML structure, CSS animation, and simple event handling.

HTML

<li class="list active">
    <a href="#">
        <span class="icon">
            <ion-icon name="home-outline"></ion-icon>
        </span>
        <span class="text">Home</span>
    </a>
</li>

The HTML defines a navigation bar composed of an unordered list where each list item represents one menu option. Every menu item contains an icon and a text label, allowing visual and textual feedback together. Ionicons are used for scalable, crisp icons without image files. The active class marks the currently selected menu item at page load. A separate .indicator element is placed inside the list to visually track the active item.

This indicator is not inside any list item, allowing it to move freely underneath them. The structure is repetitive and predictable, making styling and animation easier. No inline styles are used, keeping markup clean. The HTML focuses purely on structure and semantics. All motion logic is delegated to CSS and JavaScript.

CSS

.navigation ul li.active a .icon {
    transform: translateY(-32px);
}

The CSS is responsible for the entire visual behavior of the navigation bar. A dark background contrasts with the white navigation container to draw focus. Each menu item is given equal width so the indicator can move in fixed steps. When a list item becomes active, its icon smoothly lifts upward using a transform animation. The text label fades in and slides upward, creating a layered interaction effect. The circular indicator uses sibling selectors to reposition itself based on which item is active.

Pseudo-elements on the indicator create curved cutouts that blend into the navigation bar. CSS transitions ensure smooth movement without JavaScript animation logic. Custom properties manage theme colors consistently. Overall, CSS acts as the animation engine of the project.

JavaScript

this.classList.add("active");

The JavaScript handles only the interaction logic required to switch active states. It first selects all navigation list items into a collection. When a user clicks any menu item, the activeLink function runs. This function removes the active class from all items to reset the state. It then adds the active class to the clicked element using this.

No animation calculations are performed in JavaScript. Instead, CSS reacts automatically to the class change. This keeps the script lightweight and efficient. Event listeners are attached to each menu item individually. The approach improves readability and maintainability. Overall, JavaScript acts as a simple state controller.

Download Code