kristarella.com

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / WordPress / Themes / Thesis / Drop-up menu in Thesis 1.6

Drop-up menu in Thesis 1.6

by

Yes, drop-up is a bit of an oxymoron. Technically you pull something up and drop something down, but since we talk about drop-downs so much, and the effect of what I’m about to show you happens with the same amount of “gravity”, and I’m not an language pedant (all of the time)… it’s okay.

I was asked how one might create a menu to go in the footer and I thought, hey why not show my blog a bit of love? So, what I’m going to do here is make a drop-up menu listing archives, categories and recent posts, using built in WordPress template tags and Thesis menu classes.

Drop-up Nav

This has been tested in Safari and Firefox on Mac and IE6, IE7 and IE8 on Windows. There may be some z-index issues for sub-sub-menus in IE7 and IE8, sub-sub-menus don’t really work at all in IE6 because they’re not wrapped with tables, and position of the drop-up was not perfect in IE6. I wasn’t able to solve these issues. In many cases these bugs might not be visible at all (e.g., if you don’t have any sub-sub-menus), or acceptable sacrifices if you don’t care much about IE6, which I don’t.

The lovely thing about menus in Thesis 1.6 is that all the hard work of CSS dropdowns are done for you, and since the navigation has a class of “menu” (rather than an ID of “tabs”), it’s perfectly okay to reuse this class elsewhere.

This code needs to go in custom_functions.php (which is now conveniently accessible via the built in ‘Custom File Editor’).

function custom_footer_nav() {
?>
<ul id="footer_nav" class="menu">
	<li><a href="">Archives<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_get_archives(); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="">Categories<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_list_categories('title_li='); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="">Recent Posts<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_get_archives('type=postbypost&limit=5'); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
<?php
}
add_action('thesis_hook_after_footer','custom_footer_nav');

The code is wrapped in a PHP function so that we may insert it below the footer using the thesis_hook_after_footer hook.
The HTML that builds the menu is an unordered list, with each list item containing another unordered list. Each sub-list is populated with list items from the template tags wp_get_archives and wp_list_categories, which retrieve links to archives (monthly, daily, post by post, whatever you specify) and categories and present them as list items.

It’s essential that the first unordered list have class="menu" so that it inherits all the built-in dropdown function of the Thesis navigation menu.

Before and after each sub-list is

<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

and

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Those are there to tell Internet Explorer not to finish the parent link before the sub-list (because IE6 only allows the :hover selector on links) and for IE6 to wrap the sub-list in a table (for positioning).

A bit of javascript for positioning

The above code will give a functional dropdown menu, but we were after a drop-up menu. To achieve that we need to position the submenus above the parent links by the same number of pixels as their height. This is not currently possible in CSS for dynamic elements (with automatically created height). You could give them a fixed height, but I’m going to use a bit of jQuery to detect the height and then position the submenu.

This should also go in custom_functions.php

if ( !is_admin() ) {
	wp_deregister_script('jquery'); 
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
	wp_enqueue_script('jquery');
}

function add_to_head() {
?>
<script type="text/javascript">
	$(function() {
		$("#footer_nav ul.submenu").each(function() {
			var listHeight = $(this).height();
			$(this).css("top", "-" + listHeight + "px");
		});
		$("#footer_nav > li").click(function() {
			return false;
		});
	});
</script>
<?php
}
add_action('wp_head','add_to_head');

What the javascript does

The first bit with deregister, register and enqueue script adds a Google hosted jQuery library to the pages on your blog (but not the admin pages in the dashboard).

