help wanted: cbs - nbc dropdown menu

big wide css javascript dropdown menu

[Improvisio]

Hello all,
first post

i'm looking for some help.
i'm trying to find a tutorial or how-to guide on how to create one of those 'new' huge dropdown menu's.

see for example:
www.cbs.com
www.nbc.com

thanks in advance

[httpwebwitch]

aaah. That one isn't so hard - you could create one of these from scratch.

The effect consists of two kinds of elements - trigger elements and panel elements.
The triggers are links in the nav bar. Panels are usually a <div> with a unique ID - the big rectangles that have all the menu content in it.

When the page loads, style each panel with "display:none".

To each trigger, add a "mouseover" event that changes its corresponding panel to "display:block"

<a href="#" onmouseover="document.getElementById('panelname').style.display='block'"> roll over me </a>

to each panel, add a "mouseout" event that adds change the panel back to "display:none".

<div id="panelname" style="display:none" onmouseout="this.style.display='none'"> link link link </div>

That's a bare-bones example using inline styles and script. A more sophisticated attempt would put the CSS and JS into external files.

[httpwebwitch]

welcome to WebmasterWorld, Improvisio!

[httpwebwitch]

You can make it more complex (and better) using timers that auto-close the panel after a few seconds if the user doesn't roll the mouse over it. Within 15-20 lines of code you can have showing/hiding menus that behave just like a Windows toolbar menu.

If I find a good tutorial, I'll link you up