Sign up today and let us help you learn easy ways to promote your company on the internet. We are offering training on various software and internet media. Email to obtain descriptions and schedules. Do you have a workshop suggestion? Email

TechnWeb offers training on all software, computer, internet, audio, & visual related issues. Write a list of items you wish to learn, and Email us the list and contact info, and we will return the call.

Or, call us now at 310-415-7285, so we schedule an appointment immediately. Someone will come to your home or office and improve your computer and internet skills. It’s easier with a trainer. Call us.

________________________________________________________

Firstly, you’ll need to setup your pages in WordPress in a hierarchal manner. IE:

  • Home Page
  • About Us
    • What We Do
    • What We’ve Done
    • Who Works For Us
  • Services
  • Portfolio
    • Our Clients
  • Contact Us

This will generate a nested UL LI list in your code.

01 <ul id="nav">
02 <li><a href= "#">Home Page</a></li>
03 <li><a href= "#">About Us</a>
04 <ul id="aboutus">
05 <li><a href= "#">What We Do</a></li>
06 <li><a href= "#">What We've Done</a></li>
07 <li><a href= "#">Who Works For Us</a></li>
08 </ul>
09 </li>
10 <li><a href= "#">Services</a>
11 <ul id="services">
12 <li><a href= "#">Portfolio</a></li>
13 <li><a href= "#">Our Clients</a></li>
14 </ul>
15 </li>
16 <li><a href= "#">Contact Us</a></li>
17 </ul>

Making it dynamic

What you’re going to do now, is break that list down somewhat and create your own navigation. The top level menu items will be static, and their subpages will be dynamic. Like so:

1 <ul id="nav">
2 <? wp_list_pages('title_li=&sort_column=menu_order'); ?>
3 </ul>

You might also want to include a home link. You can add this manually like so:

1 <ul id="nav">
2 <li><a href="<? bloginfo('siteurl'); ?>">Home</a></li>
3 <? wp_list_pages('title_li=&sort_column=menu_order'); ?>
4 </ul>

The Script

There’s a tiny piece of jQuery required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top level navigation item so that if JS is disabled, the user will still be able to get around your site. Here’s the script.

1 $(document).ready(function() {
2 $("#nav ul").css({display: "none"}); // Opera Fix
3 $("#nav li").hover(function(){
4 $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });
5 });

The CSS

This CSS is really a guide and it largely depends on the styling of your site. The important thing is to add “position:relative;” to the first level of LI elements. The UL element (the drop down menu) needs to have “position:absolute;” so the parent LI needs to be relatively positioned to your dropdown menu doesn’t display topleft corner of the page.

1 /*navigation*/
2 #nav {padding:0;margin:0;}
3 #nav li {position:relative;display:block;float:left;}
4 #nav li a {display:block;float:left;height:30px;line-height:30px;padding: 0 20px;}
5
6 /*sub navigation*/
7 #nav ul {position:absolute;top: 30px;left:0;padding:0;} /*the top:30px command must be the same height as your parent LI so the dropdown displays below the main navigation*/
8 #nav ul a, #nav ul li {float:none;}

This is the CSS used to achieve the effect in the demo. You can of course change it to suit your site’s styles.

And presto, you’ll have a drop down menu. As you add sub pages in your WP admin, those pages will automatically be included in your drop down.