How to Make a Drop-Down Navigation Menu Bar in Thesis

Thesis for WordPress is one of those things I love and hate. I started out mostly hating but as I’ve gotten to know it better I’ve felt more comfortable with using it. I could get into why it should never have been marketed as something for beginners (especially at the beginning, but I won’t here).

I run this site on Thesis (as of publication) since I’m so used to making it work for other people as a side gig and own a developers’ copy. Tonight I got an e-mail from a client who couldn’t find a tutorial on how to make a drop-down navigation menu bar. So I sent them a shorter version of what’s below.

Sure, Thesis 1.6 & up have this functionality built right in. But it only works for sub-pages and sub-categories. If you’re trying to create a drop-down menu of links that aren’t pages on the site or categories, you have to hand-code it and insert it into the custom-functions.php file or Thesis OpenHook. Even the option that Thesis offers of letting you choose a category of links to include in the nav bar doesn’t let you make drop-downs.

Edited on release of WP 3.0 – now it’s possible to create your own menus in WordPress. This tutorial is for hand-coding as I haven’t yet looked into how to combine the two and I probably won’t. This tutorial will still work if you want to hand-code your menu.

So what are you supposed to do?

Putting Your Own Drop-Down Links in the Thesis Nav Bar

Actually, it’s really easy, you just have to put it together the right way. The code below demonstrates how to make some nav bar items include a drop down. I’ll explain a little more below. Items 2 & 3 are the one with drop-down menus.

<ul class="menu">
<li class="tab"><a href="">Item 1</a></li>
<li class="tab"><a href="">Item 2</a>
<ul>
<li><a href="">Item 2, Child 1</a></li>
<li><a href="">Item 2, Child 2</a></li>
</ul>
</li>
<li class="tab"><a href="">Item 3</a>
<ul>
<li><a href="">Item 3, Child 1</a></li>
<li><a href="">Item 3, Child 2</a></li>
</ul>
</li>
<li class="tab"><a href="">Item 4</a></li>
</ul>

If you’re using .tab to style the items, then you may want to make the children <li class="tab"> too instead of plain old <li>

A Note on List-Item Structure

The drop-down part is created by putting another unordered list <ul> inside the main list <li>. You must put it inside the li tags or it won’t work. Put it after the a href of the link itself.

Share on Twitter Share on StumbleUpon Share on Facebook Bookmark on Delicious Digg This! Reddit!

Tagged as:



5 Comments

  1. 1

    Bran Mydwynter May 1st, 2010 at 11:57 pm

    Dude. When/if I transfer my website back over to WordPress, and if I pick Thesis for my theme, I’m totally putting you on my “bribe for help” list. I’m sure we could come up with something cool I could do for you/give you/make you in return…
    I mean, I get what you’re saying in this post, sure. But your first paragraph still makes me trepidatious. ;)

  2. 2

    Customizing The Thesis Menu: A Quick Tutorial June 9th, 2010 at 9:10 pm

    [...] I ran across a really useful post from beingruth.com that makes creating a custom menu relatively simple, so long as you don’t mind editing the [...]

  3. 3

    David mon June 25th, 2010 at 11:15 pm

    so where do I paste this code?

  4. 4

    Ruth July 15th, 2010 at 4:03 pm

    Bran, for an arty site like yours Thesis could work, but I’d probably go w/something else. Especially given some of the things that have cropped up recently.

  5. 5

    Terry July 30th, 2010 at 4:46 pm

    Ruth, great post! Two questions:

    Are we hand-editing the PHP files here (i.e. “header.php”)?

    Have you tried other similar “theme frameworks,” such as Frugal….and if so, how do you feel they compare to Thesis?

    thanks,
    Terry

Leave a Comment