CSS Menu #12 - Code Example

Demo

3.53 KB
HTML, CSS, JS
Menu
animation, hamburger
MIT License

Code
Editor

HTML

<div class="toggle triple">
    <span class="transition">Menu</span>
    <i class="triple item1 transition">Home</i>
    <i class="triple item2 transition">About</i>
    <i class="triple item3 transition">Call</i>
</div>

CSS

.triple,
.triple span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    background-color: #000;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    padding-top: 23px;
    text-transform: uppercase;
    cursor: pointer;
    font-style: normal;
    -webkit-transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
.toggle {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Arial;
    right: 20px;
    top: 20px;
}
.triple span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 2;
    background-color: #ff6949;
    -webkit-box-shadow: 0 0 0 10px #ff6949;
    -moz-box-shadow: 0 0 0 10px #ff6949;
    box-shadow: 0 0 0 10px #ff6949;
}
.triple.toggle.active span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #111;
    -webkit-box-shadow: 0 0 0 0px #111;
    -moz-box-shadow: 0 0 0 0px #111;
    box-shadow: 0 0 0 0px #111;
}
.triple.toggle [class*="item1"] {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.triple.toggle [class*="item2"] {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.triple.toggle [class*="item3"] {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.triple.toggle.active .item1 {
    left: 100px;
    background-color: #6949aa;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.triple.toggle.active .item1:hover {
    -webkit-box-shadow: 0 0 0 6px #472788;
    -moz-box-shadow: 0 0 0 6px #472788;
    box-shadow: 0 0 0 6px #472788;
}
.triple.toggle.active .item2 {
    left: 70px;
    top: 70px;
    background-color: #49aa69;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.triple.toggle.active .item2:hover {
    -webkit-border-radius: 0 20px 0 20px;
    -moz-border-radius: 0 20px 0 20px;
    border-radius: 0 20px 0 20px;
}
.triple.toggle.active .item3 {
    top: 100px;
    background-color: #dd4969;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.triple.toggle.active .item3:hover {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

const toggler = document.querySelector(".toggle");
toggler.addEventListener("click", toggleMenu);

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

HTML
CSS
JS

The code snippet we’re diving into today creates a stylish and interactive hamburger menu, a popular choice for modern web designs due to its simplicity and efficiency in managing navigation links on various devices. At the heart of this setup, we find HTML and CSS working together to bring a compact and visually appealing menu to life.

Starting with HTML, we see a div element classed as “toggle triple” that serves as the container for our menu. Inside, there’s a span for the menu title “Menu” and three items labeled “Home,” “About,” and “Call.” This structure is pretty straightforward, laying the groundwork for what will become a clickable, interactive menu.

CSS takes this basic structure and infuses it with style and animation. The styles applied ensure that our menu items are not just static but can transform and reposition themselves on the screen when interacted with. The CSS rules are meticulously crafted to provide visual feedback through color changes, shadow effects, and even rotation, making the menu not only functional but also a delight to navigate. Specific classes like .triple, .triple span, and .toggle are utilized to stylize the elements and define the animations that make the menu items expand, contract, and shift position smoothly upon clicking.

The animation magic is detailed within the CSS, where transition effects and delays are specified for each menu item. These effects create a dynamic user experience, allowing the menu to unfold elegantly when the “Menu” span is clicked. The use of colors, shadows, and positioning transitions help in distinguishing each menu item, making the navigation intuitive and engaging.

This creative use of HTML and CSS showcases how a simple concept like a hamburger menu can be transformed into a dynamic navigation tool, enhancing the user’s interaction with a website. The code’s structure and styling techniques offer a great learning opportunity for anyone interested in web design and development.