Making a drop-down list using scriptaculous and prototype's BlindDown or SlideDown effect
This effect seems to work fine with 'onclick' events
But with onmouseover, I read that you need to use the effect queue so your blind up and blind down are not stepping on each other, like in this script.
A queue is a list of events (in the current context Effects). These events take occur one after the other (or parallel) for the purpose of preventing disturbence of current actions.
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on June 28, 2022Comments
-
Admin almost 2 years
I'm trying to make a javascript dropdown list using scriptaculous and prototype. I know this can be done using CSS :hover pseudo-selectors, but I would like to add some additional flair to it. The problem is that while I can kind of get the dropdown/up effect working, it seems very flaky. Is there a simple way to do this, or should I stick to the hovers? Here is the CSS I'm using.
<style type="text/css"> ul {list-style-type: none} #navbar>li { position: relative; float: left; padding-right: 20px; height: 2em; background-color: #002; } ul.dropdown { display: block; position: absolute; top: 2em; left: 0px; background-color: #00c; } </style>
And here is the html (I added the style="display: none" per the documentatoin, which said to put it there instead of in a stylesheet if you want the target to initially be hidden).
<ul id="navbar"> <li onmouseover="Effect.BlindDown('dropdownone', { duration: 0.8 })" onmouseover="Effect.BlindUp('dropdownone', { duration: 0.8 })"><a href="">Menu Link 1</a> <ul id="dropdownone" class="dropdown" style="display: none"> <li>Drop Down Link 1</li> <li>Drop Down Link 2</li> <li>Drop Down Link 3</li> </ul> </li> <li><a href="">Menu Link 2</a> <ul id="dropdowntwo" class="dropdown"> <li>Drop Down Link 1</li> <li>Drop Down Link 2</li> <li>Drop Down Link 3</li> <li>Drop Down Link 4</li> <li>Drop Down Link 5</li> </ul> </li> <li><a href="">Menu Link 3</a> <ul id="dropdownthree" class="dropdown"> <li>Drop Down Link 1</li> <li>Drop Down Link 2</li> </ul> </li> </ul>