Columns

Faux Mega Menu in WordPress

Sometimes you have so many items in your WordPress blog’s navigation that you feel that it’s far too long. But if they are in the proper logical division splitting them into other menus is not be an option.

There are fantastic tools to create “Mega Menus” with jQuery and CSS such as this one. But on the standard WordPress menu you find in themes like 2010 or Thematic, implementing can be a challenge sometimes.

Luckily for us we can use CSS3 for a quick fix to make your drop down menu split itself into columns. The most obvious answer is to use the new “Columns” property but unfortunately it is not widely supported, even among modern browsers.

For reference, in this example I am styling a drop down menu in Thematic.

.sub-menu{display:inline-block; width:500px !important;}

.sub-menu li{width:50% !important;}

.sub-menu li a:hover{color:#FFFFFF;}

.sub-menu li:nth-child(even){float:right;}

All we are telling it to do is to make the sub-menu 500px wide, make every list item 50% of that, and using the nth-child property, tell every even-numbered element to float right.

Making it 3 columns would be as easy as dropping the li width to 33% if we wanted. Applying styles is easy as well. If we wanted a border dividing the left and right column (if mine didn’t already have borders) we could further edit the nth-child(even) and give it a left border, or make a new rule for nth-child(odd) and give it a right border.

Super easy!

24 Comments

  1. thanks for this post.
    i have a sub menu with 12 items. i’m trying to move the last 6 over into a 2nd column at the right.

    i’ve used your code above (i had to change the .sub-menu class used above to match my CSS IDs and classes).

    i have successfully moved my last 6 items over to the right of the (now) double-wide column, but for some reason they are offset BELOW the first 6; so they are moved over properly into the space, but this 2nd list of 6 items does not start up at the top, parallel to the first 6 items. it sits down below at the same height it was before moving to the right into the wide column space.

    i’ve tried making my first 6 ‘s float left, but that is not working.
    have also tried to make the initial float left…

    thoughts?

    Reply

    1. My initial thought would be that your CSS has too much padding/margin/etc causing the right column to be too wide to fit side by side and thus causing it to pop down to the bottom.

      Do you happen to have a link to your menu?

      Reply

      1. http://172.16.41.59/cms/

        be kind — very early stage of development. 🙂

        please look at the SERVICES menu. (my double-wide column)
        As per your reply, i just tried making the 700px wide and set padding and margins to 0.
        still no luck.
        thoughts? (and thanks!)

        Reply

        1. p.s. i’m able to move it up there using “position:relative; top:-150px;”, but i’d rather not do it that way…

          Reply

          1. sorry. Daniel – you were totally right! it was a “thin” border that was causing me problems. thanks! great post here…

  2. The answer is even simpler than using CSS3.
    Just specify the submenu UL width to let’s say 300px and then specify the submenu LI elements width to 150px and set float: left.
    Adjust the numbers, if you have any border, paddings or margins on the elements so 2 LI fit into one UL side-by-side.

    Reply

  3. Thanks Daniel so much for your great tutorial.

    I would like to create a drop-down menu with 2 columns. I used the CCS code below:

    .sub-menu {
    display: inline-block;
    width: 350px !important;
    text-align: center;
    }

    .sub-menu li {
    width: 50% !important;
    }

    .sub-menu li:nth-child(even) {
    float: right;
    }

    The sub-menu looks cool, but the tabs look large. How to make it smaller.
    Here is a screenshot of my sub-menu:

    http://i.imgur.com/blGVuId.png

    I’m looking forward to hearing from you!

    Reply

    1. Hey Azhar, I am glad you liked the tutorial. When you say the tabs look large, what do you mean? If they are too wide, you could just reduce width of your sub-menu items from 350px to a smaller number until you find a more ideal width.

      Another option is that your menu items might have some extra padding added somewhere else in your CSS that you could possibly reduce.

      Cheers!

      Reply

    1. Oh man, I missed a few comments. Sorry. But to answer the question, yes. You could do it a few ways but I would probably try using the nth-child CSS pseudo-class and apply the column styling only to the one you wanted.

      Reply

    1. I’m not sure I understand your question. You could use Javascript if you wanted to write additional handling to determine if the menu should be split up or not. But if that’s not what you mean, let me know so I can clarify.

      Reply

  4. Hello,
    Nice post!
    I am using a theme with the following code for the menu.
    Could you please tell me how to split it in 2 columns?

    #secondarymenu-container {
    height:134px;
    position:relative;
    z-index:11;
    }

    #secondarymenu {
    float:right;
    border-bottom:1px solid #986801;
    }
    #secondarymenu a {
    padding:6px 9px;
    font-family: ‘verdana’;/*dim*/
    color:#fff;
    font-size:13px;
    text-transform:none !important; /*dim*/
    text-shadow:1px 1px 2px #6f4c01;
    }
    #secondarymenu a:hover{
    color:#e1e1e1;
    }
    #header-block {
    position:relative;
    }

    #mainmenu-container {
    height:75px;
    z-index:18;
    margin:41px auto 40px;
    }
    #mainmenu li a {
    padding:28px 20px;
    font-size:18px;
    color:#f2f2f2;
    font-family: ‘verdana’;/*dim*/
    text-transform:none;
    }
    #mainmenu .current-menu-item a{
    color:#c28502;
    }
    #mainmenu li {
    position:relative;
    }
    #mainmenu li a:hover{
    color:#c28502;
    }

    #header li ul { top:31px; }
    #header #mainmenu li ul { top:75px; }

    #header li ul .transparent { }
    #header li ul .inner {
    background:#d29002;
    box-shadow:0 3px 3px #442e01;
    }
    #header #mainmenu li ul .transparent { }
    #header #mainmenu li ul .inner {
    background:#bab9b9;
    box-shadow:none !important;
    }

    #header ul.children li a, #header .sub-menu li a {
    color:#fff;
    padding:0 20px !important;
    text-align:left;
    width:600px;

    }

    #header ul.children li a:hover, #header .sub-menu li a:hover {
    color:#e1e1e1;
    }

    #header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
    color:#606060;
    padding:0 20px !important;
    font-family: ‘verdana’;/*dim*/!important ;
    text-align:left;
    }
    #header #mainmenu ul.children li a:hover, #header #mainmenu .sub-menu li a:hover {
    color:#2b2b2b;
    }

    Cheers!

    Reply

Leave a Reply

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