Roll down menus

nseidm1 · #1 (**permalink**) 11-28-2006, 03:37 PM

My website is way to long and I've had complains about scrolling requirements. I would like for each section to roll down and up upon mouseclick, but I have no idea how to achieve this effect. Any thoughts, links, or code would be greatly appreciated!!

www.waterfuelconverters.com

Dubbya · #2 (**permalink**) 11-29-2006, 12:26 AM

I'm not sure what it is you're trying to do. Do you have an example of what you're looking for?

nseidm1 · #3 (**permalink**) 11-29-2006, 01:04 AM

Like Yahoo, there top right links. On mouseover the menu changes, and the rest of the menus below more down.

Webnauts · #4 (**permalink**) 11-29-2006, 06:53 AM

Quote:

Originally Posted by nseidm1

My website is way to long and I've had complains about scrolling requirements. I would like for each section to roll down and up upon mouseclick, but I have no idea how to achieve this effect. Any thoughts, links, or code would be greatly appreciated!!

www.waterfuelconverters.com

You are posting in the wrong forum. It is moved now at the graphic/design forum.

drummin · #5 (**permalink**) 12-05-2006, 04:34 PM

Give this a try.

<style type="text/css">
a.hid {color:#000; text-decoration:none; outline-style:none;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#fff; color:#0000FF;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {display:block; color:#555; width:100%; font-style:normal; cursor:default;}
</style>
</head>
<body>
<a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>Main Category One</span>Main Category One
Add One Link here
Add One Link here
Add One Link here</a>
<a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>Main Category Two</span>Main Category Two
Add Two Link here
Add Two Link here
Add Two Link here</a>
<a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>Main Category Three</span>Main Category Three
Add Three Link here
Add Three Link here
Add Three Link here</a>

EDIT:
Sorry.
After looking at this more I found this didn't work in FF. Might be a nesting problem with "a" tags. Works fine for adding "More" text, just not links. Maybe one of you pros can figure out another way.

drummin · #6 (**permalink**) 12-05-2006, 10:49 PM

I played with this awhile and couldn't get internal links to work without JS.

You might search for Menu Tree and find many scripts that would do the job. I was hoping to give you a simple answer without JS. You might also modify a dropdown menu and stack these on top of one another.
Hope that helps.