Displaying WordPress categories in a horizontal dropdown menu.

Posted on Wednesday the 16th of January, 2008 at 2:05 pm in Asides, WordPress

One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.

The first step is to get WordPress to display the menu as a hierarchical list without a title. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

We then wrap this WordPress code in the following so we can style it.

  1. <div style="text-align:center;">
  2. <ul id="menu" style="padding:0; margin:0;">
  3. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
  4. </ul>
  5. </div>

I added this to my header.php, but you can add it anywhere you want it to appear.

The CSS is fairly simple and you just need to add it to your theme’s style.css file.

  1. ul#menu {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5. width: 100%;
  6. font-size:1.2em;
  7. }
  9. ul#menu li {
  10. float: left;
  11. padding: 0;
  12. margin: 0;
  13. border-right:solid 1px #fff;
  14. }
  16. ul#menu ul li {
  17. float: none;
  18. position: relative;
  19. border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
  20. border-left: 1px solid #FFF;
  21. z-index:1000;
  22. }
  24. ul#menu li ul {
  25. margin: 0;
  26. padding: 0;
  27. display:none;
  28. list-style: none;
  29. position: absolute;
  30. background: #9CC;
  31. }
  32. ul#menu ul ul{
  33. margin-left: .2em;
  34. position: absolute;
  35. top: 0; /* if using borders, -1px to align top borders */
  36. left: 100%;
  37. }
  39. ul#menu * a:hover, ul#menu li a:active{
  40. background:#7EAED7 !important;
  41. color: #FFFFFF;
  42. }
  44. ul#menu li a:link,
  45. ul#menu li a:visited,
  46. ul#menu li a:hover,
  47. ul#menu li a:active{
  48. display: block;
  49. padding: .2em .3em;
  50. text-decoration: none;
  51. background: #5587B3;
  52. color: #FFFFFF;
  53. }
  56. ul#menu ul li a:link,
  57. ul#menu ul li a:visited,
  58. ul#menu ul li a:hover,
  59. ul#menu ul li a:active {
  60. width: 8em;
  61. }
  62. Use the following to copy and paste the code.

Of course you will need to change the colors and text sizes to ensure it blends with the rest of the theme.

Now the last step is the to make it work as a drop-down list on all browsers. This could be done in Firefox with a simple CSS declaration, but Internet Explorer doesn’t understand the :hover pseudo classes, so we mimic this in Javascript.

  1. <script type="text/javascript">
  2. /*<![CDATA[*/
  4. var mbA,mbT,mbTf,mbSf;
  5. var mbR = [];
  7. function mbSet(m) {
  8. if (document.getElementById&&document.createElement) {
  9. var m=document.getElementById(m);
  10. mbR[mbR.length] = m;
  11. var i;
  13. e=m.getElementsByTagName('a');
  14. if (!mbTf) mbTf=new Function('mbHT();');
  15. if (!mbSf) mbSf=new Function('mbS(this);');
  16. for (i=0;i<e.length;i++) {
  17. e[i].onmouseout=e[i].onblur=mbTf;
  18. e[i].onmouseover=e[i].onfocus=mbSf;
  19. }
  21. m=m.getElementsByTagName('ul');
  22. for (i=0;i<m.length;i++) {
  23. mbH(mbL(m[i]));
  24. }
  25. }}
  27. function mbHA() {
  28. if (mbA) {
  29. while (mbA) mbH(mbA);
  30. mbHE('block');
  31. }
  32. }
  34. function mbHT() {
  35. if (!mbT) mbT=setTimeout('mbHA();', 0);
  36. }
  38. function mbTC() {
  39. if (mbT) {
  40. clearTimeout(mbT);
  41. mbT=null;
  42. }
  43. }
  45. function mbS(m) {
  46. mbTC();
  47. if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
  48. else mbHE('none');
  50. if (mbM(m)) {
  51. mbSH(m,'block');
  52. mbA=m;
  53. }
  54. }
  56. function mbH(m) {
  57. if (m==mbA) mbA=mbP(m);
  58. mbSH(m,'none');
  59. mbT=null;
  60. }
  62. function mbL(m) {
  63. while (m && m.tagName != 'A') m = m.previousSibling;
  64. return m;
  65. }
  67. function mbM(l) {
  68. while (l && l.tagName != 'UL') l = l.nextSibling;
  69. return l;
  70. }
  72. function mbP(m) {
  73. var p = m.parentNode.parentNode;
  74. if (p.tagName == 'UL') {
  75. var i = 0;
  76. while (i <mbR.length) {
  77. if (mbR[i] == p) return null;
  78. i++;
  79. }
  80. } else {
  81. return null;
  82. }
  83. return mbL(p);
  84. }
  86. function mbSH(m,v) {
  87. m.className=v;
  88. mbM(m).style.display=v;
  89. }
  91. function mbHE(v) {
  92. mbHEV(v,document.getElementsByTagName('select'));
  93. }
  95. function mbHEV(v,e) {
  96. for (var i=0;i<e.length;i++) e[i].style.display=v;
  97. }
  98. /*]]>*/
  99. </script>
  100. Use the following to copy and paste the code.

