Horizontal Mega Drop-Down Menu – Microsoft Inspired

Make horizontal mega drop-down menu using HTML/CSS and JavaScript inspired by the Microsoft.com menu.

Share

Different type of mega menu support by CSS frameworks. Today we are showing you how to make horizontal drop-down menu. When you click on an item it will show the sub menu of it. Here we are sharing a Mega Drop Down Menu inspired by Microsoft. Some example media queries show how to adjust the menu for smaller screens.

 

HTML for Mega Drop Down Menu

<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="#">Products</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                    <div>
                        <h4>Learning & Games</h4>
                        <ul>
                            <li><a href="#">Catch the Bullet</a></li>
                            <li><a href="#">Snoopydoo</a></li>
                            <!-- ... -->
                        </ul>
                    </div>
                    <div>
                        <h4>Utilities</h4>
                        <ul>
                            <li><a href="#">Gadget Finder</a></li>
                            <li><a href="#">Green Tree Express</a></li>
                            <li><a href="#">Green Tree Pro</a></li>
                            <li><a href="#">Wobbler 3.0</a></li>
                            <li><a href="#">Coolkid</a></li>
                        </ul>
                    </div>
                    <div>
                        <!-- ... -->
                    </div>
                </div><!-- /cbp-hrsub-inner -->
            </div><!-- /cbp-hrsub -->
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</nav>

CSS for Mega Drop Down Menu

Includes some of the media queries to make it responsive on different mobile devices. Hence it can work on any of the device either on table or on mobile. You can define more of the media queries and implement according to your need.

.cbp-hrmenu {
    width: 100%;
    margin-top: 2em;
    border-bottom: 4px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
    display: inline-block;
}

.cbp-hrmenu > ul > li > a {
    font-weight: 700;
    padding: 1em 2em;
    color: #999;
    display: inline-block;
}

.cbp-hrmenu > ul > li > a:hover {
    color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: #fff;
    background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #47a3da;
    width: 100%;
    left: 0;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
}

.cbp-hrsub h4 {
    color: #afdefa;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) { 

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #47a3da;
    }

    .cbp-hrmenu > ul > li > a { 
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub { 
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) { 
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}

JavaScript for Mega Drop Down Menu

var cbpHorizontalMenu = (function() {

    var $listItems = $( '#cbp-hrmenu > ul > li' ),
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;

    function init() {
        $menuItems.on( 'click', open );
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }

    function open( event ) {

        if( current !== -1 ) {
            $listItems.eq( current ).removeClass( 'cbp-hropen' );
        }

        var $item = $( event.currentTarget ).parent( 'li' ),
            idx = $item.index();

        if( current === idx ) {
            $item.removeClass( 'cbp-hropen' );
            current = -1;
        }
        else {
            $item.addClass( 'cbp-hropen' );
            current = idx;
            $body.off( 'click' ).on( 'click', close );
        }

        return false;

    }

    function close( event ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' );
        current = -1;
    }

    return { init : init };

})();

 

Find this on GitHUB View Demo Get Source Code

Moreover you can implement your own color codes. Either you can either includes images to make your mega menu more easy to access and user friendly.

Color used in Horizontal Mega Drop-Down Menu.

Blue color code: #47a3da

Light Blue color code: #afdefa

Grayish Black color code: #999

Leave a Reply

Your email address will not be published. Required fields are marked *