How to Create Mega Menu Navbar Using HTML, CSS & JavaScript

Faraz

By Faraz -

Learn how to create a Mega Menu Navbar using HTML, CSS, and JavaScript. Follow our simple guide with easy steps to build a responsive and stylish menu.

Join us on Telegram
how-to-create-mega-menu-navbar-using-html-css-and-javascript.webp
Read AlsoHow to Create a Hoverable Dropdown Menu with HTML and CSS.jpgHow to Create a Hoverable Drop Down Menu with HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

A Mega Menu Navbar is a great way to organize your website's navigation system. It helps users quickly find what they need by displaying multiple links and categories in a structured layout. Whether you are building an e-commerce website or a portfolio, a Mega Menu Navbar adds a professional touch.

In this guide, we will show you how to create a responsive and interactive Mega Menu Navbar using HTML, CSS, and JavaScript. No advanced coding skills are needed—just follow the steps, and you'll have a functional menu in no time!

Prerequisites

Before you start, make sure you have:

  1. A basic understanding of HTML, CSS, and JavaScript.
  2. A code editor like VS Code or Sublime Text.
  3. A modern web browser to test your code.

Source Code

Step 1 (HTML Code):

Start by creating the basic structure of your navbar in an HTML file. Below is an explanation of its structure:

1. HTML Document Structure

  • <!DOCTYPE html>: Specifies the document type as HTML5.
  • <html lang="en">: Defines the language as English.
  • <head>: Contains metadata and external resource links.
  • <body>: Contains the main content of the webpage.

2. Head Section

  • Meta Tags:
    • <meta charset="UTF-8">: Ensures proper rendering of text using UTF-8 encoding.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the layout responsive to screen size.
  • Title: Sets the page title as "Mega Menu Navbar".
  • External Stylesheets:
    • Bootstrap (v4.6.2): Provides responsive layout and pre-built CSS classes.
    • Material Design Icons: Adds material-style icons.
    • Hamburgers: Provides animated hamburger menu icons.
    • Font Awesome: Adds font and icons.
    • Google Fonts (Poppins): Loads a custom font.
    • styles.css: Links to a custom stylesheet for additional styling.

3. Header Section

  • Topbar: Displays a dark background bar with:
    • Left-side items: Date and links for "About," "Contact," "Sign Up," and "Log In."
    • Right-side items: Social media icons (Facebook, Twitter, Pinterest, YouTube).

Mobile-Specific Header

  • Logo: Displays a small logo for mobile.
  • Hamburger Menu Button: A button for toggling the mobile menu.

4. Mobile Menu

  • <div class="menu-mobile">:
    • Displays the menu when toggled.
    • Contains:
      • Topbar Items: Similar to the desktop version.
      • Main Menu:
        • Nested lists for categories like "News," "Entertainment," "Business," etc.
        • Submenus with collapsible arrows (<i class="fa fa-angle-right">).

5. Desktop Header

  • Logo: Displays a larger logo for desktop screens.
  • Main Navigation Menu:
    • Horizontal navigation bar with links for:
      • "Home," "News," "Entertainment," "Business," etc.
      • "News" includes a mega menu:
        • Vertical tabs (e.g., "All," "Entertainment," "Fashion").
        • Tab content: Displays a grid of items (e.g., images, titles, categories, and dates).

6. Mega Menu

  • Structure:
    • Vertical Tabs: Each tab (<a class="nav-link">) toggles content using Bootstrap's data-toggle and tab-content classes.
    • Tab Content: Displays a grid of posts:
      • Each post contains:
        • Thumbnail image.
        • Title with a link.
        • Category and date.

7. Styling and Scripts

  • Custom Styling: The linked styles.css file customizes the appearance.
  • Interactivity: The hamburger menu and mega menu rely on Bootstrap and Font Awesome for responsiveness and animations.
Read Alsocreate a survey form with html and css.jpgCreate a Survey Form with HTML and CSS (Source code)

