Thesis Nav Menus

All of the info in this post (except the basics of using jQuery) will be obsolete with Thesis 1.6. Nav classes will be different and dropdowns will be built in.

There has been quite a lot of requests lately for tutorials regarding Thesis nav menus. So, here’s some info for y’all!

This information is significantly XHTML and CSS, so it’s useful for any website really.

BASIC NAV STRUCTURE ∞

The structure of the Thesis nav menu, depending on the pages and links you have selected to show up, is

<ul id="tabs">
 <li class="current_page_item"><a href="http://example.com/">Home</a></li>
 <li><a href="http://example.com/about/">About</a></li>
 <li><a href="http://example.com/archives/">Archives</a></li>
</li>

So the elements you might want to customise with CSS include,
.custom ul#tabs {styles for whole nav menu here}
.custom ul#tabs li {styles for each item here}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {styles for current page or category here}
.custom ul#tabs li a {styles for each item link here}
.custom ul#tabs li a:hover {styles for each item hover link here}
.custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {styles for current page or category links here}
.custom ul#tabs li.current_page_item a:hover, .custom ul#tabs li.current-cat a:hover {styles for current page or category link hover here}

NAV CSS RESET ∞

I’ve been thinking for a while that given the huge amount of Thesis customisation I do, I could do with some custom CSS templates to save me time typing. Some of that could involve a nav reset, so I’ll write one for you and probably use it myself.

.custom ul#tabs {border-bottom:none; border-left:none;}
 .custom ul#tabs li {margin-bottom:0; border:none; background:none;}
 .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {padding-bottom:0; background:none;}
 .custom ul#tabs li.rss {}
  .custom ul#tabs li a {}
  .custom ul#tabs li a:hover {text-decoration:none;}
  .custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {}

The above removes any borders and fancy stuff… pretty much everything except the padding, main layout and fonts¹.

DROPDOWN MENUS ∞

Update 15 April 2009: The behaviour of Thesis nav menus regarding sub-pages may have changed as of 1.5br4. So, this whole dropdown menu approach may be deprecated as of that version. I will update this post when I know for sure.
Update 16 April 2009: The nav menu is handled differently now and there is no page hierarchy, but Chris plans to add it back in. If you are dependent on a submenu now, don’t upgrade to 1.5 before you recode your menu (dropdowns and submenus will need to be coded from scratch again).
Update 21 April 2009: Chris has said that the functionality needed for dropdowns is back in 1.5r6 so the information below should be good to go again (I haven’t tried 1.5r6 yet myself though).
Update: Just confirming that the final release of v1.5 has an option to use the old nav menu: you can’t rename tabs and reorder them, but you can do dropdowns. There will probably be future work to combine these features.

I know, this is what you’re all here for right? There’s a reason they’re not already an option in Thesis and why more sites don’t have them… actually there’s two.

1. They are a total pain for cross-browser compatibility².
2. Some people question the usability: for those who are less dexterous than the rest of us, it can be difficult to hold your mouse in the one spot and then move it smoothly to make sure the dropdown stays open (if it’s on a hover action rather than a click action).

Regarding the latter: as computers and mouses³ improve it might be less of an issue; you might think your demographic won’t have a problem with it; you might think the argument is from purists who are inhibiting your creativity and your site architecture.

Regarding the former: I do not promise that these methods will work in every situation. In fact, the first definitely won’t, and I’ve had some fun issues with overlapping when using z-indexes⁴with the second method. However, I like these ways because they are simple and clean, and lets face it, dropdown menus are a luxury — you probably don’t put your most important info in there.

SETTING UP PAGES ∞

The friendly way to use Thesis’ native menu to make dropdowns is to use pages and child pages. Set these up in the Edit Page area.

Add page parent individually when editing a page.

You can also batch edit WordPress pages. To do that, select the pages you want to edit with the check-boxes next to them, then go to the top dropdown, select Edit, hit Apply and edit away. Save the changes with the button in the bottom right.