A couple notes on the previous code.

  1. To activate it, change your theme’s <body> tag to <body onload=”mbSet(’menu’);>
  2. It was not written by me, but I’ve been using it for a long time and don’t remember where I got it.
  3. It can occasionally create a JavaScript error, and I’ve intended to rewrite it for a long time, but it usually works fine.

Related posts

Linking Blogs | Trackback | Top Of Page | Add a Comment
Keywords: , , , , ,
  1. S.K posted the following on February 7, 2008 at 10:03 am.

    Thanks a Zillion, Aaron!

    I’ll give it a whirl.

    Regards,

    S.K

    Reply to S.K
    1. Aaron posted the following on February 8, 2008 at 12:28 am.

      You’re welcome.

      Reply to Aaron
  2. Cecile posted the following on March 11, 2008 at 12:23 pm.

    Please I just don’t understand where in the wordpress files should I put the javascript that enables I.E to read the roll over..

    Do I make a file apart or should I insert it in the index.php or something ?

    Thanks for your reply :-)
    Cecile

    Reply to Cecile
    1. Aaron posted the following on March 11, 2008 at 12:59 pm.

      You insert into your header.php file before </head>.

      Reply to Aaron
  3. frerieke posted the following on March 12, 2008 at 6:45 am.

    Hi Aaron!

    great work

    can I use this method also to create a hor. menu of my pages???

    What should I change in the codes?

    thanks, Fre

    Reply to frerieke
    1. Aaron posted the following on March 12, 2008 at 8:54 am.

      If you want to use this method with pages, you should be able to basically change wp_list_categories to wp_list_pages.

      Reply to Aaron
      1. Adam posted the following on March 12, 2008 at 3:19 pm.

        I am trying to use this on pages instead of posts, but am unable to get the subpages to drop down.
        I did change from wp_list_categories to wp_list_pages.
        here is my string <?php wp_list_pages('sort_column=post_title&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

        Reply to Adam
  4. Dylan posted the following on March 21, 2008 at 3:10 am.

    I love the dropdown menu, however, it seems like the subcategories like to magically disappear when moused over. This happens on both my website and yours. Any suggestions to prevent this behavior? It almost seems like the problem is less apparent when using a smaller browser window, but that might not be the case. It does this both in Firefox and Safari (haven’t tested IE yet), and it is present in both though it doesn’t seem to happen as much in Safari.

    Also, just want to clear up where you mention changing the tag; it is missing a quote after the ending parenthesis which breaks the function. As a warning to others, if you copy and paste it, be sure to replace the weird angled single-quote things with a standard single quote. I missed this and it took me forever to catch (fortunately Firefox’s error console pointed it out).

    Reply to Dylan
    1. casey posted the following on July 18, 2008 at 1:41 pm.

      THANK YOU! I just spent 20 minutes trying to figure out what was wrong. Everything worked fine except the drop downs.

      In case anyone isn’t clear how to fix it, add a double quote to the end after the last parenthesis, retype the first double quote so it’s correctly formatted and retype the single quotes around menu.

      Reply to casey
  5. Sarah posted the following on April 14, 2008 at 8:19 am.

    i am trying to impliment this on my blog theme Oh So Very! and when I add the script, and check out my blog page it is completely blank. it seems that first script when added to the header.php file is the culprit….i know i am probably doing something wrong on my end…any help would be greatly appreciated! (i currently took the code off the blog page, so people have access to it)

    Reply to Sarah
    1. Sarah posted the following on April 14, 2008 at 10:56 am.

      ok i changed themes and figured out how to add the menu, but i can’t get it to be a dropdown menu. Also, how can i add both pages and categories to the same menu?> I apologize in advance if I sound lost with all of this….because i am :)

      Reply to Sarah
  6. Michael posted the following on June 18, 2008 at 8:44 am.

    cheers for this - just have to go in and mess about with it all. As my JavaScript skills are basically rubbish you’ve saved me laods of time.

    Reply to Michael
  7. Cole posted the following on June 24, 2008 at 10:33 am.

    This is what I was looking for. I’ve tried it on my localhost and it works well. Thanks :)

    Reply to Cole
  8. david posted the following on June 24, 2008 at 11:04 pm.

    Thanks for the code but I do have a question.

    You said the following:

    To activate it, change your theme’s tag to

    Where do we exactly go to change the tage to ??

    Reply to david
  9. Dheeraj SIngh posted the following on June 28, 2008 at 2:49 am.

    I implemented it but the dropdown thing is not working.Can someone advice me on what is wrong. my site is http://www.reviewmirchi.com

    Reply to Dheeraj SIngh
    1. casey posted the following on July 18, 2008 at 1:50 pm.

      It doesn’t look like you changed the body tag as mentioned in the original post.

      See the section at the end of the last bit of code in the post.

      See my other comment about how to correct the code.

      Reply to casey
  10. dizang posted the following on July 1, 2008 at 9:59 am.

    can you make a plugin for wp? thx..
    or where can i find a plugin.

    Reply to dizang

Leave a reply

:) :D :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: ;) :!: :?: :idea: :arrow: :| :mrgreen: