Request quote

Easily create a megamenu dropdown in five minutes

Posted on: January 9th, 2013 by Webgalli 5 Comments

Have you ever wondered on how to create a megamenu for your site? Dont know what a mega menu is? Ok look at the top navigation of this site. You can see that the drop down menus are in multiple columns. You can easily extend this to support any html inside like forms, images etc.. They are usually used on large sites that have considerable number of pages for users to navigate. While mega menus can make it easier for users to get deeper into the site with fewer clicks, the huge amount of options can also potentially overwhelm some visitors. For this reason, great care should be taken to make mega menus as user-friendly as possible. In this post we’ll help you to create a megamenu in less than 5 minutes time.

Type : Tutorial | Level : Basic | Time : 5 minutes

Demo See the fiddle

HTML Markup

First we need to create the HTML markup for the drop down menu. Copy and paste the following code where you want the megamenu to appear in your webpage.

<div id="menu"><!-- Menu starts here -->
    <ul class="menu"><!-- List starts here -->
        <li><a href="#">Link1</a></li>
        <li class="has-dropdown"><a href="#">Link2</a><!-- 5 columns starts here -->
            <div class="dropdown dropdown-5columns"><!-- Container 5 columns starts here -->
            <div class="col-5">
                <h2>Example of big container with 5 columns</h2>
            </div>
            <div class="col-1">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p class="italic">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p class="blackbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p class="strong">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div><!-- 5 columns ends here -->
    </li><!-- Container 5 columns ends here -->
        <li class="has-dropdown"><a href="#">Link 3</a><!-- 5 columns starts here -->
            <div class="dropdown dropdown-5columns"><!-- Container 5 columns starts here -->
            <div class="col-5">
                <h2>Example of big container with 5 columns</h2>
            </div>
            <div class="col-1">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p class="italic">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p class="blackbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <p class="strong">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div><!-- 5 columns ends here -->
    </li><!-- Container 5 columns ends here -->
    <li class="has-dropdown"><a href="#">Link 4</a><!-- 3 columns starts here -->
        <div class="dropdown dropdown-3columns align_right"><!-- Container 3 columns starts here -->
            <div class="col-3">
                <h2>Blocks of links and text block</h2>
            </div>
            <div class="col-1">
                <ul class="grisbox">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
            <div class="col-1">
                <p class="italic">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-1">
                <ul class="grisbox">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div><!-- 3 columns ends here -->
    </li><!-- Container 3 columns ends here -->
    <li><a href="#">Link 4</a><!-- 2 columns starts here -->
        <div class="dropdown dropdown-2columns"><!-- Container 2 columns starts here -->
            <div class="col-1">
                <ul class="grisbox">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
            <div class="col-1">
                <img src="images/img.png" width="70" height="70" class="imgclass" alt="" />
                <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<a href="#">Read more.</a></p>
            </div>
        </div><!-- 2 columns ends here -->
    </li><!-- Container 2 columns ends here -->
    <li class="has-dropdown"><a href="#">Link 5</a><!-- 1 column starts here -->
        <div class="dropdown dropdown-1column align_right"><!-- Container 1 column starts here -->
                <div class="col-1">
                    <ul class="simple">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                        <li><a href="#">Link 5</a></li>
                        <li><a href="#">Link 6</a></li>
                        <li><a href="#">Link 7</a></li>
                        <li><a href="#">Link 8</a></li>
                    </ul>
                </div>
        </div><!-- 1 column ends here -->
    </li><!-- Container 1 columnn ends here -->
  </ul><!-- List ends here -->
</div><!-- Menu ends here -->

The CSS

Now we need to arrange the elements in proper style, layout etc. For that copy the following code and paste to our css file.

