mega dropdown
May 13, 2015 | 110 Feedbacks

Mega Dropdown

A responsive and easy to customise mega-dropdown component.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories… that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element on the top-left corner of the page.

We’ve been working on a similar concept, a responsive mega dropdown component with sub-categories. Here is a quick animation we put together to show you our mobile vs desktop approach:

dropdown animation

As you can notice from the demo, our dropdown is activated with a tap/click. We could have achieved the same result using a :hover state instead, no need for js (we do provide a :hover fallback in case javascript is disabled). However these decisions should be based on what we think is the best user experience. Users generally expect to click to access new content, while :hover effects mostly detect a “potential action”. This is why we preferred click over :hover state. In case you disagree, switching from one approach to the other is a piece of cake ;)

Icons: Nucleo Library

Creating the structure

The HTML is structured in 2 main elements: the <header>, containing the dropdown (.cd-dropdown-wrapper), and the <main> for all the main content.
The .cd-dropdown-wrapper contains a .cd-dropdown-trigger, to trigger the dropdown, and a .cd-dropdown, which is composed of nested unordered lists.

Adding style

For mobile devices, the basic idea was to let the user focus totally on the dropdown content, once it has been activated.
This is why we assigned a fixed position to the dropdown, and set its width and height to 100%. By default, it is hidden right above the viewport (translateY(-100%)). When the user clicks the trigger element, the .dropdown-is-active class is added to the dropdown which is translated back into the viewport.

When user selects a new sublevel in the dropdown, the visible items are translated to the left outside the viewport (using the .move-out class),  while the new items slide back into the viewport (removing the class .is-hidden class from their <ul> parent element).

On bigger devices (viewport width bigger than 1024px), instead, there’s enough space to place content side by side, with no need to replace the visible content.

Note: if you want the dropdown to open on the left, add the .open-to-left class to the .cd-dropdown-wrapper element.

Events handling

We didn’t do a lot in jQuery, apart from listening to the click event on specific elements (e.g. .cd-dropdown-trigger, .go-back) and adding/removing classes accordingly.

Note: we integrated the jQuery-menu-aim plugin, a plugin that differentiates between users trying hover over a dropdown item and  user trying to navigate into a submenu’s contents.


Jun 17, 2015
  • Bug fixed on mobile version - prevent default when tapping on .has-children direct children
May 15, 2015
  • Integrated menu-aid plugin to detect diagonal movement
  • Created the .open-to-left class to open dropdown on the left
  • Added support for laptops with touchscreen
