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>
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.