2

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

4 回答 4

2

这种效果似乎适用于“onclick”事件

但是使用 onmouseover，我读到您需要使用效果队列，这样您的盲上和盲下就不会互相踩踏，就像在这个脚本中一样。

队列是事件列表（在当前上下文中的效果）。这些事件一个接一个（或并行）发生，目的是防止干扰当前的动作。

于 2008-11-16T11:35:40.697 回答
0

队列似乎没有帮助。在尝试了一个多小时不同的东西后，我将放弃并坚持使用简单的悬停菜单。这很有趣，因为我认为这是这些库应该简化的那种基本的 UI 增强效果。

于 2008-11-16T18:39:55.350 回答
0

BlindDown 可以是这样的：

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

我正在为“onmouseout”事件开发 BlindUp，但似乎无法使其正常工作。:(

于 2009-02-20T23:39:14.543 回答
0

使用：Effect.toggle('id_of_element', 'blind', { duration: 2.0 });

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

于 2009-05-20T01:53:09.283 回答