Making a drop-down list using scriptaculous and prototype's BlindDown or SlideDown effect

Question

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>

Answer 1

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.

Answer 2

The queues don't seem to help. After trying different things for over an hour, I am going to give up and just stick with plain hover menus. It's funny because I assumed this was the sort of basic UI enhancement effect these libraries were supposed to make easy.

Answer 3

The BlindDown can be donw like this:

onmouseover="if($('dropdownone').style.display=='none') { Effect.BlindDown('dropdownone', { duration: 0.8 }) }"

I'm working on BlindUp for "onmouseout" event, but can't seem to get it working. :(

Answer 4

Use: Effect.toggle('id_of_element', 'blind', { duration: 2.0 });

headfirstproductions.ca/prototype-and-scriptaculous-drop-down-menu