Once you have parent and child pages, add them to the Thesis menu on the Thesis Options page.

STRUCTURE AND STYLE ∞

Doing the above give us a nice nested list structure. For example,

<ul id="tabs">

 <li class="current_page_item"><a href="http://snoopy.local/mu" title="Home" rel="nofollow">Home</a></li>
 <li class="page_item page-item-2"><a href="http://snoopy.local/mu/about/" title="About">About</a></li>
 <li class="page_item page-item-62"><a href="http://snoopy.local/mu/archives/" title="Archives">Archives</a></li>
 <li class="page_item page-item-74"><a href="http://snoopy.local/mu/portfolio/" title="Portfolio">Portfolio</a>

  <ul>
   <li class="page_item page-item-70"><a href="http://snoopy.local/mu/portfolio/photos/" title="Photos">Photos</a></li>
   <li class="page_item page-item-76"><a href="http://snoopy.local/mu/portfolio/resume/" title="Resumé">Resumé</a></li>
  </ul>

 </li>

</ul>

It also gives us a dirty looking nav.

So we need some CSS.

.custom ul#tabs li ul {display:none; position:absolute; list-style:none;}
 .custom ul#tabs li ul li {float:none;}

display:none; hides the nested lists from view, while position:absolute; fixes the position of the nested lists so that they don’t push the whole page layout around when we reveal them.list-style:none; and float:none; remove the bullet points and floats that made the sub-menu look so awful.

DROPPING DOWN ∞

To make this menu dropdown via CSS you can simply use the following.

.custom ul#tabs li:hover ul {display:block;}

Naturally, anything that simple and elegant doesn’t work in IE6⁵. The reason being that IE6 only supports the :hover pseudo element on anchors (i.e., the things that start with <a). IE7 is supposed to support :hover, but there have been problems. I haven’t tested this in IE7 because I don’t have it installed at the moment.

If you don’t care about IE, eat your heart out. If you do care about IE you can use some javascript to allow hovering over list items.

When I first used this javascript it worked fine, and still works fine on that site, but some other sites have problems. IE doesn’t seem to register that the li wraps around the whole dropdown ul so when you move off the initial nav item the dropdown disappears again and you can’t select the sub-nav items. See this comment below for a fix.
And if you’re still having problems try adding .custom ul#tabs {margin-bottom:-0.1em;}(suggestion in comment).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
 $(function(){
  $("ul#tabs > li").hover(
  function(){
   $('ul', this).show();
  },
  function(){
   $('ul', this).hide();
  }
  );
 });
</script>

What that code does is grabs jQuery from the Google AJAX libraries (I like getting it from them because your users may already have it cached if they’ve been on a site using it and it’s not on your server, so it can load asynchronously). Then, there’s a function that essentially says,

When the page is loaded, hovering over ul#tabs li causes the ul in this element to be shown, then hidden when you move away from the li again.

To use it, you should insert it into the head of your site. In Thesis you can do this by putting it incustom_functions.php and wrapping it with function jquery_nav() { ?> at the start and <?php } add_action('wp_head','jquery_nav'); at the end.

This does work in IE6, although I will admit to having some problems hovering over the elements in the nested lists when I had some nearby elements with z-indexes. Otherwise it has been fine.

ALMOST THE END

The other thing is that you might want to make a dropdown that is not just pages and child-pages. There are a few ways to go about it; some more complicated than others. I think the simplest of these ways is to rewrite the nav menu in HTML to suit you.

So, take the example nested code and write out your nav menu with nested lists. You can also add the dynamic current-page classes with PHP as shown in my Snipplr snippet, Nav menu for Thesis. The snippet also shows the code needed to replace the default nav.

THE END

Let me know if you have problems with this. I can’t promise I’ll be able to fix them, but it’d be useful for everyone to know the caveats anyway.