Hello Guys! Welcome to Coding Torque. In this blog, we are going to make a Responsive Navbar with Mega Menu using HTML, CSS and JavaScript. You must create this if you are a beginner-level developer and learning HTML, CSS and JavaScript.
Before we start, here are some more projects for you:
2. Tip Calculator using JavaScript
3. QR Code Generator using JavaScript
I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.
Let's go step by step:
Step 1: HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Navbar with Mega Menu using HTML, CSS and JavaScript - @codingtorque</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
</head>
<body>
<!-- further code in next block -->
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag
<div id="header">
<div class="logo">
<a href="#">Responsive Nav</a>
</div>
<nav>
<form class="search" action="search.php">
<input name="q" placeholder="Search..." type="search">
</form>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
<ul class="mega-dropdown">
<li class="row">
<ul class="mega-col">
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="mega-col">
<li><a href="#">Help</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Services</a></li>
</ul>
<ul class="mega-col">
<li><a href="#">Coming Soon</a></li>
<li><a href="#">404 Error</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Author Page</a></li>
</ul>
<ul class="mega-col">
<li><a href="#">Full Width</a></li>
<li><a href="#">Right Column</a></li>
<li><a href="#">Left Column</a></li>
<li><a href="#">Maintenance</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="">Contact</a>
<ul>
<li><a href="#">About Version</a></li>
<li><a href="#">About Version</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Team</a>
</li>
</ul>
</nav>
</div>Output Till Now
Step 2: CSS Code
Create a file style.css and paste the code below.
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #bdc3c7;
line-height: 1.5;
font-family: sans-serif;
text-transform: uppercase;
font-size: 16px;
color: #fff;
}
a {
text-decoration: none;
color: #fff;
}
#header {
background: #1e262d;
width: 100%;
position: relative;
}
#header:after {
content: "";
clear: both;
display: block;
}
.search {
float: right;
padding: 30px;
}
input {
border: none;
padding: 10px;
border-radius: 20px;
}
.logo {
float: left;
padding: 26px 0 26px;
}
.logo a {
font-size: 28px;
display: block;
padding: 0 0 0 20px;
}
nav {
float: right;
}
nav > ul {
float: left;
position: relative;
}
nav li {
list-style: none;
float: left;
}
nav .dropdown {
position: relative;
}
nav li a {
float: left;
padding: 35px;
}
nav li a:hover {
background: #2c3e50;
}
nav li ul {
display: none;
}
nav li:hover ul {
display: inline;
}
nav li li {
float: none;
}
nav .dropdown ul {
position: absolute;
left: 0;
top: 100%;
background: #fff;
padding: 20px 0;
border-bottom: 3px solid #34495e;
}
nav .dropdown li {
white-space: nowrap;
}
nav .dropdown li a {
padding: 10px 35px;
font-size: 13px;
min-width: 200px;
}
nav .mega-dropdown {
width: 100%;
position: absolute;
top: 100%;
left: 0;
background: #fff;
overflow: hidden;
padding: 20px 35px;
border-bottom: 3px solid #34495e;
}
nav li li a {
float: none;
color: #333;
display: block;
padding: 8px 10px;
border-radius: 3px;
font-size: 13px;
}
nav li li a:hover {
background: #bdc3c7;
background: #fafbfb;
}
.mega-col {
width: 25%;
float: left;
}
#menu-icon {
position: absolute;
right: 0;
top: 50%;
margin-top: -12px;
margin-right: 30px;
display: none;
}
#menu-icon span {
border: 2px solid #fff;
width: 30px;
margin-bottom: 5px;
display: block;
-webkit-transition: all 0.2s;
transition: all 0.1s;
}
@media only screen and (max-width: 1170px) {
nav > ul > li > a {
padding: 35px 15px;
}
}
@media only screen and (min-width: 960px) {
nav {
display: block !important;
}
}
@media only screen and (max-width: 959px) {
nav {
display: none;
width: 100%;
clear: both;
float: none;
max-height: 400px;
overflow-y: scroll;
}
#menu-icon {
display: inline;
top: 45px;
cursor: pointer;
}
#menu-icon.active .first {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-top: 10px;
}
#menu-icon.active .second {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
position: relative;
top: -9px;
}
#menu-icon.active .third {
display: none;
}
.search {
float: none;
}
.search input {
width: 100%;
}
nav {
padding: 10px;
}
nav ul {
float: none;
}
nav li {
float: none;
}
nav ul li a {
float: none;
padding: 8px;
display: block;
}
#header nav ul ul {
display: block;
position: static;
background: none;
border: none;
padding: 0;
}
#header nav a {
color: #fff;
padding: 8px;
}
#header nav a:hover {
background: #fff;
color: #333;
border-radius: 3px;
}
#header nav ul li li a:before {
content: "- ";
}
.mega-col {
width: 100%;
}
}
Output Till Now
Step 3: JavaScript Code
Create a file script.js and paste the code below.
Note: You have to import JQuery library in your HTML body
before the javascript code. (I have already imported JQuery CDN in
the above starter template).
$('#header').prepend('<div id="menu-icon"><span class="first"></span><span class="second"></span><span class="third"></span></div>');
$("#menu-icon").on("click", function(){
$("nav").slideToggle();
$(this).toggleClass("active");
});Written by: Coding Torque | Piyush Patil
If you want me to code any project or post any specific
post, feel free
to DM me at IG @code.scientist or @codingtorque
If you have any doubts or any project ideas feel free to
Contact
Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like
this👨💻