Hello Friends, Today in this post, we’ll learn How to Create a Responsive Mega Menu With Dropdown Menu Using HTML, CSS & jQuery. Recently I have shared a Fill Text Hover Animation Effects With Pure CSS. But our today’s topic is Responsive Mega Menu With Dropdown Menu Using HTML, CSS & jQuery.

If Are you Looking for creative ways to design your navigation menus? Then you Have Come to the Right Place because In this article I’ll like to share inspiration on Responsive Mega Menu With Dropdown Menu styles and effects with you. Use this Responsive Mega Menu With Dropdown Menu in your next project where you want to show a Responsive Mega Menu With Dropdown Menu

Responsive Mega Menu With Dropdown Menu is the most popular and interesting for modern web design. A responsive menu that takes up the entire screen when expanded. The menu usually activated by clicking or touching the hamburger button. responsive Mega Menu With Dropdown Menu gives you the power to overlay and animate one screen on top of another.

It can simulate modal windows, dropdown navigation menus, and other on-screen prompts, all without leaving your current screen. So in this post, I will create a Responsive Mega Menu With Dropdown Menu Menu to find inspiration for your web design project. And now I’m going to create an attractive but easy Responsive Mega Menu With Dropdown Menu using Html5 CSS3 & Javascript.

As you all already know full-page navigation menu, that replaces the current content by pushing it off the screen. A website menu is a list of linked items that help in navigating between the different pages or sections of a website. Use this hamburger menu to Responsive Mega Menu With Dropdown Menu in your next web project.

In this Article firstly, on the webpage, there is only the menu button on the top right corner and when you click on that button then the background flow from that corner then shows the navigation links. There is also a background animation when you hover on a particular menu item. This design is fully created on only HTML, CSS, & JavaScript.

Play Video

Typically activated by a hamburger button, the fullscreen menu is in its simplest form, an overlay that covers the entirety of the screen giving you lots of space for your menu items. It is typically used by, but not restricted to, sites with limited space as an effective replacement for the mega-menu.

If you’re all looking for some interactive Mega Menu design, this Article has a good source of Responsive Mega Menu With Dropdown Menu that you can explore, I have published this tutorial on how to create a full-width tiled menu with CSS. If you’re feeling difficult to understand what I am discussing. You can watch a full video tutorial on this article.

In the Post, you will see the Responsive Mega Menu With Dropdown Menu and I hope you’ve understood the basic codes behind creating this Article. As you know I will use JavaScript in this article. If you like this article and want to get source codes. You can easily get the source codes of this article. To get the source codes you just need to scroll move down. You can use this post in your HTML pages, websites, and projects.

To create a clickable button and activate the Responsive Mega Menu With Dropdown Menu, I’ve used JavaScript. If you know JavaScript, then you can use JavaScript on this program you can use other things, and if you don’t know JavaScript don’t worry I will help you with this. and we can take this program to the next level by using advanced JavaScript features.

