Responsive Navbar with Mega Menu using HTML, CSS and JavaScript - Coding Torque

Responsive Navbar with Mega Menu using HTML, CSS and JavaScript - Coding Torque

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:

1. Todo App using JavaScript

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");
});


Code Credits: @samiralley

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👨‍💻 

Post a Comment

Previous Post Next Post