Drop-up menu in Thesis 1.6

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.

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.

The menu code

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');

What the code does

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.