An Aussie geek stuck in Texas

Okay finally here it is, the first draft of my instructions on how to implement the above CSS based dropdown menu:

0. You might want to upgrade to a recent nightly just so you have a similar codebase to me
1. First set up your Pages in Wordpress to be some sort of hierarchy otherwise using the menu doesn’t make sense
2. Edit your theme’s header.php inserting the below code within the head tags somewhere:
<!--[if IE]>
<style type=”text/css” media=”screen”>
html {
behavior: url(http://www.yourdomain.com/wp-content/themes/default/csshover.htc);
font-size: 70%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
< ![endif]–>

This is to work around problems in Internet Explorer and make sure the menu works there, you can download the required file here.

Note: It is very important that this file is served from the exact same domain as your blog if you reference it from www.yourdomain.com and users view your site just by yourdomain.com it will not be included due to security in Internet Explorer.

3. Then add:

<style type="text/css">
@import “http://www.yourdomain.com/wp-content/themes/default/multimenu.css”;
</style>

Downloading the file from here.

4. Then download the modified template-functions-post.txt and either place that in your wordpress/wp-includes directory (after renaming it to .php of course) or edit your existing file looking at the //jb comments in my modified version (the comments aren’t verbose at all yet)

5. Go back to editing your themes header.php and within the header div, just after the headerimg div paste the following:

<div id="menu">
<?php wp_list_pages(false,false,false,false); ?>
</div>

And I think that is it, if you’re interested in this then please give it a go and let me know how you go, if you have any problems with it then please just contact me and I will help you out as soon as I can!

Trackback URI | Comments RSS