Very Recent

Yes, drop-up is a bit of an oxymoron. Technically we lift something up as well as dump something down, though given we speak about drop-downs so much, as well as a outcome of what Im about to uncover we happens with a same volume of gravity, as well as Im not an language prude (all of a time) a okay.

I was asked how a single might create a menu to go in a footer as well as we thought, hey why not uncover my blog a bit of love? So, what Im starting to do here is have a drop-up menu listing archives, categories as well as recent posts, regulating built in WordPress template tags as well as Thesis menu classes.

This has been tested in Safari as well as Firefox upon Mac as well as IE6, IE7 as well as IE8 upon Windows. There might be a little z-index issues for sub-sub-menus in IE7 as well as IE8, sub-sub-menus dont unequivocally work during all in IE6 given theyre not wrapped with tables, as well as in front of of a drop-up was not perfect in IE6. we wasnt able to compromise these issues. In many cases these bugs might not be visible during all (e.g., if we dont have any sub-sub-menus), or excusable sacrifices if we dont caring most about IE6, which we dont.

The lovely thing about menus in Thesis 1.6 is which all a tough work of CSS dropdowns have been done for you, as well as given a navigation has a class of menu (rather than an ID of tabs), a perfectly fine to reuse this class elsewhere.

The menu code

This formula needs to go in custom_functions.php (which is right away conveniently accessible around a 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 a formula does

The formula is wrapped in a PHP duty so which we might insert it below a footer regulating a thesis_hook_after_footer hook.
The HTML which builds a menu is an unordered list, with each list item containing an additional unordered list. Each sub-list is populated with list items from a template tags wp_get_archives as well as wp_list_categories, which collect links to archives (monthly, daily, post by post, whatever we specify) as well as categories as well as present them as list items.

Its necessary which a first unordered list have class="menu" so which it inherits all a built-in dropdown duty of a Thesis navigation menu.

Before as well as 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 have been there to tell Internet Explorer not to finish a primogenitor couple before a sub-list (because IE6 only allows a :hover selector upon links) as well as for IE6 to wrap a sub-list in a table (for positioning).

A bit of javascript for positioning

The upon top of formula will give a functional dropdown menu, though we were after a drop-up menu. To grasp which we need to in front of a submenus upon top of a primogenitor links by a same number of pixels as their height. This is not now possible in CSS for energetic elements (with automatically created height). You could give them a bound height, though Im starting to make use of a bit of jQuery to detect a tallness as well as afterwards in front of a 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 a javascript does

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

The duty add_to_head() adds a little jQuery to a head of your site. It finds a submenu in a footer navigation (#footer_nav ul.submenu) as well as detects a tallness in pixels ($(this).height()) afterwards applies CSS of top:-height; so which a submenu is positioned by a full tallness upon top of a menu.

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

That just creates certain which zero happens when we click upon a top-level links of a footer menu given in this e.g. they dont go anywhere. You can remove this if we intended to couple a top links to real pages.

A bit of CSS to wrap up

This goes in custom.css. All it does is rearrange a little of a borders as well as margins which creates a dropdown navigation lists line up properly, so a drop-up lists line up better. If we have navigation borders set to 0 in a Design Options, we substantially dont need this CSS during all.

.custom #footer_nav {border-bottom:0; border-top:1px plain #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 we need further info upon a syntax of PHP, XHTML or CSS to assimilate a info above, greatfully check out Tizag tutorials as well as W3 Schools.

This content has upheld by fivefilters.org.