Advertisement

Create Hamburger Menu With HTML and CSS Only

Administrator March 04, 2021

If you are looking for a responsive hamburger mobile menu made by using HTML and CSS only, then this article is for you. In this article I will share with you complete HTML and CSS code to create a hamburger menu.

This code can be used as basic structure of your website and it will eventually save your time. After implementing both of the HTML and CSS codes, your website will look like the following images.

Hamburger Menu on Desktop

This menu will look different on desktop as desktop have enough space to display all items of the menu on header of website. Here is a image below to find out how this menu will look on desktop.

Hamburger Menu on Desktop

Hamburger Menu on Mobile

On mobile devices, all the menu items on top of header will be wrapped inside of a hamburger menu. When user clicks on this hamburger menu, there will be a animation which will convert his menu into a cross and then it will show a list of all menu items.

After user click on the cross it will show animation of converting into three lines of hamburger menu and hide a list of all menu items. Here is a image below to find out how this hamburger menu will look on mobile device.

Hamburger Menu on Mobile


The above image shows before and after clicking on the hamburger menu button. This hamburger menu is made by using HTML and CSS only and without using any JavaScript.

Hamburger Menu HTML Code

To get above result, this code should be used with style.css file. First you have to create a "index.html" file and then paste this code in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hamburger Menu</title>
</head>
<body>
    <header>
        <nav>
            <div class='logo-area'>Ham Menu</div>
                <input class="check" type="checkbox">
                <div class="ham-menu">
                    <div class="menuline"></div>
                </div>
                    <ul class='menulist'>
                        <li><a href='#'>Home</a></li>
                        <li><a href='#'>About</a></li>
                        <li><a href='#'>Contact</a></li>
                        <li><a href='#'>Privacy</a></li>
                    </ul>
        </nav>
    </header>
    <div class="content-area">
        <div class="content">Hello World.</div>
    </div>
</body>
</html>

Hamburger Menu CSS Code

After you have created a html file with above html code, now you have to create a "style.css" file and paste the code given below in it.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.logo-area{
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    margin: 10px;
    position: absolute;
}
header{
    height: 50px;
    width: 100%;
    z-index: 2;
    background: #008bff;
    position: relative;
}
.menulist {
    float: right;
    list-style: none;
    margin-right: 10px;
    position: relative;
    display: flex;
}
.menulist li{
    font-size: 18px;
    font-weight: bold;
    position: relative;
    margin: 10px;
}
.menulist li a{
    text-decoration: none;
    color: #ffffff;
}
.check{
    right: 0;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: 3px 20px 0px 0px;
    z-index: 3;
    opacity: 0;

}
.ham-menu{
    float: right;
    height: 40px;
    width: 40px;
    margin: 3px 20px 0px 0px;
    position: relative;
    display: none;
    border: 2px solid #ffffff;
}
.menuline {
    background: #ffffff;
    height: 2px;
    width: 25px;
    position: relative;
    margin: auto;
    display: flex;
    top: 50%;
}
.menuline::before {
    content:'';
    position: absolute;
    background: #ffffff;
    height: 2px;
    width: 25px;
    top: -8px;
}
.menuline::after {
    content:'';
    position: absolute;
    background: #ffffff;
    height: 2px;
    width: 25px;
    top: 8px;
}
.content-area{
    height: 1000px;
    width: 100%;
    text-align: center;
}
.content{
    height: 500px;
    transform: translateY(50%);
    font-size: 30px;
}
 @media only screen and (max-width:680px){
    header{
        position: fixed;
    }
    .menulist{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-right: 0px;
        background:#008bff;
        top: 50px;
        padding-top: 50px;
        text-align: center;
        transition: 0.5s;
        right: -100%;
    }
    .ham-menu{
        display: block;
    }
    .menulist {
        display: block;
        margin-right: 0px;
        }
    .menulist li a{
            font-size: 22px;
            text-align: center;
                }
    .check:checked ~ .menulist{
        right: 0;
        }
        
        .check:checked ~ .ham-menu .menuline{
            transform: rotate(135deg);
            transition: 0.3s ease;
        }
        .check:checked ~ .ham-menu .menuline::before,.check:checked ~ .ham-menu .menuline::after{
            top: 0;
            transform: rotate(90deg);
        }
}

After implementing both of the codes, now you have to open your index.html file in a web browser to check if implementation was successful. If there is any error, then please implement this code once again or verify side by side.

Conclusion: Hope this article will help you to create a responsive hamburger menu with HTML and CSS only. If you have any issue with this code, you can comment below. Thank you for reading this article.
Tags
Reactions

Post a Comment

0 Comments