Complete guide to create a mega menu using CSS3 and jQuery

A mega menu is right now a hot stuff to use in a magazine style theme. Often these menus look ordinary unless someone hover on any link and a big container drops in. There are several kind of stuff that can pop-out in dropdown menu, it could be a bunch of links, async loaded blog posts, a big form, a live search bar or any contact information like email etc.

I'll try to put the maximum in this post, hope you will find it useful and if something around drop a comment.

Demo

See the Pen Mega Dropdown menu using jQuery and CSS3 by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Start with basic structure

Every mega drop down menu should a menu first. So lets create a basic structure.

<nav>
    <ul>
        <li><a href='#'>Home</a>
        </li>
        <li class='mega-drop'><a href='#'>Categories</a> 
        </li>
        <!--data-label is for the jQuery to recent post from the blog feed -->
        <li class='blog-post' data-label='Javascript'><a href='#'>Coding</a>
        </li>
        <li class='drop-down'><a href='#'>About Us</a> 
        </li>
        <li class='contact-drop'><a href='#'>Contact Us</a>
        </li>
    </ul>
</nav>

Basically I am creating several kinds of drop containers. First is mega-drop, this will have 4 lists in a row, second is blog-post this would have some blog post fetched using jQuery, third is drop-down this one is a multi level drop down containing simple links. Final is contact-drop which is a normal container with a form and some info.

Each and every link with a drop down must have an arrow and some basic customization for navigation. We have to make sure to have navigation with position relative, so that every drop down stays in.

nav{
  height:50px;
  position:relative;
  background:#272f32;
  font-family:'fontawesome','oswald',sans-serif;
  border-bottom:3px solid #ff3d2e;
}
nav ul{
  padding:0;
  margin:0;
  list-style:none;
}
nav a{
  text-decoration:none;
}
/* Basic Style */
nav>ul>li{
  position:relative;
  float:left;
}
nav>ul>li>a{
  position:relative;
  line-height:50px;
  padding:0 20px;
  color:#daeaef;
  display:block;
  text-shadow:0 0 5px rgba(0,0,0,1);
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}
nav>ul>li>a:hover{
  color:#ff3d2e;
  text-shadow:0 0 10px rgba(0,0,0,0.8);
}
nav>ul>li.contact-drop>a:after,nav>ul>li.mega-drop>a:after,nav>ul>li.blog-post>a:after,nav>ul>li.drop-down>a:after{
  content:'\f105';
  position:absolute;
  top:0;
  right:5px;
}

I am using Font Awesome and Oswald (Google Font) as external resource. These pseudo elements have those icons code. Now we have our navigation. As my mega menu have several kinds of drop downs lets have them one by one.

Mega-Drop

Mega-drop have lists of links with some heading. All you need to do is to enclose the links in standard ul and li tags and put them in a div. Using CSS you can show them up. Through out the code you will find left, top, visibility and opacity as the agent to show or hide the divs or drop downs.

The first thing to do in CSS is to change the link position to static. Otherwise the mega-drop would find the position that is relative to its link, but we want the relative position according to the navigation bar.

nav>ul>li.mega-drop{
  position:static;
}

Next step is to settle the drop down div's default state. Using some simple CSS techniques and CSS3 transitions we can get the desired stuff.

nav>ul>li.mega-drop .mega-drop-inner{
  position:absolute;
  opacity:0;
  width:100%;
  overflow:auto;
  top:-9999px;
  left:-9999px;
  background:#daeaef;
  visibility:hidden;
  border-top:3px solid #ff3d2e;
  -webkit-transition:opacity 300ms ease-in-out;
  -moz-transition:opacity 300ms ease-in-out;
  transition:opacity 300ms ease-in-out;
}

It is necessary to put top and left values to that much negative otherwise they would create unnecessary scrolling in the page. On hover we would settle and since transitions will only apply on opacity so there should not be any problem.

nav>ul>li.mega-drop:hover .mega-drop-inner{
  opacity:1;
  left:0;
  top:100%;
  visibility:visible;
}

Some more lines of CSS has been added to customize the headings and links. However basic concept want discussed above.

Blog Post

The drop down with a blog posts are the only drop downs uses jQuery. Blog posts are fetched using $.ajax function and it is a async function. The function is triggered on page load however loading post on hover of that specific link would make the performance more seamless. 

This jQuery will work with my blog since the feed link is given of mine blog. However changing the link would make it usable in any Blogger blog. It is not difficult to fetch JSON using jQuery. Read my post on how to do this in Blogger using jQuery as well as native Javascript.

Nothing magical just simple coding and again the CSS3 drop down technique to hide the drop down. I haven't used any loader while loading, however loader can be added with CSS using pseudo elements. You must check the loader on The Next Web (If they haven't changed their design). The simple line represents loading, a classy one. Further more lines of CSS to customize the posts fetched.

If you can see that thin orange line above link, that is the loader. Love it!

Multi level drop down

First step is to mention the classes in markup, the one in the pen shows the sub list and then again a set of links. For the sake of ease I added classes in the markup however you can add classes on the parent link using jQuery with a few lines. Read more here.

This drop down doesn't use any JS, its purely CSS3 drop down. Traditional way of creating a drop down is used. Classes are not necessary in normal drop down menu.but it is better to have in mega drop down. There is nothing new in drop down, just a tradition for formality, since all the older techniques are used.

Check this post for lava lamp jQuery plugin.

See the Pen Lava Lamp Navigation With Drop Down Menu.Its cool by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Contact drop down

The characteristic of a drop down menu is actually the availability of certain important elements of a web at navigation. Contact information is most common and important element of any web, As so I decided to put in this navigation. However, the contact information could be customized. Google maps could be integrated too.

Contact form, contact information, address and maps are often elements under the contact umbrella. Putting them all can mess up the stuff. Make sure to put the stuff in organized way, so that a mobile user or even a desktop user don't have to scroll to screen to just look at your drop down. Google the images of drop down menus for better inspiration.

For the demonstrative purpose I've add different classes in each kind of drop down however a common style is followed is contact drop down, mega drop and blog post drop, you can include them under one class. 

Conclusion

Navigation is much more evolved than drop down. Accordion, tabs and much more stuff is integrated in navigation menu. The asynchronous content like blog post and social plugins are getting common. Beside development, designs are also getting modern and flat UI is the most likely to be used in the navigation. A good magazine website should have them.