CSS Menu #1 - Code Example

Demo

6.19 KB
CSS, HTML
Menu
animation, hamburger, mobile, vertical
MIT License

Code
Editor

HTML

<section class="top-nav-menu-1">
    <div>
        Logo Here
    </div>
    <input id="menu-1-toggle" type="checkbox" />
    <label class="menu-1-button-container" for="menu-1-toggle">
        <div class="menu-1-button"></div>
    </label>
    <ul class="menu-1">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</section>

CSS

.top-nav-menu-1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    background: -webkit-gradient(linear, right top, left top, from(#f46b45), to(#eea849));
    background: -webkit-linear-gradient(right, #f46b45, #eea849);
    background: -moz-linear-gradient(right, #f46b45, #eea849);
    background: -o-linear-gradient(right, #f46b45, #eea849);
    background: linear-gradient(to left, #f46b45, #eea849);
    color: #fff;
    height: 17px;
    padding: 1em;
    border: 1px solid #333;
    position: relative;
    width: 140px;
}

.menu-1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-1 > li {
    margin: 0 1rem;
    overflow: hidden;
}

.menu-1-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

#menu-1-toggle {
    display: none;
}

.menu-1-button,
.menu-1-button::before,
.menu-1-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 4px;
    width: 30px;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: -webkit-transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: -o-transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1), -moz-transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 400ms cubic-bezier(0.23, 1, 0.32, 1), -moz-transform 400ms cubic-bezier(0.23, 1, 0.32, 1), -o-transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.menu-1-button::before {
    content: "";
    margin-top: -8px;
}

.menu-1-button::after {
    content: "";
    margin-top: 8px;
}

#menu-1-toggle:checked + .menu-1-button-container .menu-1-button::before {
    margin-top: 0px;
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg);
}

#menu-1-toggle:checked + .menu-1-button-container .menu-1-button {
    background: rgba(255, 255, 255, 0);
}

#menu-1-toggle:checked + .menu-1-button-container .menu-1-button::after {
    margin-top: 0px;
    -webkit-transform: rotate(-405deg);
    -moz-transform: rotate(-405deg);
    -o-transform: rotate(-405deg);
    transform: rotate(-405deg);
}

@media (max-width: 10000px) {
    .menu-1-button-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
    }

    .menu-1 {
        position: absolute;
        top: 0;
        margin-top: 50px;
        left: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-direction: column;
        width: 100%;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        align-items: center;
    }

    #menu-1-toggle ~ .menu-1 li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        -webkit-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        -o-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-1-toggle:checked ~ .menu-1 li {
        border: 1px solid #333;
        height: 2.5em;
        padding: 0.5em 0;
        -webkit-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        -o-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu-1 > li {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background-color: #222;
    }

    .menu-1 > li:not(:last-child) {
        border-bottom: 1px solid #444;
    }
}

HTML
CSS

Imagine you’re trying to add a cool, animated menu to your website, something that works great on mobile devices too. This code snippet is all about creating a sleek, animated hamburger menu that morphs into a cross when clicked, revealing a vertical menu for your site’s navigation. It’s a neat trick for making your site mobile-friendly and stylish at the same time.

Here’s how it’s done: The heart of this setup is a checkbox that acts as a toggle for the menu. When you click on the hamburger icon, which is just three stacked lines, the checkbox gets checked. This triggers a change in the appearance of the menu items and the icon itself, thanks to some clever CSS magic. The menu items, which are initially hidden, slide down in a smooth animation, creating a vertical list. Meanwhile, the hamburger icon transforms into a cross, signaling that you can click it again to close the menu.

To achieve this, the code uses a combination of HTML for structure, CSS for styling, and a bit of CSS animations to add that smooth transition effect. The key is in how the CSS selectors are used to change the appearance based on the checkbox’s state (checked or not). Also, it makes good use of media queries to ensure that the menu behaves differently on smaller screens, making your site look great on any device.

So, whether you’re a seasoned developer or just starting out, this example shows how combining basic HTML and CSS can create something both functional and visually appealing, enhancing the user experience on your website.