To create this program Firstly, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Mega Menu and Dropdown Menu using only HTML, CSS & JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>  
  <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <defs>
      <symbol viewBox="0 0 60 60" id="icon-facebook">
        <path d="M25.8 46.3h6.7V30H37l.6-5.6h-5.1v-2.8c0-1.5.1-2.3 2.2-2.3h2.8v-5.6H33c-5.4 0-7.3 2.7-7.3 7.3v3.4h-3.4V30h3.4v16.3zM30 60C13.4 60 0 46.6 0 30S13.4 0 30 0s30 13.4 30 30-13.4 30-30 30z" />
      </symbol>
      <symbol viewBox="0 0 60 60" id="icon-linkedin">
        <path d="M46.8 44.1V32.4c0-6.3-3.3-9.2-7.8-9.2-3.6 0-5.2 2-6.1 3.4v-2.9h-6.8c.1 1.9 0 20.4 0 20.4h6.8V32.7c0-.6 0-1.2.2-1.7.5-1.2 1.6-2.5 3.5-2.5 2.5 0 3.4 1.9 3.4 4.6V44l6.8.1zM19 20.9c2.4 0 3.8-1.6 3.8-3.5 0-2-1.5-3.5-3.8-3.5s-3.8 1.5-3.8 3.5 1.4 3.5 3.8 3.5zM30 60C13.4 60 0 46.6 0 30S13.4 0 30 0s30 13.4 30 30-13.4 30-30 30zm-7.6-15.9V23.7h-6.8v20.4h6.8z" />
      </symbol>
      <symbol viewBox="0 0 60 60" id="icon-twitter">
        <path d="M34.2 18.3c-2.6 1-4.3 3.4-4.1 6.1l.1 1-1-.1c-3.8-.5-7.1-2.1-10-4.9L17.7 19l-.4 1c-.8 2.3-.3 4.7 1.3 6.3.8.9.6 1-.8.5-.5-.2-.9-.3-1-.2-.1.1.4 2.1.8 2.8.5 1.1 1.7 2.1 2.9 2.7l1 .5h-1.2c-1.2 0-1.2 0-1.1.5.4 1.4 2.1 2.8 3.9 3.5l1.3.4-1.1.7c-1.7 1-3.6 1.5-5.6 1.6-.9 0-1.7.1-1.7.2 0 .2 2.6 1.4 4 1.9 4.5 1.4 9.8.8 13.7-1.6 2.8-1.7 5.7-5 7-8.2.7-1.7 1.4-4.9 1.4-6.4 0-1 .1-1.1 1.2-2.3.7-.7 1.3-1.4 1.5-1.6.2-.4.2-.4-.9 0-1.8.6-2 .6-1.2-.4.6-.7 1.4-1.9 1.4-2.3 0-.1-.3 0-.7.2-.4.2-1.2.5-1.8.7l-1.1.4-1-.7c-.6-.4-1.4-.8-1.8-.9-.9-.4-2.6-.4-3.5 0zM30 60C13.4 60 0 46.6 0 30S13.4 0 30 0s30 13.4 30 30-13.4 30-30 30z" />
      </symbol>
    </defs>
  </svg>
  <div class="hero">
    <header id="masthead" role="banner">
      <div class="container">
        <button class="hamburger hamburger--boring" type="button">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
          <span class="hamburger-label">Menu</span>
        </button>
        <form id="masthead-search">
          <input type="search" name="s" aria-labelledby="search-label" placeholder="Search…" class="draw">
          <button type="submit">→</button>
        </form>
        <nav id="site-nav" role="navigation">
          <div class="col">
            <h4>Men</h4>
            <ul>
              <li><a href="#">Top Wear</a></li>
              <li><a href="#">Bottom Wear</a></li>
              <li><a href="#">Winter Wear</a></li>
              <li><a href="#">Watches</a></li>
            </ul>
          </div>
          <div class="col">
            <h4>Woman</h4>
            <ul>
              <li><a href="#">Foot Wear</a></li>
              <li><a href="#">Sandals</a></li>
              <li><a href="#">Shoes</a></li>
              <li><a href="#">Trending Today</a></li>
            </ul>
          </div>
          <div class="col">
            <h4>Company</h4>
            <ul>
              <li><a href="#">Our Story</a></li>
              <li><a href="#">Our Team</a></li>
              <li><a href="#">Our Culture</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">Join Us</a></li>
            </ul>
          </div>
          <div class="col">
            <h4>Sports & More</h4>
            <ul>
              <li><a href="#">Food Essentials</a></li>
              <li><a href="#">Books</a></li>
              <li><a href="#">Music</a></li>
              <li><a href="#">Gaming</a></li>
            </ul>
          </div>
          <div class="col">
            <ul class="social">
              <li><a href=""><svg title="Facebook">
                    <use xlink:href="#icon-facebook"></use>
                  </svg></a></li>
              <li><a href=""><svg title="Twitter">
                    <use xlink:href="#icon-twitter"></use>
                  </svg></a></li>
              <li><a href=""><svg title="LinkedIn">
                    <use xlink:href="#icon-linkedin"></use>
                  </svg></a></li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
  </div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

CSS

@import "https://fonts.googleapis.com/css?family=Roboto:400,500";
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

html,
body,
div,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
ol,
ul,
li,
form,
legend,
label,
table,
header,
footer,
nav,
section,
figure {
  margin: 0;
  padding: 0;
}

header,
footer,
nav,
section,
article,
hgroup,
figure {
  display: block;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 100%;
  line-height: 1.5;
}
.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.container:after {
  content: "";
  display: table;
  clear: both;
}  
.hero {
  background: url("images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
} 
.hero:after {
  content: "";
  background: rgba(0, 0, 64, 0.5);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
} 
.hero * {
  position: relative;
  z-index: 1;
}
#masthead {
  padding: 2.5em 0;
  position: relative;
}

#masthead.is-active {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
} 
#masthead:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#masthead.is-active:after {
  opacity: 1;
} 
.hamburger {
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  float: left;
  font: inherit;
  margin: 0.8125em 0 0;
  overflow: visible;
  outline: none;
  padding: 0;
  text-transform: none;
  transition: opacity 0.15s;
  -webkit-appearance: none;
} 
.hamburger:hover {
  opacity: 0.7;
} 
.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative;
} 
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
} 
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 30px;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

