How to Create Responsive Hamburger Menu Using HTML &CSS

How to Create a Responsive Hamburger Menu Using HTML &CSS

 

Welcome to Code With Random blog. In this blog, we learn how to create a Responsive Hamburger Menu. We use HTML & CSS  for the Responsive Hamburger Menu. Hope you enjoy our blog so let’s start with a basic HTML structure for the Responsive Hamburger Menu.

In this article, we present a How to Create Responsive Hamburger Menu Using HTML &CSS  with complete source code for you so you can copy and paste it into your project.

HTML code for the hamburger menu

<header class="header">
<a href="" class="logo">CSS Nav</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Our Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>

There is all the Html code for the Responsive Hamburger Menu. Now, you can see output without CSS, then we write CSS for the Responsive Hamburger Menu.

Output

Create Delete Button Animation Using HTML &CSS

CSS code for the hamburger menu

body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

 

 

 

Create Moving Car Animation Using HTML &Css

We have completed our CSS section,  Here is our updated output with CSS. Hope you like the Responsive Hamburger Menu, you can see output project screenshots. See our other blogs and gain knowledge in front-end development.

This post teaches us to create a Responsive Hamburger Menu using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You And Happy Learning

Written by – Code With Random/Anki
code by – mutedblues

Leave a Reply