Responsive layout with Hamburger menu

responsive layout hamburger menu

In today's era, almost all users are more likely to visit different websites from mobile or small devices. So while designing a website, a developer should pay special attention to its responsive part. Today we will design a simple homepage layout using HTML, CSS, and javascript. The main menu will transform into a hamburger menu when the layout is visited on a smaller device. Here’s a video that shows how to create this snippet from scratch. Our YouTube channel has many videos on CSS Animation, JavaScript Projects, Full Landing Page Website Design, etc. If you are new to front-end development then you can subscribe to our channel. We hope our videos will be helpful to you.

Video Tutorial:

We Hope you have watched the above video tutorial. Responsive web design has become very important these days due to the variety of devices and variations in screen sizes. Your website needs to be accessible and functional on a variety of devices to reach a wide audience. Otherwise, it will be difficult to stay in the competition. In our snippet today we designed a functional responsive hamburger menu using HTML, CSS, javascript, and CSS media queries.

You May Also Like:

Responsive layout with Hamburger menu [ Source Code ]:

To create this Responsive layout with a Hamburger menu, create an HTML and then a CSS file. Put the Javascript code underneath the HTML file. Next, copy all the code from the code box below. You can save the files and open the snippet in your web browser. Click the download button below this blog to download the code directly.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web layout</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <header>
        <div class="wrapper row">
          <button class="nav-toggle">
            <span class="icon-area"></span>
          </button>
          <a class="logo" href="#">logo</a>
          <nav class="nav">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Contact</a></li>
            </ul>            
          </nav>
        </div>
      </header>

      <div class="banner">
        <div class="content">
            <h2>Beautiful Nature</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <a href="#">Learn More</a>
        </div>
      </div>
      
      

      <script>
        const cusMenu = document.querySelector(".nav-toggle");
            const nav = document.querySelector(".nav");

            cusMenu.addEventListener("click", () => {
            nav.classList.toggle("openMenu");
        });
      </script>
</body>
</html>

ADD CSS:

*, *::before, *::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: 1.3rem;
}
.wrapper {
	width: 80%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}
header {
	background: transparent;
	padding: 1em 0;
	text-align: center;
	position: absolute;
	width: 100%;
}
.nav {
	width: 100%;
}
.nav-toggle {
	cursor: pointer;
	border: 0;
	width: 3rem;
	height: 3rem;
	padding: 0em;
	background: transparent;
	color: white;
	transition: opacity 250ms ease;
	position: absolute;
	right: 0;
}
.nav-toggle:focus, .nav-toggle:hover {
	opacity: 0.75;
}
.icon-area {
	width: 50%;
	position: relative;
}
.icon-area, .icon-area::before, .icon-area::after {
	display: block;
	margin: 0 auto;
	height: 3px;
	background: white;
}
.icon-area::before, .icon-area::after {
	content: "";
	width: 100%;
}
.icon-area::before {
	transform: translateY(-6px);
}
.icon-area::after {
	transform: translateY(3px);
}
.nav {
	visibility: hidden;
	height: 0;
	position: absolute;
}
.nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav ul li a {
	color: #fff;
	text-decoration: none;
}
.openMenu {
	visibility: visible;
	height: auto;
	position: relative;
}
.logo {
	text-decoration: none;
	color: #fff;
	font-family: bebas neue;
	text-transform: uppercase;
	font-size: 40px;
}
@media (min-width: 800px) {
	.nav-toggle {
		display: none;
	}
	.nav {
		visibility: visible;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: auto;
		position: relative;
	}
	.nav ul {
		margin: 0;
		display: flex;
		justify-content: space-between;
	}
	.nav ul li {
		margin: 0 0 0 1.5rem;
	}
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.banner {
	background: linear-gradient(135deg, blueviolet, transparent), url(1.jpg);
	height: 100vh;
	background-size: cover;
	background-position: center center;
	display: grid;
	place-items: center;
	text-align: center;
}
.content {
	margin-top: 0;
}
.content h2 {
	margin: 0;
	font-family: 'Alfa Slab One', cursive;
	font-size: 65px;
	color: #fff;
}
.banner p {
	margin: 0;
	color: #fff;
}
.banner a {
	text-decoration: none;
	background: #fff;
	color: #000;
	padding: 10px 25px;
	border-radius: 50px;
	display: inline-block;
	margin-top: 15px;
}
@media (max-width:991px) {
	.nav.openMenu {
		padding: 30px 0;
		background: rgba(0, 0, 0, 0.8);
		margin-top: 20px;
	}
	.nav.openMenu a {
		line-height: 2.5;
	}
}
@media (max-width: 600px) {
	.openMenu {
		padding: 5px 0;
		background: rgba(0, 0, 0, 0.8);
	}
	.openMenu a {
		color: #fff;
		font-size: 16px;
	}
	.content h2 {
		font-size: 35px;
	}
	.banner {
		background-position: 80%;
	}
	.logo {
		font-size: 40px;
	}
	.nav ul li {
		margin: 5px 0;
	}
	.content h2 {
		font-size: 35px;
	}
}

Hope the code is working properly for you. To get more snippets like this, click on the Load More button at the bottom of the homepage. If you have benefited from the contents of our website, please share it with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box