Step 2 (CSS Code):

Create a styles.css file and add styles for the navbar and dropdown menu. Here's an explanation of the key sections:

1. Variables and Global Reset

:root {
  --primary: #FFCC00;
  --dark: #1E2024;
}
  • Defines CSS variables for primary, secondary, and dark colors, along with a hover color for primary elements. These variables ensure consistent colors throughout the site.
*,
:after,
:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • Resets margins and paddings for all elements and pseudo-elements, ensuring consistent layout across browsers.

2. Typography and Body Styling

body {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
  • Sets the default font family, size, and line spacing for the website.

3. Top Bar

.content-topbar {
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  • Creates a top bar with a minimum height of 40px, flex layout for horizontal alignment, and evenly spaced items.
.left-topbar-item:hover {
  color: var(--primary);
}
  • Changes the text color to the primary color when hovered.

4. Logo Section

.wrap-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 125px;
}
  • Centers the logo and other elements vertically within a 125px-high container.
.logo img {
  max-width: 100%;
  max-height: 50%;
}
  • Ensures the logo image scales proportionally without exceeding its container.

5. Navigation Menus

Desktop Navigation

.main-menu {
  list-style-type: none;
  display: flex;
  align-items: center;
}
  • Removes default list styling and aligns menu items horizontally.
.main-menu>li>a:hover:before {
  transform: scaleX(1);
}
  • Adds an animated underline effect to menu items when hovered.

Sub-Menus

.sub-menu {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}
.main-menu>li:hover>.sub-menu {
  visibility: visible;
  opacity: 1;
}
  • Sub-menus are hidden by default and revealed with a fade-in effect on hover.

6. Responsive Design

@media (max-width: 1199px) {
  .main-menu>li>a {
    margin: 0 10px;
  }
}
  • Adjusts spacing between menu items for screens smaller than 1200px.

7. Mobile-Specific Styles

Mobile Header

.wrap-header-mobile {
  display: flex;
  align-items: center;
  height: 65px;
  background-color: #fff;
}
  • Creates a compact header for mobile devices with a height of 65px.

Mobile Menu

.menu-mobile {
  width: 100%;
  background-color: #fff;
  display: none;
}
  • It hides the mobile menu by default, which is toggled via JavaScript.

8. Transitions and Effects

  • Many elements use transitions like transition: all 0.3s; to create smooth hover effects and animations.

9. Miscellaneous

  • Classes like .opacity-80:hover and .darkcolor provide additional styling for specific elements, such as hover effects and color adjustments.
:root {
  --primary: #FFCC00;
  --dark: #1E2024;
}

*,
:after,
:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

body {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.bg-dark {
  background-color: var(--dark) !important;
}

a {
  text-decoration: none !important;
}

.content-topbar {
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: -13px;
}

.left-topbar-item {
  font-size: 12px;
  color: #ccc;
  padding: 0 13px;
  position: relative;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

a.left-topbar-item:hover {
  color: var(--primary);
}

.left-topbar-item::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #fff;
  opacity: 0.1;
  left: 0;
}

.left-topbar-item:first-child:before {
  display: none;
}

.right-topbar a {
  font-size: 18px;
  color: #ccc;
  margin: 0 4px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.right-topbar a:hover, .hvrprimary:hover {
  color: var(--primary);
}

.wrap-pic-w {display: block;}

.wrap-pic-w > img {width: 100%;}

.opacity-80:hover {
  opacity: 0.8;
}

/*------------------------------------------------------------------
[ Topbar mobile ]*/
.topbar-mobile {
  background-color: #222;
  padding: 8px 25px 5px 25px;
  margin-bottom: 0;
}

.topbar-mobile li {
  padding: 5px 0;
}

.topbar-mobile .right-topbar,
.topbar-mobile .left-topbar {
  justify-content: flex-start;
}

/*==================================================================
[ Logo ]*/
.wrap-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 125px;
  padding-top: 25px;
  padding-bottom: 10px;
}

/*---------------------------------------------*/
.logo {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo img {
  max-width: 100%;
  max-height: 50%;
}

/*---------------------------------------------*/
.wrap-logo.no-banner {
  justify-content: center;
}

.wrap-logo.no-banner .logo {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

/*---------------------------------------------*/
.logo-stick {
  display: none;
  line-height: 0;
  margin-right: 15px;
}

.logo-stick img {
  max-width: 115px;
  max-height: 30px;
}


/*==================================================================
[ Main nav ]*/
.wrap-main-nav {
  width: 100%;
  height: 55px;
  z-index: 1000;
  position: relative;
}

.main-nav {
  width: 100%;
  height: 55px;
  background-color: var(--dark);
  box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.05);
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.menu-desktop {
  max-width: calc(100% - 30px);
  width: 1050px;
  margin: 0 auto;
  height: 55px;
  position: relative;
}

.main-menu {
  list-style-type: none;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.main-menu>li {
  height: 100%;
  position: relative;
}

.main-menu>li>a {
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 0px;
  margin: 0 18px;
  transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.main-menu>li>a::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 36px);
  height: 5px;
  bottom: 0;
  left: -18px;
  background-color: var(--primary);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.main-menu>li>.dropdown::after {
  content: "\f2f9";
  font-family: Material-Design-Iconic-Font;
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
  margin-left: 6px;
  margin-bottom: 1px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

li.main-menu-active>a::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.main-menu>li>a:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

@media (max-width: 1199px) {
  .main-menu>li>a {
      margin: 0 10px;
  }

  .main-menu>li>a::before {
      left: -10px;
      width: calc(100% + 20px);
  }
}

/*---------------------------------------------*/
.sub-menu {
  list-style-type: none;
  position: absolute;
  top: 0;
  left: 100%;
  width: 225px;
  background-color: #fff;
  padding: 15px 0px 15px 0px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  visibility: hidden;
  opacity: 0;
  border: 1px solid #f2f2f2;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.sub-menu li {
  position: relative;
  background-color: transparent;
}

.main-menu>li>.sub-menu {
  top: 100%;
  left: 0px;
}

.sub-menu a {
  font-size: 14px;
  line-height: 1.7857;
  color: #222;
  display: block;
  padding: 8px 30px;
  width: 100%;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.darkcolor{
  font-size: 14px;
  line-height: 1.7857;
  color: #222;
}

.clgray {
  font-size: 12px;
  line-height: 1.7;
  color: #888;
}

@media (max-width: 1199px) {
  .sub-menu {
      width: 190px;
  }

  .sub-menu a {
      padding: 8px 20px;
  }
}


/*---------------------------------------------*/
.main-menu>li:hover>a, .main-menu>li:hover>a:after {
  color: var(--primary);
}

.main-menu>li:hover>.sub-menu {
  visibility: visible;
  opacity: 1;
}

.sub-menu li:hover>.sub-menu {
  visibility: visible;
  opacity: 1;
}


.sub-menu>li:hover>a {
  background-color: var(--primary);
  color: #222;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
[ Header Mobile ]*/
.wrap-header-mobile {
  display: flex;
  align-items: center;
  height: 65px;
  background-color: #fff;
  padding: 10px 25px;
  display: none;
  box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 100;
}

/*------------------------------------------------------------------
[ Logo mobile ]*/
.logo-mobile {
  display: block;
  position: relative;
  height: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.logo-mobile img {
  max-width: calc(100% - 35px);
  max-height: 60%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/*------------------------------------------------------------------
[ btn show menu ]*/
.hamburger {
  display: flex;
  align-items: center;
  padding: 0;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
  border-radius: 0;
}


/*==================================================================
[ Menu mobile ]*/
.menu-mobile {
  width: 100%;
  background-color: #fff;
  display: none;
}

.main-menu-m {
  padding-top: 13px;
  padding-bottom: 23px;
  background-color: var(--primary);
  margin-bottom: 0;
}

.main-menu-m>li>a {
  font-size: 16px;
  color: #222;
  line-height: 2.8;
  padding: 9px 25px 9px 25px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.main-menu-m>li>a:hover {
  color: #222;
}

.main-menu-m>li {
  position: relative;
  background-color: var(--primary);
}

.arrow-main-menu-m {
  font-size: 14px;
  color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 18px;
  top: 3px;
  padding: 10px;
  cursor: pointer;
}

.arrow-main-menu-m i {
  transform-origin: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.turn-arrow-main-menu-m i {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

/*---------------------------------------------*/
.sub-menu-m {
  background-color: #222;
  padding: 10px 50px 15px 20px;
  display: none;
  list-style: none;
}

.sub-menu-m a {
  font-size: 15px;
  color: var(--primary);
  line-height: 2.5;
  padding: 5px 15px 5px 15px;
}

/*------------------------------------------------------------------
[ Mega menu ]*/
.main-menu > li.mega-menu-item {
  position: static;
}

.sub-mega-menu {
  flex-wrap: wrap;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  width: 100%;
  display: none;
  
  border: 1px solid #f2f2f2;
  box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2);
  -o-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2);
  -ms-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2);
}

.main-menu > li:hover > .sub-mega-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.sub-mega-menu .nav {
  width: 240px;
  border-right: 1px solid #f2f2f2;
  padding: 30px 0;
}

.sub-mega-menu .tab-content {
  width: calc(100% - 240px);
}

/*---------------------------------------------*/
.sub-mega-menu .nav-pills .nav-link {
  font-size: 14px;
  line-height: 1.8;
  color: #222;
  border-radius: 0;
  padding: 8px 20px 8px 33px;
}

.sub-mega-menu .nav-pills .nav-link.active, 
.sub-mega-menu .show>.nav-pills .nav-link {
  color: #fff;
  background-color: var(--primary);
}

.sub-mega-menu .tab-content .tab-pane {
  padding: 25px 50px 35px 30px;
}

/*---------------------------------------------*/
@media (max-width: 991px) {
  .wrap-header-mobile {
      display: flex;
  }

  .topbar,
  .logo,
  .no-banner,
  .wrap-main-nav {
      display: none;
  }

  .wrap-logo {
      height: auto;
  }
}

@media (min-width: 992px) {
  .menu-mobile {
      display: none;
  }
}

Step 3 (JavaScript Code):

Create a script.js file to handle the dropdown menu interaction.

This code provides functionality for a mobile menu, submenus, and hover interactions for a mega menu. It uses jQuery for event handling and DOM manipulation. Here's a breakdown:

1. Mobile Menu Toggle

$('.btn-show-menu-mobile').on('click', function () {
    $(this).toggleClass('is-active');
    $('.menu-mobile').slideToggle();
});
  • What it does:
    • Adds a click event listener to the .btn-show-menu-mobile element (a button or icon for toggling the mobile menu).
    • Toggles the is-active class on the button for styling purposes (e.g., changing its appearance to indicate an active/inactive state).
    • Toggles the visibility of the .menu-mobile element using slideToggle(), which provides a smooth slide-up/slide-down animation.

2. Submenu Toggle with Arrow Interaction

var arrowMainMenu = $('.arrow-main-menu-m');

for (var i = 0; i < arrowMainMenu.length; i++) {
    $(arrowMainMenu[i]).on('click', function () {
        $(this).parent().find('.sub-menu-m').slideToggle();
        $(this).toggleClass('turn-arrow-main-menu-m');
    });
}
  • What it does:
    • Selects all elements with the .arrow-main-menu-m class (arrows indicating expandable submenus).
    • Loops through each arrow and adds a click event listener.
    • On click:
      • Finds the .sub-menu-m element (submenu) within the same parent element and toggles its visibility with slideToggle().
      • Toggles the turn-arrow-main-menu-m class on the arrow, typically used for rotating the arrow to indicate the submenu's open/closed state.

3. Window Resize Behavior

$(window).on('resize', function () {
    if ($(window).width() >= 992) {
        if ($('.menu-mobile').css('display') === 'block') {
            $('.menu-mobile').css('display', 'none');
            $('.btn-show-menu-mobile').toggleClass('is-active');
        }

        $('.sub-menu-m').each(function () {
            if ($(this).css('display') === 'block') {
                $(this).css('display', 'none');
                $(arrowMainMenu).removeClass('turn-arrow-main-menu-m');
            }
        });
    }
});
  • What it does:
    • Adds a resize event listener to the window.
    • Checks if the window's width is greater than or equal to 992 pixels (desktop breakpoint).
    • If true:
      • Hides the .menu-mobile if it’s visible and removes the is-active class from the toggle button.
      • Loops through all .sub-menu-m elements and hides any visible submenus.
      • Removes the turn-arrow-main-menu-m class from all arrows to reset their state.

4. Mega Menu Hover Interaction

$(window).on('load', function(){
    $('.sub-mega-menu .nav-pills > a').hover(function() {
        $(this).tab('show');
    });
});
  • What it does:
    • Waits for the window to fully load.
    • Adds a hover event listener to <a> elements inside .nav-pills within .sub-mega-menu.
    • When an <a> is hovered, it activates the corresponding tab using tab('show') (part of a tabbing system, such as Bootstrap).

5. Error Handling

try { ... } catch (er) { console.log(er); }
  • Purpose:
    • Wraps the code in try...catch blocks to prevent errors from breaking the script.
    • Logs any errors to the console for debugging.
try {
  $('.btn-show-menu-mobile').on('click', function () {
      $(this).toggleClass('is-active');
      $('.menu-mobile').slideToggle();
  });

  var arrowMainMenu = $('.arrow-main-menu-m');

  for (var i = 0; i < arrowMainMenu.length; i++) {
      $(arrowMainMenu[i]).on('click', function () {
          $(this).parent().find('.sub-menu-m').slideToggle();
          $(this).toggleClass('turn-arrow-main-menu-m');
      })
  }

  $(window).on('resize', function () {
      if ($(window).width() >= 992) {
          if ($('.menu-mobile').css('display') === 'block') {
              $('.menu-mobile').css('display', 'none');
              $('.btn-show-menu-mobile').toggleClass('is-active');
          }

          $('.sub-menu-m').each(function () {
              if ($(this).css('display') === 'block') {
                  $(this).css('display', 'none');
                  $(arrowMainMenu).removeClass('turn-arrow-main-menu-m');
              }
          });

      }
  });
} catch (er) { console.log(er); }

try {
    $(window).on('load', function(){
        $('.sub-mega-menu .nav-pills > a').hover(function() {
            $(this).tab('show');
        });
    });
} catch(er) {console.log(er);}

Final Output:

how-to-create-mega-menu-navbar-using-html-css-and-javascript.gif
Read AlsoDevelop Your App Landing Page using HTML and CSS.jpgDevelop Your App Landing Page using HTML and CSS (Source Code)

Conclusion:

Creating a Mega Menu Navbar using HTML, CSS, and JavaScript is simple and effective. By following this guide, you’ve learned how to structure the menu, style it for a professional look, and add interactivity with JavaScript.

Use this knowledge to enhance your website’s user experience and make navigation easier for your visitors.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a mega menu navbar using html; css; and javascript, step-by-step guide to building a mega menu navbar, responsive mega menu with dropdown in javascript, mega menu navbar, html css javascript navbar, responsive mega menu design, mega menu dropdown, ecommerce menu, mega menu, menu for ecommerce site, mega menu for ecommerce site
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