DEV Community

Cover image for Responsive navbar using html css | hamburger menu html css - codewithrandom
Codewith Random
Codewith Random

Posted on

Responsive navbar using html css | hamburger menu html css - codewithrandom

Responsive navbar using html css | hamburger menu html css - codewithrandom
Hamburger menu has become an std icon for Navigation, it has become so popular the even most mainstream platforms and apps use them nowadays.

It was named in this manner because of its resemblance to the Hamburger.

Why use Hamburger Menu?
The hamburger menu gives the Website a neater and cleaner way to navigate or by organizing content. Also, Designers have been using the Hamburger menu for so long that it has become a standard itself.

How to Create Hamburger-menu:
There are multiple ways to create Hamburger Menu.
Today we'll be creating a Hamburger Menu with the help of HTML, CSS & JavaScript.
Without further ado, Let's get right into it.

1.Writing HTML code:

<body>  
   <nav>  
    <div class="navbar">  
     <div class="container nav-container">  
       <input class="checkbox" type="checkbox" name="" id="" />  
       <div class="hamburger-lines">  
        <span class="line line1"></span>  
        <span class="line line2"></span>  
        <span class="line line3"></span>  
       </div>   
      <div class="logo">  
       <h1>Navbar</h1>  
      </div>  
      <div class="menu-items">  
       <li><a href="#">Home</a></li>  
       <li><a href="#">about</a></li>  
       <li><a href="#">blogs</a></li>  
       <li><a href="#">portfolio</a></li>  
       <li><a href="#">contact</a></li>  
      </div>  
     </div>  
    </div>  
   </nav>  
  </body>  
Enter fullscreen mode Exit fullscreen mode

There is all HTML code for the Hamburger Menu javascript. Now, you can see output without CSS, then we write CSS for our Hamburger Menu.
Output

Image description

  1. Writing CSS : Let's start by defining the CSS properties of the NavBar And The Title.
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");  
 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: "Poppins", sans-serif;  
 }  
 .container {  
  max-width: 1050px;  
  width: 90%;  
  margin: auto;  
 }  
 .navbar {  
  width: 100%;  
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);  
 }  
 .nav-container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  height: 62px;  
 }  
 .navbar .menu-items {  
  display: flex;  
 }  
 .navbar .nav-container li {  
  list-style: none;  
 }  
 .navbar .nav-container a {  
  text-decoration: none;  
  color: #0e2431;  
  font-weight: 500;  
  font-size: 1.2rem;  
  padding: 0.7rem;  
 }  
 .navbar .nav-container a:hover{  
   font-weight: bolder;  
 }  
 .nav-container {  
  display: block;  
  position: relative;  
  height: 60px;  
 }  
 .nav-container .checkbox {  
  position: absolute;  
  display: block;  
  height: 32px;  
  width: 32px;  
  top: 20px;  
  left: 20px;  
  z-index: 5;  
  opacity: 0;  
  cursor: pointer;  
 }  
 .nav-container .hamburger-lines {  
  display: block;  
  height: 26px;  
  width: 32px;  
  position: absolute;  
  top: 17px;  
  left: 20px;  
  z-index: 2;  
  display: flex;  
  flex-direction: column;  
  justify-content: space-between;  
 }  
 .nav-container .hamburger-lines .line {  
  display: block;  
  height: 4px;  
  width: 100%;  
  border-radius: 10px;  
  background: #0e2431;  
 }  
 .nav-container .hamburger-lines .line1 {  
  transform-origin: 0% 0%;  
  transition: transform 0.4s ease-in-out;  
 }  
 .nav-container .hamburger-lines .line2 {  
  transition: transform 0.2s ease-in-out;  
 }  
 .nav-container .hamburger-lines .line3 {  
  transform-origin: 0% 100%;  
  transition: transform 0.4s ease-in-out;  
 }  
 .navbar .menu-items {  
  padding-top: 120px;  
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);  
  height: 100vh;  
  width: 100%;  
  transform: translate(-150%);  
  display: flex;  
  flex-direction: column;  
  margin-left: -40px;  
  padding-left: 50px;  
  transition: transform 0.5s ease-in-out;  
  text-align: center;  
 }  
 .navbar .menu-items li {  
  margin-bottom: 1.2rem;  
  font-size: 1.5rem;  
  font-weight: 500;  
 }  
 .logo {  
  position: absolute;  
  top: 5px;  
  right: 15px;  
  font-size: 1.2rem;  
  color: #0e2431;  
 }  
 .nav-container input[type="checkbox"]:checked ~ .menu-items {  
  transform: translateX(0);  
 }  
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {  
  transform: rotate(45deg);  
 }  
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {  
  transform: scaleY(0);  
 }  
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {  
  transform: rotate(-45deg);  
 }  
 .nav-container input[type="checkbox"]:checked ~ .logo{  
  display: none;  
 }  
Enter fullscreen mode Exit fullscreen mode

for final output visit my website
click here

Discussion (0)