Adding a drop down menu posted by Christophe Porteneuve @ Mon, 02 Jun 2008 22:54:19 -0000

Christophe Porteneuve — Mon, 02 Jun 2008 22:54:19 -0000

Hey Mike,

Essentially, you should try and style your menu items so that they appear in the proper positions by default, all shown. Use a first-level list for the top navbar, and inner lists inside the <li>’s that have submenus. Then, you should hide the inner lists by default (using inline style="display: none;"), and toggle them using mouseover/mouseout on the relevant <li>’s in the top list.

The markup would go like this:

<ul id="navBar">
  <li><a href="…">No Sub Menu</a></li>
  <li>
     <a href="/cat2">Submenu here</a>
     <ul id="cat2">
       <li>Subitem 1</li>
       <li>Subitem 2</li>
       …
     </ul>
  </li>
  …
</ul>

Then you should style those using a position: relative for list items, and a position: absolute with proper top/left positioning for inner lists. Perhaps something alone these lines:

#navBar li { position: relative; height: 1em; padding: 0.5em; }
#navBar li ul { position: absolute; top: 2em; left: 0; }
…

When it renders well on all browsers you want to support, add the inline hiding and event-based hide/show calls.

‘HTH

Adding a drop down menu posted by Mike E. @ Mon, 02 Jun 2008 16:25:50 -0000

Mike E. — Mon, 02 Jun 2008 16:25:50 -0000

Hi Christophe,

Thanks for the reply. I think I understand what you’re saying. The problem is I don’t know CSS well enough to grab the relevant bits from the site you recommend. I’m having trouble integrating it with the CSS on my site. I’m really new at this. I’ve tried several times to make it work on my site, but I end up screwing up my site.

Mike

Adding a drop down menu posted by Christophe Porteneuve @ Mon, 02 Jun 2008 06:14:02 -0000

Christophe Porteneuve — Mon, 02 Jun 2008 06:14:02 -0000

Have a look at the SCTI website I did a while back, which does what you want. It uses semantic markup for the menu (nested lists) and JavaScript to react to mouseover/mouseout’s by hiding/showing the sublists. CSS positions the menus. The script (/js/scti.js) could be taken one step further by using event delegation + target identification instead of attaching handlers to every single top-level menu item.

‘HTH

Adding a drop down menu posted by Mike E. @ Mon, 02 Jun 2008 01:52:57 -0000

Mike E. — Mon, 02 Jun 2008 01:52:57 -0000

I’m using tabbed navigation menus on my site. I’d like to add a drop down menu to the ‘products’ tab, something like Widget1, Widget2, Widget3, etc. I’ve tried to get it to work but I’m just not getting it.

Here’s a very stripped down version of the site:
http://64.58.198.103/www.PRACTICE_MENUS.com/home.html

When the mouse moves over the rectangular ‘products’ box, a drop down menu should appear.

Any help would really be appreciated.

Thanks,
Mike

Recent Posts in 'Adding a drop down menu' | Pragmatic Forums

Adding a drop down menu posted by Christophe Porteneuve @ Mon, 02 Jun 2008 22:54:19 -0000

Adding a drop down menu posted by Mike E. @ Mon, 02 Jun 2008 16:25:50 -0000

Adding a drop down menu posted by Christophe Porteneuve @ Mon, 02 Jun 2008 06:14:02 -0000

Adding a drop down menu posted by Mike E. @ Mon, 02 Jun 2008 01:52:57 -0000