#masthead.is-active .hamburger-inner,
#masthead.is-active .hamburger-inner::before,
#masthead.is-active .hamburger-inner::after {
  background-color: #000;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -6px;
}

.hamburger-inner::after {
  bottom: -6px;
} 
.hamburger--boring .hamburger-inner,
.hamburger--boring .hamburger-inner::before,
.hamburger--boring .hamburger-inner::after {
  transition-property: none;
}

.hamburger--boring.is-active .hamburger-inner {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hamburger--boring.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger--boring.is-active .hamburger-inner::after {
  bottom: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.hamburger-label {
  color: #fff;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-left: 0.3125em;
  text-transform: uppercase;
}

#masthead.is-active .hamburger-label {
  color: #000;
}

.hamburger-box,
.hamburger-label {
  display: inline-block;
  vertical-align: middle;
}

#site-nav {
  clear: both;
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  padding-top: 2.5em;
}

#site-nav.is-active {
  height: auto;
  overflow: visible;
}
#site-nav .col {
  padding-bottom: 2.5em;
}
@media screen and (min-width: 550px) {
  #site-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

#site-nav .col {
    flex: 0 0 50%;
  }
}
@media screen and (min-width: 768px) {
  #site-nav .col {
    flex: 0 0 33.333333333%;
  }
}

@media screen and (min-width: 960px) {
  #site-nav {
    flex-wrap: nowrap;
  }

#site-nav .col {
    flex: 0 0 20%;
  }

#site-nav .col:last-child {
    display: flex;
    justify-content: flex-end;
  }
}

#site-nav h4 {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#site-nav ul {
  list-style-type: none;
  margin-top: 1em;
}

#site-nav li {
  margin-bottom: 0.3125em;
}

#site-nav li a {
  color: #b4b9ba;
  text-decoration: none;
  transition: color 0.3s ease;
}
#site-nav li a:hover,
#site-nav li a:focus {
  color: #686d6e;
}

#site-nav .social {
  margin: 0;
  overflow: hidden;
}

#site-nav .social li {
  float: left;
  margin: 0 0.3125em;
  width: 32px;
  height: 32px;
}

#site-nav .social li svg {
  display: block;
  fill: #b4b9ba;
  width: 100%;
  height: 100%;
  transition: fill 0.3s ease;
}

#site-nav .social li:hover svg {
  fill: #686d6e;
}
#masthead-search {
  float: right;
  margin-top: 0.625em;
  width: 100%;
  max-width: 14em;
  position: relative;
  -webkit-appearance: none;
}

#masthead-search input {
  background: transparent;
  border: none;
  border-color: #fff;
  border-style: solid;
  font-family: "Roboto", sans-serif;
  border-width: 1px;
  border-radius: 50px;
  outline: none;
  width: 100%;
  padding: 0.75em 1.125em;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
}

#masthead-search button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1em;
  padding: 0;
  position: absolute;
  top: 50%;
  right: 0.75em;
  transform: translateY(-50%);
  -webkit-appearance: none;
}

#masthead.is-active #masthead-search button {
  color: #b4b9ba;
}
#masthead.is-active #masthead-search input {
  border-color: #b4b9ba;
}
#masthead-search ::-webkit-input-placeholder {
  color: #fff;
}

#masthead-search :-moz-placeholder {
  color: #fff;
  opacity: 1;
}

#masthead-search :-ms-input-placeholder {
  color: #fff;
}

#masthead.is-active #masthead-search ::-webkit-input-placeholder {
  color: #b4b9ba;
}

#masthead.is-active #masthead-search :-moz-placeholder {
  color: #b4b9ba;
  opacity: 1;
} 
#masthead.is-active #masthead-search :-ms-input-placeholder {
  color: #b4b9ba;
}

#masthead .col {
  opacity: 0;
}

#masthead.is-active .col {
  transform: translateY(40px);
  transition: opacity 0.3s ease;
  animation: fade-in-stagger 0.8s ease forwards;
}

#masthead.is-active .col:nth-child(1) {
  -webkit-animation-delay: 0;
}

#masthead.is-active .col:nth-child(2) {
  -webkit-animation-delay: 0.1s;
}

#masthead.is-active .col:nth-child(3) {
  -webkit-animation-delay: 0.2s;
}

#masthead.is-active .col:nth-child(4) {
  -webkit-animation-delay: 0.3s;
}

#masthead.is-active .col:nth-child(5) {
  -webkit-animation-delay: 0.4s;
}

@keyframes fade-in-stagger {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Responsive Mega Menu With Dropdown Menu Using HTML, CSS & jQuery.

HTML

CSS

JS

Leave a Reply Cancel reply

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)