#menu {
    list-style:none;
    margin:35px auto 0px;
}
.menu {
    height:40px;
    list-style:none;
    padding:0px 10px 0px 10px;
}
.menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    margin:3px 0px 0;
    border:none;
}
.menu li a {
    color: #000;
    display:block;
    outline:0;
    text-decoration:none;
    border-bottom:1px solid #dedede;
    padding:2px 10px;
}
.menu li:hover a {
    color:#161616;
}
.menu li > div a {
    padding: 0 0 0 14px;
    border-bottom:none;
}
.dropdown-1column,
.dropdown-2columns,
.dropdown-3columns,
.dropdown-4columns,
.dropdown-5columns {
    margin:-1px auto  0 -50px;
    float:left;
    position:absolute;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #dedede;
    background:#fff;
    z-index:999;
    display:none;
}
.dropdown-1column {width: 130px; margin:-1px auto 0;}
.dropdown-2columns {width: 400px;}
.dropdown-3columns {width: 480px;}
.dropdown-4columns {width: 640px;}
.dropdown-5columns {width: 810px;}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.col-1 {width:150px;}
.col-2 {width:280px;}
.col-3 {width:470px;}
.col-4 {width:560px;}
.col-5 {width:800px;}
.menu li:hover .dropdown-1column,
.menu li:hover .dropdown-2columns,
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {
    display:block;
}
.menu p, .menu h2, .menu h3, .menu ul li {
    line-height:21px;
    font-size:12px;
    text-align:left;
}
.menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
    color:#555;
}
.menu h3 {
    font-size:15px;
    margin:7px 0;
    padding-bottom:2px;
    border-bottom:1px solid #888888;
    color:#555;
}
.menu p {
    line-height:18px;
    margin:0 0 10px 0;
}
.menu li:hover div a {
    font-size:12px;
    color:#000;
}
.menu li:hover div a:hover {
    color:#000;
}
.strong {
    font-weight:bold;
}
.italic {
    font-style:italic;
}
.menu li .blackbox {
    background-color:#333333;
    color: #fff;
    padding:4px 6px 4px 6px;
}
.menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
.menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
}
.menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}
.menu li .grisbox li {
    border:1px solid #000;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;
}
.menu li .grisbox li:hover {
    background:#ffffff;
    border:1px solid #877956;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
}
.imgclass{
    float:left;
    margin-right:5px;
}
.text{
    width:230px;
}

Thats it. Now you are ready with a CSS alone megamenu drop down.

Extra bits

If you want to make the drop downs little animated, we can use the help of jQuery with a little CSS tweaks. Here is the jQuery code needed

jQuery("div#menu ul.menu li.has-dropdown").hover(
    function () {
        $(this).find("div.dropdown").slideToggle();
    },
    function () {
        $(this).find("div.dropdown").slideToggle();
    }
);

and the CSS tweaks needed

.menu li:hover .dropdown-1column,
.menu li:hover .dropdown-2columns,
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {

}

If you have any questions, please ask it below.

Tags: , , , , , , ,

5 Responses

  1. Toshi says:

    Hi,

    I really like this menu, it’s nice and simple.
    Just one question though. Is it possible to have the menu detect the browser edge and shift the dropdown over so it fits?
    Currently one of the menu goes over the edge on the right hand side so you can’t click the links, i’d like to have the menu shift over to the left abit so it fits.
    Regards
    Toshi

  2. Webgalli says:

    Hello Toshi,
    It can be done by passing some extra class names to the divs towards the browser edges. See this recipe site for an example where we implemented same logic.

  3. Sarat says:

    Hello Webgalli,

    It is really useful code. I’m trying to put this html code inside a content editor webpart in sharepoint. The Dropdown is not working. Please Help me in resolving the issue

  4. John says:

    How do you get the menu to appear ‘upwards’. I want to put it at the bottom of a page so it needs to appear above the line of menu items…

  5. Shawn says:

    Thank you for the nice tutorial. But I am struggling to have one additional option in the menus. I would like the menu subtitles that use [h2] to also be a link. But, when I add in the [a][/a] such as [h2][a href=”#”]Example of big container with 5 columns[/a][/h2] the font becomes small and takes on the properties of the other, smaller text/links in the list or div. I cannot figure out how to make the [h2] header text a link and retain the larger size and potentially different qualities such as color, font-weight, hover, etc. Is there a way to do this?