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!