May 13, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Pedro Vinício Sanches Parra

    Caprichou! Parabéns

  • jidelambo


  • Efren Castillo


  • Manoj Kumar

    Simple and awesome. Thanks! :)

  • Serhiy Krupka


  • amit


  • johnsonsu


  • root

    Very nicely done!

  • Alberto Restifo

    This implementation heavily misses usability. To whoever is interested into implementing a *usable* dropdown, I suggest reading this article, explaining the tricks behind the Amazon mega-dropdown:

    • Claudia Romano

      We are already working on a version including diagonal movement. However, in our dropdown the list items are way bigger compared to the Amazon ones, therefore the resource is perfectly usable at this stage. Then of course everything can be improved!

    • Paulo Rodrigues

      Alberto, while your article brings a very clever approach to the issue, CodyHouse’s work is to be praised as an excellent menu, way better than most free stuff we see around. As Claudia put it, everything can be improved. Instead of calling it an “epic fail” zimok, would you have a better contribution ?! Before critizing other people’s work we should be able to do better… or to show a better way… I dont see either.

      • Alberto Restifo

        Preface: at the moment of writing this reply, as Claudia said, it has been improved and is now a great resource (and great work to the team).

        Now onto your comment:
        I did not call it an “epic fail”, I simply pointed out it was missing usability. Because of the great impact CodyHouse has, I want it to be the best it can.
        Critique is there to push improvement. And I did show a better way, by pointing to the Amazon solution, or as later Claudia said, the diagonal movement.
        A small improvement to make the end result so much better.

        • Paulo Rodrigues

          Alberto, you made a good criticism and contribution with a link to an excellent article. And you surely did not call it an “epic fail”, that expression was used by another reader, “Zimok”, right after your comment. I should have separated my comment, sorry.

  • zimok

    I totally agree with Alberto Restifo, sorry, but this is an epic fail. Zero usability.

  • Vinsar12

    Love the work here but the submenus can’t be tapped in touch devices. This implementation is good to use with mouse only.

    • Claudia Romano

      Hi Vinsar, glad you like it! check out the new uploaded version. we added support for touchscreen desktops

      • Vinsar12

        Thanks a lot Claudia :) This works!

  • Alexander Zizzo

    Great as usual. Adding this bit can help improve the experience of it a bit (bg color is for debug purposes, adjust size as desired) :

    • Claudia Romano

      Hi Alexander, thanks for the suggestion! we just uploaded a new version with the menu-aim plugin integration ;)

  • kszere

    You can make your menu on the right side of the page? Sliding panels on the left side of the menu.

    • Claudia Romano

      Hi, you can add the .open-to-left class to the .cd-dropdown-wrapper (we just uploaded a new version of the resource with this new feature).

  • linnchord gao

    Well done!

  • HugoMastoc

    Nice work as always.

    Just a quick question with which you made your gifs? please

    • Sebastiano Guerriero

      Thanks! After Effects –> video imported in PS and exported as gif

  • Jan Jaap

    It looks amazing!

  • Jose Carrillo

    This is without a doubt, the most awesome mega dropdown menu I have ever seen. Awesome job!

  • Arkadiusz Janeczko

    Very nice!

  • hiepdaiduong

    Nice stuff. Love it!

  • Thiago Rodrigues Souza


  • jk

    Any plans for a graceful fallback in IE8? Your menu rivals Amazon’s, but Amazon has the bonus that it works in IE8.

  • Jonathan

    Would it be easy to have more than one of these dropdowns?

  • Alan

    does this work with Bootstrap?

  • Moin Khan

    how do i use two dropdown on same page ???

    • Landon Parks

      You need to ‘rename’ the elements. If you have external CSS or JS files, the class names within those need to match the class name of the HTML. For instance, on a website I’m working on that has two menus, both from the same stock place, I had to go into the CSS and JS files and manually change the class names after ‘#’, as well as rename the CSS and JS files so that it does not produce a conflict.

  • babak faghihian

    how we can use it in rtl ? please help how we can use it in rtl version

  • TimHolmesDesign

    Loving this look…. and the UX seems very slick and easy to understand.

  • SkyLukeWater

    Loving it but how can i make the secondary-dropdown container bigger so that it displays more than 10 items without overflow?

    • Sebastiano Guerriero

      you can try by changing the .cd-dropdown-content .cd-secondary-dropdown width (media query > 1024px) or the height of .cd-dropdown-content .cd-secondary-dropdown > li element

  • Jordan Docherty

    How do I add a second drop down button, ie, one for clothing, one for home/garden etc?

  • Paulo Rodrigues

    Hi, Claudia ! I cannot thank you enough for the incredible work you and your associates have done with this MegaDropDown Menu… it’s almost exactly what I was looking for, however I am failing to find out how to change the click to a hover function when the menu is displayed in a 1024px or bigger screen… I checked the css files but could not find any “click” instance… and since you mentioned “switching from one approach to the other is a piece of cake”, I came to ask you for still another piece of cake ;-)

    • Paulo Rodrigues

      I actually also fumbled with the js files, but changing the click function to a mouseover only makes the menu stay open for a fraction of a second, giving the user no time to move the cursor down to the list. I would thank anyone for a help on this…

      • Claudia Romano

        Hi Paulo, in the css file, try replacing .elementClass.dropdown-is-active with .cd-dropdown-wrapper:hover .elementClass. For example, replace .cd-dropdown-trigger.dropdown-is-active with
        .cd-dropdown-wrapper:hover .cd-dropdown-trigger (and the same for all the other elements). Hope this helps.

        • Paulo Rodrigues

          Claudia, thank you SO much, not only for the incredible menu, but also for sparing more of your time to send me this “customized” solution. I cannot thank you enough for such attention. As soon as the site is fully functional I will send you a link and include the due credits online. Best personal regards !

        • Francesca Costaldi

          Hi Claudia, I have a similar problem trying to use “onmouseleave”.
          I’d like to make the dropdown close without the need to click, when the cursor goes out of the entire area of it, but it doesn’t work: the first level of ul/li still remain visible. Can you suggest me something or someone can do it? Thanks a lot!

  • the_real_patrick_bateman

    I don’t see anyone else mentioning this, but I’m unable to tap some of the sub-items on my phone. For example, I can choose Clothing, but when I tap Accessories, Bottoms, Jackets, or Tops, the sub-items are shown for a split second before I’m taken to I’m using the latest version of Chrome on Android 5.1.

    • Claudia Romano

      Thanks for the heads-up! Fixed now ;)

  • MarcSt5

    Hi there, this concept looks great and would work really well for us but the challenge we have is 50+categories each with subcategories that can be 40+. The issue we have is getting all the categories on screen with the option to then see the sub categories. Could this be accommodated do you think?

    • Allan Stromfeldt Christensen

      Hello Mark, I think I’m having the same issue as you.

      I have a category that has 30 or so subcategories. Problem is, when I tap on one of the subcategories near the bottom of the list, even if the following page has just 3 or so links, it is just as long as the previous page with 30 or so subcategories (which isn’t too much of a problem). The problem is that it doesn’t load into the top of the page, but rather the same position as the subcategory I just tapped on. In other words, it loads into a bunch of blankness. If you know what’s going on, then you scroll up (a bunch!) to see all the links, but of course the casual viewer of a site wouldn’t automatically know this. The solution would be that each subsequent page automatically loads the top of whatever page it is that comes next (and perhaps make it so that each page doesn’t defer to being the length of its parent).

      Is this the problem you’re having (or had)? I presume it has something to do with the JS, but that’s way beyond my comprehension. Did you come up with a solution by any chance?

      • MarcSt5

        Hi Allan
        It sounds like a similar issue but we couldn’t make this work in a way that was right for us so had to rethink our approach.

  • deepakgd

    Hi, In angularjs, localhost megamenu working fine. I have build code and deployed it showing as modernizr not defined. Please help

  • deepakgd

    May i know why this megamenu not working in google chrome old version

  • Gabriel

    How to fix functionality in Safari?
    Menu does not work in Safari browser.

    • Claudia Romano

      Hi Gabriel,
      I just tested it on Safari (8.0.6 – Mac) and it works fine? which version are you using?
      Please note, we didn’t test it on Safari for Windows because it’s an outdated browser ( the last update has been released more than 2 years ago).

      • Gabriel

        Hi Claudia,
        I tested navigation on Safari 5.1.7 – Win.

  • mike

    hello…great work.thanks for sharing! on my imac safari Version 5.1.10…does not works. there is a way to fix it. thank you for your time

  • WebSung tecno

    Hi sir

  • Matt Wilson

    I’m using a Microsoft Surface running Windows 8.1 RT and am seeing some strange behaviors. When I tap an item to expand or collapse, there is an opacity flash. It shows the new item, disappears, then animates back in. Just thought you should know. Beautiful work overall. I will keep it bookmarked :-)

    • Claudia Romano

      Hi Matt, thanks for the heads-up! we’re gonna check this issue and try to fix it ;)

  • Tony Sciantarelli

    I have been socializing this thing around like crazy. I love the approach, implementation, and simplicity of this solution. Making it available for others makes it even more awesome. Thanks for the code and shared learning.

    • Claudia Romano

      Thanks Tony :)

  • WebSung tecno

    Hi all … is there someone to help me out
    i need menu opening on mobile not left/right side but rather bottom slide.

  • Laura Helms

    First off all thanks for this code, the perfect solution for our webshop.

    Only i have some issues, how to solve?

    1. The fifth dropdown, is going to the right. Where do i put the .open-to-left class in the html?

    2. I have 5 dropdowns. When one is dropped down, and I click on the second one. The first one stays open. I want to show 1 dropdown colum at the time. Where do i change this?

    Thanks in advance.

    • Claudia Romano

      Hi Laura,
      1. you should add the .open-to-left class has to the .cd-dropdown-wrapper element.
      2. When opening the second dropdown, you should remove the .dropdow-is-active class from the .cd-dropdown-trigger and the .cd-dropdown elements.

      Hope this helps!

      • Laura Heditex

        Hi Claudia,

        Where do i paste the .open-to-left class in the code?



        The second one i gone try.
        Thanks for the quick responsive.

  • Azhart Shaikh

    thank u mam the code is awesome

  • Monica

    First, thanks for this amazing code.
    I have a question, how to change the mega-site-navigation from yours into dropdown menu that have jQuery-menu-aim like this?
    Where should I start?

    • Lorencius Echo

      Hi Monica, I think I have the same question as yours, I want to implement jQuery-menu-aim into the mega-site-navigation, but instead of waiting someone else to answer I started to experiment it myself, here what I did to the main.js

      I change this block of code

      $(‘.has-children’).children(‘a’).on(‘click’, function(event){
      if( !checkWindowWidth() ) event.preventDefault();
      var selected = $(this);
      if(‘ul’).hasClass(‘is-hidden’) ) {

      //desktop version only
      } else {

      with this one

      //on mobile – open submenu
      $(‘.has-children’).children(‘a’).on(‘click’, function(event){
      //prevent default clicking on direct children of .has-children
      var selected = $(this);‘ul’).removeClass(‘is-hidden’).end().parent(‘.has-children’).parent(‘ul’).addClass(‘moves-out’);

      //on desktop – differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu’s contents
      activate: function(col){
      if($(col).children().next(‘ul’).hasClass(‘is-hidden’) ) {
      deactivate: function(col){
      exitMenu: function(){
      return true;

      I know it’s not a smart way, but I think I manage to make it works.

  • Roman Gural

    Hi, many thanks for great navigation!
    Is there anybody made it with angular? Or any interested if I will?

  • Karen Liddy

    Hi, loving the different snippets on this site. One question, I have my categories and subcategories stored in a mysql database, i can’t quite figure out a way to use this menu with recordsets. Any advice much appreciated. thanks.xx

  • Carl Bengtsson

    Hi, has anyone use this with wordpress? If yes, how did you fix that?

  • Kevin Lee

    Hi, just one quick question here. Trying to make more than 6 lists in subcategories, but then only can I see just 6 lists and for somehow rests of them are gone. Any ideas? Thank you.

  • 1transport

    Safari 5.1.7 for Windows don’t work.

    I have fixed width CSS.
    CSS Hack for Safari 5:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari only override */
    ::i-block-chrome,.cd-dropdown-content {

    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;

    ::i-block-chrome,.cd-dropdown.dropdown-is-active {
    ::i-block-chrome,.cd-dropdown-content.dropdown-is-active {

    Best regards and follow me :D

  • vladimir prieto

    just let you know that create a Mootools version of this great mega-dropdown.

    you can find it here:

  • Laura Heditex


    I have a question, for my website i used this code.
    I want level 2 and 3 also to be clickable, how do i solve this.

    My website it’s in dutch=

    Example: When you click on “vloeren” (floors) the menu will dropdown. When you go to Meister, i want this to show the menu, but also that Meister is a link to go to that page (A href).

    I hope it is clear what i want, and that someone is able to help me.

  • vladimir prieto

    found a bug i can’t solve:

    if you detele from Clothing/Accesories:

    caps & hats

    (that is, leave just Beanies)

    you will see just 1 option from the 3 that are inside!

    i think it just a CSS problem, but ’til now i can’t figure out a fix

  • Laura Heditex


    Please can someone help me, i am desperate?
    On my website i made a multiple dropdown.

    When i open the second dropdown, the first one has to close.

    How do i change the code? My JQuery knowledges is not big.

    • Faleh Oussema


      For multiple dropdown, you can try this quick solution (changes to main.js) no need to add a cd-dropdown-wrapper2 or 3 … :

      var openTrigger;

      //open/close mega-navigation
      $(‘.cd-dropdown-trigger’).on(‘click’, function(event){

      //close meganavigation
      $(‘.cd-dropdown .cd-close’).on(‘click’, function(event){

      //on mobile – open submenu
      $(‘.has-children’).children(‘a’).on(‘click’, function(event){
      //prevent default clicking on direct children of .has-children
      var selected = $(this);‘ul’).removeClass(‘is-hidden’).end().parent(‘.has-children’).parent(‘ul’).addClass(‘move-out’);

      //on desktop – differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu’s contents
      var submenuDirection = ( !$(‘.cd-dropdown-wrapper’).hasClass(‘open-to-left’) ) ? ‘right’ : ‘left';
      activate: function(row) {
      if( $(‘.cd-dropdown-content .fade-in’).length == 0 ) $(row).children(‘ul’).addClass(‘fade-in’);
      deactivate: function(row) {
      if( $(‘li.has-children:hover’).length == 0 || $(‘li.has-children:hover’).is($(row)) ) {
      exitMenu: function() {
      return true;
      submenuDirection: submenuDirection,

      //submenu items – go back link
      $(‘.go-back’).on(‘click’, function(){
      var selected = $(this),
      visibleNav = $(this).parent(‘ul’).parent(‘.has-children’).parent(‘ul’);

      function toggleNav(trigger){
      var navIsVisible = ( !trigger.find(‘.cd-dropdown’).hasClass(‘dropdown-is-active’) ) ? true : false;
      trigger.find(‘.cd-dropdown’).toggleClass(‘dropdown-is-active’, navIsVisible);
      trigger.find(‘.cd-dropdown-trigger’).toggleClass(‘dropdown-is-active’, navIsVisible);
      if (!navIsVisible) {
      trigger.find(‘.cd-dropdown’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function () {
      trigger.find(‘.has-children ul’).addClass(‘is-hidden’);
      else {

      if (openTrigger) {
      openTrigger = trigger;

      //IE9 placeholder fallback
      $(‘[placeholder]’).focus(function() {
      var input = $(this);
      if (input.val() == input.attr(‘placeholder’)) {
      }).blur(function() {
      var input = $(this);
      if (input.val() == ” || input.val() == input.attr(‘placeholder’)) {
      $(‘[placeholder]’).parents(‘form’).submit(function() {
      $(this).find(‘[placeholder]’).each(function() {
      var input = $(this);
      if (input.val() == input.attr(‘placeholder’)) {

      • Faleh Oussema

        correction toggleNav :

        function toggleNav(trigger){

        var navIsVisible = ( !trigger.find(‘.cd-dropdown’).hasClass(‘dropdown-is-active’) ) ? true : false;

        trigger.find(‘.cd-dropdown’).toggleClass(‘dropdown-is-active’, navIsVisible);

        trigger.find(‘.cd-dropdown-trigger’).toggleClass(‘dropdown-is-active’, navIsVisible);

        if (!navIsVisible) {

        trigger.find(‘.cd-dropdown’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function () {

        trigger.find(‘.has-children ul’).addClass(‘is-hidden’);




        openTrigger = null;


        else {

        if (openTrigger && openTrigger[0] !== trigger[0]) {



        openTrigger = trigger;



      • Laura Heditex

        Thnx for the solution.

  • Jose Luis Murgas

    I love this megamenu :) i just have one question. what is the best to use this megamenu without the first dropdown? i mean, i want to have top menu options with hover effect to display the menu. like this:

    • sean69

      did you find a solution for this?

  • Kalpnath Rao

    I have a problem with drop down. There are scroll bar if menu is larger than the screen size so i want to remove scroll bars from menu as well as from sub menus also.

  • Jim Ross

    Hello )) Thank you for this wonderfull menu, it is amazing! I have a trouble… My menu with width less than 1024px shows categories from second time after every page reload. What can I do to fix it? Any thoughts? Thanks in advance =)

  • Maillard Michel

    Very nice… I used it. The only thing I’m wondering on the mobile is, when the content is smaller then the viewport. The body is starting to scrolling underneath the fixed layer. Someone got a fix for it? I tried to put overflow hidden and fix the body while the navigation is open. But I’m not really satisfied with it…

    • Maillard Michel

      Position fixed on the body does it fix.

  • Zana

    is there a way to disable/hide the .cd-dropdown-trigger and only make it appear on mobile devices??

  • Karthik Arcot

    hi that animation of UI is after effects?

  • ankur

    how to hide the dropdown menu if user clicks on any area of the screen? reply would be very helpful

    • Ayesha Khanna

      I have same issue. Please let us know how to close dropdown menu on clicking anywhere outside ?
      Please reply as soon as possible !!!!

  • Donovan Parisi

    I know this is a long shot since this was uploaded so long ago, but say you wanted a single drop-down menu to show on desktop (which I have managed) but I also wanted the mobile menu to show this sub-menu without taking me to the “categories” section as you have it?

  • Jeremiah john

    Hi, im just wondering if there’s a fix on multiple dropdowns, because they’re opening at the same time.

  • Leagnus

    Excellent menu and ideas. Thank You and your team!
    On this base I try to make functionality like main menu.

  • Rob Suckley

    how would one enable the ability to display the dropdown right aligned to the browser window so that the menu slides out to the left?

  • sean69

    Has anyone figured out how to make the menu open on a hover event rather than click? I’ve been tinkering with that but haven’t figured it out.

    • Kristian Mark Surat

      .something:hover somecontent{


      in css

  • umapathy

    In Safari menu is not working

  • Fox

    hi that animation of UI is after effects?

  • Alex Fedotov

    Great menu, on my website
    Thank You!

  • zubair shaikh

    how can we open the menu on mouse hover with js or css ??

    • Bat Gurt

      in js file please add following:

      /* Anything that gets to the document
      will hide the dropdown */
      var navIsVisible = ( !$(‘.cd-dropdown’).hasClass(‘dropdown-is-active’) ) ? true : false;
      if( !navIsVisible) {

      /* Clicks within the dropdown won’t make
      it past the dropdown itself */

  • Steyn Viljoen

    This is a really great implementation! Well done CodyHouse Team. We are currently busy trying to improve it in 3 ways:
    1. Show the max amount of menu items on any device size. Similar to
    2. Add breadcrumbs to show where you are in the hierarchy.
    3. Make it pure CSS.

    Here’s a prototype of what we want to achieve:

    We’re currently a bit stuck on letting the breadcrumbs communicate with the list items. Here’s a link to the Stack Overflow question:

    Any ideas on how we can achieve this?


  • David

    How to darken the background when you hover and a window opens? Thx

  • mahendra

    wow one of nyc code you uploaded thanks a lot