The function add_to_head() adds some jQuery to the head of your site. It finds the submenu in our footer navigation (#footer_nav ul.submenu) and detects its height in pixels ($(this).height()) then applies CSS of top:-height; so that the submenu is positioned by its full height above the menu.

$("#footer_nav > li").click(function() {
	return false;
});

That just makes sure that nothing happens when you click on the top-level links of the footer menu because in this example they don’t go anywhere. You can remove this if you intended to link the top links to real pages.

A bit of CSS to wrap up

This goes in custom.css. All it does is rearrange some of the borders and margins that makes the dropdown navigation lists line up properly, so our drop-up lists line up better. If you have navigation borders set to 0 in the Design Options, you probably don’t need this CSS at all.

.custom #footer_nav {border-bottom:0; border-top:1px solid #ddd;}
	.custom #footer_nav li {margin-bottom:0; margin-top:-0.1em;}
		.custom #footer_nav li ul {border-bottom:0; margin-top:0;}
			.custom #footer_nav ul.children {margin-top:0.1em;}

If you need further info on the syntax of PHP, XHTML or CSS to understand the info above, please check out Tizag tutorials and W3 Schools.

Reader Interactions

Comments

  5. Great post. Thanks for the info.

    You aren’t kidding about how easy drop-downs are in Thesis. I spent days creating a contextualish menu thingee on a client site a few years ago. Now, with Thesis, it took no time. Kills me!

  6. Keep up the good work Kristarella, what little you know of how much you have helped me 🙂 Love your interesting articles and tutorials, keep pushing the boundaries matey 🙂

    David

  9. Kristarella,

    Would you be so kind as to shed some light on what we should do if we used the wonderful custom solution you instructed in the past for pre 1.6 versions? I just want to make sure all of my menu css still gets pulled in.

    Thank you!

  10. Suzi — The best thing to do is to keep your old CSS on hand, but remove it from the CSS file, then copy as much as you can into the new settings on the Design Options page; you can control colours and adjust borders from those settings. Then any CSS you have that you can’t use through the Design Options can be copied back into your custom.css file and change .custom #tabs or .custom ul#tabs to .custom ul.menu.

  11. Hi,

    I am trying to add my subpages to my menu, for some reason, I got the About me to add contact under it, but i can’t seem to get it to add any other pages.

    Any ideas? You look like a genius with this!
    Brian 🙂

  14. Happy New Year!

    Once again a great post and I love you Skins. On this site I see you have transparent navigation tabs. Is this easy to do and if so could you please let me know how.

    Thanks. Pete

  16. You’re right! Like everything in life, it’s so simple when you know how :o) Keep up the inspirational work and thanks for a very quick response.

  17. Thanks for the tutorial, I had some fun with it 🙂
    Now I have a crazy question, do you know how to bring the page nav down to the footer using this drop up technic?

  18. WC — you can use wp_list_pages() the same way wp_list_categories() is used, or if you wanted to duplicate your thesis navigation with pages and categories down the bottom you could use thesis_nav_menu(); instead of all the code in the function (but if you did it wouldn’t have the id “footer_nav” anymore, you’d need a different identifier).

  19. Hey, I used thesis_nav_menu(); in the function and it’s showing up. (I put a around, it seems to work…)
    It looks like the second level drop up is off 1 cell with to the top.. (the child pages)… Not sure what’s the best way to fix it
    … Also, how do I get rid of the top menu bar completely?
    Thanks 🙂

  20. Hi I just added this to the custom.css, it fixed the offset 🙂
    .custom #footer_nav li ul li ul {border-bottom:0; margin-top:30px;}

  21. WC — When using thesis_nav_menu() it would be better not to have it inside another ul, which is why I said you’d use it instead of all the code in the function, otherwise you end up with a menu inside a menu. Anywho, if you have it working for you, that’s good.

    To remove the top navigation you need remove_action('thesis_hook_before_header','thesis_nav_menu'); in custom_functions.php.

  24. WC — Essentially all you would need is .custom #footer_nav {position:fixed; bottom:0; }, but as he says in that link, IE doesn’t always play nicely. Not sure what value you’d need to center it perhaps looking up “CSS position” on W3 Schools will tell you.

  25. I’ve upgraded to Thesis 1.6 and WP 2.9.1 and I’m attempting to make my horizontal sub work again instead of using dropdowns. Here is how it looked before: http://tinyurl.com/yj3tx25

    Here is how it looks now … subnav not showing up by default and only as a drop down: http://truenewzealand.com/ourtrips

    As you’ve suggested, I’ve changed: .custom ul#tabs to .custom ul.menu

    Here is my code:
    CSS: http://tinyurl.com/y96gk7x
    Custom functions pasted into .txt: http://tinyurl.com/yagkyjo

    I’m guessing it’s in the custom functions … perhaps a remnant of the old tutorial? Thank you as always.

  26. Suzi — For starters, remove the height CSS from #nav_area, the alignment is all wrong because of it.

    In layout.css is the CSS

    .menu ul, .menu ul li { width: 15em; }
	.menu ul ul, .menu :hover ul :hover ul { left: 15em; }

    You need to counteract that in your custom.css somehow and also cause the submenu items to float left because they no longer inherit that from the parents.

    .custom ul.menu ul {width:100%; left:0;}
  .custom ul.menu ul li {float:left; width:15em;} /* change this width to suit your taste, it's the submenu tab width */

  27. dear kris,
    i need HELP!!!!
    i’m really stuck with this. i designed a drop up menu JUST with css, but it doesn’t seem to work on IE. i have tried everything and it still doesn’t work.
    is there any way you could help me out? i’ve been working on this for over 4 days now, and i don’t seem to be able to find the solution.

    this is my php:

    <?php if ($area == "testtres") { ?> <div id="menu" style="padding-right:61px;"> <ul> <li> <a href="#" class="interviews"> <img src="../img/interviews_on.gif" width="93" height="22" alt="" /> </a> <ul> <li><a href="http://&lt;?php echo $_SERVER[‘HTTP_HOST’]; ?>/httpdocs/Site/interviews_edward-furlong.php" class="<?php echo($subarea == "furlong" ? "on" : "") ?>">EDWARD FURLONG</a></li> <li><a href="http://&lt;?php echo $_SERVER[‘HTTP_HOST’]; ?>/httpdocs/Site/interviews_peter-coyote.php" class="<?php echo($subarea == "coyote" ? "on" : "") ?>">PETER COYOTE</a></li> <li><a href="http://&lt;?php echo $_SERVER[‘HTTP_HOST’]; ?>/httpdocs/Site/interviews_slash.php" class="<?php echo($subarea == "slash" ? "on" : "") ?>">SLASH</a></li> </ul> </li> </ul> </div> <? } else { ?> <div id="menu" style="padding-right:61px;"> <ul> <li> <a href="#" class="interviews"> <img src="../img/interviews_off.gif" width="93" height="22" alt="" /> </a> <ul> <li><a href="http://&lt;?php echo $_SERVER[‘HTTP_HOST’]; ?>/httpdocs/Site/interviews_edward-furlong.php" class="<?php echo($subarea == "furlong" ? "on" : "") ?>">EDWARD FURLONG</a></li> <li><a href="http://&lt;?php echo $_SERVER[‘HTTP_HOST’]; ?>/httpdocs/Site/interviews_peter-coyote.php" class="<?php echo($subarea == "coyote" ? "on" : "") ?>">PETER COYOTE</a></li> <li><a href="http://&lt;?php echo $_SERVER[‘HTTP_HOST’]; ?>/httpdocs/Site/interviews_slash.php" class="<?php echo($subarea == "slash" ? "on" : "") ?>">SLASH</a></li> </ul> </li> </ul> </div> <? } ?>

    and this is my CSS
    #menu{padding:0;margin:0;z-index:22px;background-color:#000000;text-align:center;}#menu ul{padding:0;margin:0;list-style-type: none;}#menu ul li {float:left; position:relative;}#menu ul li ul {visibility:hidden; position:absolute;} #menu li{position: relative;float: left;list-style: none;margin: 0;padding:0;}#menu li a{width:93px;height: 22px;display: block;font-size:9px;text-decoration:none;text-align: center;line-height: 20px;background-color:#000000;font-size:9px;color: white;}#menu li a:hover{color: #808080;}#menu ul ul{position: absolute;top: -67px;visibility: hidden;}#menu ul li:hover ul{visibility:visible;}#menu li a.on{color: #808080;}

    i would really appreciate your help.

    best.

  29. kris, thanks for your reply.
    it doesn’t show my submenu, nothing appears. in every IE.
    i’m looking into the link you sent me right now.

    best.

  32. Thanks for your suggestions on getting the horizonal sub-nav to work again (29 March 2010) post Thesis 1.6 upgrade. Unfortunately, even with the suggestions made they still stubbornly only appear as a drop down. Perhaps in a future tutorial you may update horizontal sub nav information for current Thesis iterations. I’ll stay tuned 🙂

  33. Suzi — I missed the fact that you wanted it to show up all the time. Try .custom ul.menu li.current ul {visibility:visible;}. You’ll probably need to tweak some margins to accomodate it.

  35. Suzi — There was a bunch of old or conflicting CSS in the file. I have made a copy of your CSS file where I’ve deleted anything not in use and made some notes up the top for things that you should enter into the options (it is better to do as much in the options as possible and only override with CSS when necessary). If you want to keep the old CSS for posterity, save the CSS file as a backup and use the new cleaned up one on the site.

    The changes I’ve made to the nav menu should get you most of the way to where you want to go. It’s really a matter of messing around in firebug until you find the right thing.

    The javascript at the bottom of your functions file is no longer necessary, it’s not currently doing anything anyway.

    You might need some CSS to clear the page title etc of the menu, not sure how you might want to do that.

  36. Thank you Kristarella — I can’t wait to give this a go and Firebug away! I hope you got my donation last week — I really appreciate this site.

  38. Kristarella, Is there any way to take what the tutorial above and make sub-menus pop out to the right? I have a vertical menu in the right sidebar and the sub-menus pop out down over the other menu items which looks bad. Your post is the closest on the web I have found to changing this. Any help would be greatly appreciated. Not super experienced with code as am fairly new to Thesis and web coding as well.

  40. Kristarella,
    What a great resource you have provided here. I am most appreciative of your talents and willingness to share information.
    I have a question please. I am running Thesis 1.7. and was watching a video on using hooks. This video’s example was with Thesis 1.6, and the author of the video said to first change permissions of the custom functions PHP file to a value of 777 within the WP install on the host side BEFORE before editing the custom functions PHP on the WP admin side.
    Two questions please.
    1 Is changing permissions also required in Thesis 1.7, or is that old school?
    2. Where in the world is that file on the host side of a 1.7 install. I simply cannot find it anywhere!

    Your help would be greatly appreciated.
    Greg T

  41. Greg — I’m not sure if changing the permissions of that file is necessary; I’d say you only need to go out of your way to change it if you can’t edit the file from the Thesis Custom File Editor. It’s located at /wp-content/themes/thesis_17/custom/custom_functions.php in the root folder of your WordPress installation.

  42. Thanks,
    It just spooked me a bit. Turns out I was able to do the “edit” without worrying about permissions. I uploaded and am now displaying this new header I created for our 3 week old site. http://www.coloradonewhomespecialists.com/
    For being so new to this I think it looks OK. Will continue to tweak more, however.
    Turns out that making the header look right was way harder than getting Thesis to display it. I’m liking this “little blogging engine that could.”

    Next, Dropdowns.

    Thanks Again,
    Greg

  44. Hi Kristarella! Thank you a lot for posting tutorials and snippets like this.
    I have a problem that I couldn’t solve. I want to apply the drop-up to a custom menu I wish placed in one of the sidebars.
    I really try to do that but without any success. Any advice on this? How can I do that?
    Once again, thanks!

  45. Mariano — I would recommend having menus in the sidebar pop-out sideways, rather than up or down. To start off with I would create your menu in the WordPress menu dashboard and then add it to the sidebar with the WordPress menu widget. If you’ve added submenu items in that menu they should atuomatically dropdown (all that CSS is already in Thesis), then you would just need to use CSS positioning to move the menu to the side… something like:

    .custom .sidebar .menu li {position:relative;}
.custom .sidebar .menu li ul {position:absolute; right:1px; top:0;}