Faire une liste déroulante à l'aide BlindDown scriptaculous et de prototype ou effet slideDown

Question

Je suis en train de faire une liste déroulante javascript en utilisant scriptaculous et prototype. Je sais que cela peut être fait en utilisant CSS: pseudo-sélecteurs de vol stationnaire, mais je voudrais ajouter un peu de flair supplémentaire. Le problème est que même si je peux faire fonctionner l'effet de liste déroulante, cela semble très floconneux. Existe-t-il un moyen simple de le faire, ou devrais-je m'en tenir aux aéroglisseurs? Voici le CSS que j'utilise.

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

Et voici le code html (j'ai ajouté le style = « display: none » par la documentatoin, qui a dit de le mettre là au lieu d'une feuille de style si vous souhaitez que la cible initialement caché).

<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

Cet effet semble fonctionner très bien with 'onclick' events

Mais avec onmouseover, I read que vous devez utiliser l'effet queue afin que votre aveugle à monter et descendre aveugle ne sont pas les uns des autres, comme in this script.

Une file d'attente est une liste d'événements (dans le contexte actuel Effets). Ces événements se produisent l'un après l'autre (ou parallèlement) dans le but d'empêcher la perturbation des actions en cours.

Answer 2

Les files d'attente ne semblent pas aider. Après avoir essayé différentes choses pendant plus d'une heure, je vais abandonner et me contenter de menus simples. C'est drôle parce que j'ai supposé que c'était le genre d'effet d'amélioration de base de l'interface utilisateur que ces bibliothèques étaient censées rendre facile.

Answer 3

Le BlindDown peut être donw comme ceci:

onmouseover = "if ($ ('dropdownone') style.display == 'none'.) {Effect.BlindDown ('dropdownone', {durée: 0,8 })} »

Je travaille sur BlindUp pour « onmouseout » événement, mais ne peut pas sembler le faire fonctionner. :(

Answer 4

Utilisation: Effect.toggle ('id_of_element', 'aveugle', {durée: 2,0});

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