How to Make a CSS Mega Menu

How to Make a CSS Mega Menu

Megamenu’s are an essential frontend component found in many sites. From sites like bloomberg.com, nike, etc – these enhance the user experience so a user can find what they need quickly. Especially for sites hosting a lot of nested content, such as an ecommerce site. Example from Nike:

Navigating to one tab expands the a dropdown across the entire navbar. Essentially, it gives you another way of shopping. You could have clicked “mens” → “jordans” to find the newest release of air jordans. Or just move your mouse a bit and click the tab you want.

Megamenu’s save time for the end user, thereby increasing conversion rate. Nobody likes a site that takes forever to navigate, and a megamenu is one way to solve this.

So how do you build a megamenu using only CSS?

The question first is to break down how a responsive navigation bar works. Here is an example:

<div class="nav-wrapper container">
  <div class="nav">
    <div class="dropdown"><a>Category</a></div>
    <div class="dropdown"><a>Category</a></div>
    <div class="dropdown"><a>Category</a></div>
    <div class="dropdown"><a>Category</a></div>
    <div class="dropdown"><a>Category</a></div>
    <div class="dropdown"><a>Category</a></div>
    <div class="dropdown"><a>Category</a></div>
    <div class="dropdown"><a>Category</a></div>
  </div>
</div>
/* Global Base Styles and Resets */
* {
  box-sizing: border-box;
}

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/black-wood-small.jpg);
  color: white;
}

/* Bootstrap features for responsiveness */
.container {
  margin: 0 auto;
  width: 100%;
}

/* THE BASIC NAVBAR ONLY */
.nav-wrapper {
  background-color: grey;
}

.nav {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.dropdown {
  width: 100%;
  border-right: 1px solid black;
}
.dropdown:last-of-type {
  border-right: none;
}

a {
  color: white;
  width: 100%;
  display: block;
  padding: 10px;
}

See the Pen CSS Responsive Navbar Pt1 by Vincent Tang (@vincentntang) on CodePen.34950

Now modify and add the megamenu HTML portion. Do this by adding a <megamenu> class with two <p> children underneath. Add the following CSS, which controls the dropdown transition.

<div class="nav-wrapper container">
  <div class="nav">
    <div class="dropdown"><a>Category</a>
      <div class="megamenu">
        <p>hello</p>
        <p>world</p>
      </div>
    </div>
    <div class="dropdown"><a>Category</a>
      <div class="megamenu">
        <p>hello</p>
        <p>world</p>
      </div>
    </div>
    <div class="dropdown"><a>Category</a>
      <div class="megamenu">
        <p>hello</p>
        <p>world</p>
      </div>
    </div>
    <!-- repeat 5 more times -->
</div>

/* -----------------------------------------------------------------*/
/* IMPORTANT! THINGS THAT DIRECTLY AFFECT DROPDOWN TRANSITIONS */
a {
  transition: all 0.3s ease 0.15s;
}
a:hover {
  background-color: red;
}

.nav {
  position: relative;
  /* This sets width of megamenu to 100% */
}

.megamenu {
  position: absolute;
  /* Note that position relative is not based on direct parent(dropdown), but rather its parent parent (.nav)*/
  display: block;
  width: 100%;
  left: 0;
  top: 39px;
  /* This number depends on height of the "a" tag */
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: red;
  transition: all 0.3s ease 0.15s;
}

.dropdown:hover .megamenu {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

See the Pen CSS Mega Menu Dropdown Navigation Responsive Pt2 by Vincent Tang (@vincentntang) on CodePen.34950

Try hovering over the text. It should show “hello world”

How it works is the following:

  1. When you hover over the nav item, it sets visibility to the menu
  2. The dropdown megamenu is positioned absolute, relative to the nav
  3. Transitions are applied both to the hovered item, and the megamenu that appears

You can make more complex menus than this. Here are other examples:

See the Pen CSS Mega Menu Dropdown Navigation Responsive Pt5 by Vincent Tang (@vincentntang) on CodePen.34950

One thought on “How to Make a CSS Mega Menu

Leave a Reply

Your email address will not be published.