CSS Menu #11 - Code Example

Demo

3.49 KB
HTML, CSS, JS
Menu
animation, hamburger, sliding
MIT License

Code
Editor

HTML

<nav id="burger-menu">
    <div class="burger">
        <div class="burger-line burger-line-1"></div>
        <div class="burger-line burger-line-2"></div>
        <div class="burger-line burger-line-3"></div>
    </div>
    <div class="moduletable_menu">
        <ul class="nav menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </div>
</nav>

CSS

#burger-menu a {
    color: #fff;
    text-decoration: none;
}
#burger-menu li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
}
#burger-menu {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
    z-index: 2;
    position: fixed;
    left: -400px;
    width: 400px;
    top: 0;
    bottom: 0;
    margin: 0;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#burger-menu.active {
    background-color: rgba(0, 0, 0, 0.75);
    left: 0;
}
#burger-menu .menu {
    margin-top: 40px;
}
.burger {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 35px;
    width: 30px;
    padding: 0 5px;
    position: absolute;
    right: -40px;
    top: 0;
    cursor: pointer;
    z-index: 3;
}
.burger-line {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
}
.burger-line-1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 30px;
    top: 5px;
}
.burger-line-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 15px;
    width: 30px;
    left: 5px;
}
.burger-line-3 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 30px;
    top: 25px;
}
.active .burger-line-1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 15px;
    top: 11px;
}
.active .burger-line-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 15px;
    width: 0px;
    left: 9px;
}
.active .burger-line-3 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 15px;
    top: 20px;
}

const burgerMenu = document.querySelector("#burger-menu");
const burger = document.querySelector(".burger");
burger.addEventListener("click", toggleBurger);

function toggleBurger() {
    this.classList.toggle("active");
    burgerMenu.classList.toggle("active");
}

HTML
CSS
JS

The code snippet we’re diving into is all about bringing a hamburger menu to life on a webpage. Now, let’s break it down into digestible chunks, shall we? At the heart of it, this piece of code is like a magic trick, turning a static page into something interactive and fun.

First off, the HTML part lays the foundation. Imagine you’re setting up a stage for a play. Here, the stage is the navigation bar <nav>, which houses the iconic hamburger icon made of three lines .burger-line. Just like props on a stage, these lines are nestled inside a <div> that represents the burger icon. Another <div> acts like a hidden trapdoor, revealing a menu when the magic (or in this case, the animation) happens.

Moving onto the CSS, this is where our costume and set design come into play. The CSS styles the navigation bar and the hamburger icon, giving them specific looks and feels. For instance, when the menu is not active, it’s like our actor is waiting in the wings, positioned off-screen with left: -400px;. But once the menu becomes active, the magic of CSS transitions brings it center stage, sliding it into view with a smooth animation that feels like the curtain rising on a show.

The real sorcery happens with JavaScript. This is the director of our play, deciding when the action happens. The script listens for a click on the hamburger icon. Once it happens, it flips the script, toggling the active class on both the menu and the icon itself. This triggers our CSS animations, transforming the hamburger icon into a close button and sliding the menu into view. It’s like the climactic moment in a magic trick when the rabbit is pulled out of the hat, or in our case, the menu slides into view, creating a seamless interaction that feels both magical and intuitive.

So, there you have it. What might seem like a simple menu button is actually a well-orchestrated performance, combining HTML, CSS, and JavaScript to create an engaging user experience. This hamburger menu isn’t just about navigation; it’s about bringing a bit of animation and life to the digital stage.