jQuery menú desplegable desplegable

Question

Soy nuevo en jQuery, esperaba que ustedes pudieran ayudarme. Estoy tratando de crear un menú desplegable, pero es extremadamente problemático. ¿Puedes ayudarme a limpiar mi Javascript? Mira mi código por favor.

http://jsdo.it/mretchin/4Ewk

No funciona en jsdo.it por cualquier razón, pero funciona en Komodo Edit.

Pruebe el código usted mismo si realmente lo desea, el problema es principalmente el Javascript. ¿Pueden ayudarme a hacerlo para que cuando el usuario pase el puntero sobre img.menu_class, ul.file_menu se caiga y, si lo deseara, podría pasar el cursor sobre #algo en ul y caería horizontalmente, no verticalmente.

¡Gracias por tu ayuda! ¡Lo aprecio!

¿Debería renunciar y hacer que funcione en CSS?

Answer 1

Usted puede hacer algo como this:

$(document).ready(function() { 
    $(".hoverli").hover(
     function() { 
      $('ul.file_menu').stop(true, true).slideDown('medium'); 
     }, 
     function() { 
      $('ul.file_menu').stop(true, true).slideUp('medium'); 
     } 
    }); 
}); 

Y here un ejemplo con submenús:

$(document).ready(function() { 
    $(".hoverli").hover(
     function() { 
      $('ul.file_menu').slideDown('medium'); 
     }, 
     function() { 
      $('ul.file_menu').slideUp('medium'); 
     } 
    ); 

    $(".file_menu li").hover(
     function() { 
      $(this).children("ul").slideDown('medium'); 
     }, 
     function() { 
      $(this).children("ul").slideUp('medium'); 
     } 
    ); 
}); 

Answer 2

No está seguro de si le interesa, pero que desea asegurarse de que se ejecuta el. El método stop() de esa manera las animaciones no se acumulan y ejecutan una y otra vez. He aquí un ejemplo

http://jsfiddle.net/4jxph/1335/

$(document).ready(function() { 
    $(".hoverli").hover(
    function() { 
    $('ul.file_menu').stop(true, true).slideDown('medium'); 
    }, 
    function() { 
    $('ul.file_menu').stop(true,true).slideUp('medium'); 
    } 
); 

}); 

Answer 3

Para cualquier persona que encuentre esto en el futuro la respuesta de Siria, se puede acortar con .slideToggle() para manejar tanto hacia arriba y hacia abajo.

Aquí está el violín modificado

http://jsfiddle.net/4jxph/2009/

Si usted tiene un sub-menú de configuración a display: none; se activará también, así que lo que usted querrá hacer es configurarlo para block, a continuación, añadir algo como este

var subMenu = $('li.hoverli > ul > li'); 

subMenu.hover(function() { 
      $(this).find("ul").slideToggle(200); 
     }); 

Y colóquelo justo debajo de su primer slideToggle. ¿Por qué no te lo muestro?

$(document).ready(function() { 
    $(".hoverli").hover(function() { 
    $(this).find('ul').slideToggle('medium'); 
    }); 

    var subMenu = $('li.hoverli > ul > li'); 

    subMenu.hover(function() { 
     $(this).find("ul").slideToggle(200); 
    }); 
}); 

Answer 4

utilizar la función de meta en jQuery para evitar que el error en el que se pasa rápidamente el puntero del ratón sobre el menú y salir del menú. El final es mejor que la función de detención sugerida anteriormente.

$(document).ready(
    function() { 
     $(".hoverli").hover(
      function() { 
      $('ul.file_menu').finish().slideDown('medium'); 
      }, 
      function() { 
      $('ul.file_menu').finish().slideUp('medium'); 
      } 
    ); 
}); 

Answer 5

La respuesta de Aram Mkrtchyan estuvo a punto de llegar. El problema con él era que si agregabas algo debajo del menú, todo se torcía. Aquí hay un ejemplo de lo que quiero decir, agregué un div debajo de su menú: http://jsfiddle.net/4jxph/3418/

Estoy enviando esta respuesta actualizada usando div en lugar de listas y elementos de lista (que me resulta mucho más fácil de trabajar, y mucho más) flexible) y jQuery versión 1.9.1

aquí es un enlace a jFiddle: http://jsfiddle.net/4jxph/3423/

Aquí está el código:

HTML ---------------:

<div id="divMenuWrapper1" class="divMenuWrapper1"> 
    <div id="hoverli"> 
     <div class="lbtn"> 
      Actions 
     </div> 
     <div id="actions_menu" class="file_menu"> 
      <div><a href="#file">File</a></div> 
      <div><a href="#edit">Edit</a></div> 
      <div><a href="#view">View</a></div> 
      <hr /> 
      <div><a href="#insert">Insert</a></div> 
      <div><a href="#modify">Modify</a></div> 
      <div><a href="#control">Control</a></div> 
      <div><a href="#debug">Debug</a></div> 
      <div><a href="#window">Window</a></div> 
      <div><a href="#help">Help</a></div> 
     </div> 
    </div> 
</div> 

<div> 
    testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu 
</div> 

--------------- Css:

.lbtn 
{ 
    display:inline-block; 
    cursor:pointer; 
    height:20px; 
    background-color:silver; 
    background-repeat:repeat-x;  
    border:1px solid black; /* dark navy blue */ 
    text-decoration:none; 
    font-size:11pt; 
    text-align:center; 
    line-height:20px; 
    padding:0px 10px 0px 10px; 
} 

.divMenuWrapper1 
{ 
    height: 25px; 
    width: 75px; 
} 

.file_menu 
{ 
    display:none; 
    width:250px; 
    border: 1px solid #1c1c1c; 
    background-color: white; 
    position:relative; 
    z-index:100000; 
} 

.file_menu div 
{ 
    background-color: white; 
    font-size:10pt; 
} 

.file_menu div a 
{ 
    color:gray; 
    text-decoration:none; 
    padding:3px; 
    padding-left:15px; 
    display:block; 
} 

.file_menu div a:hover 
{ 
    padding:3px; 
    padding-left:15px; 
    text-decoration:underline; 
    color: black; 
} 

--------------- jQuery (que se colocará en document.ready o p ageLoad()):

$("#hoverli").hover(
    function() { 
     $('#actions_menu').finish().slideDown('fast'); 
    }, 
    function() { 
     $('#actions_menu').finish().slideUp('fast'); 
    } 
); 

Answer 6

Sé que esto es probablemente un poco tarde, pero acabo de encontrar este hilo vio que su pregunta anterior sobre las cosas debajo del menú 'conseguir un poco chiflado' era sin respuesta.

Si le da a su div con la clase 'archivo de menú' una posición de absoluta, entonces debería dejar de afectar a los elementos que están delante de ella, ya que la habrá sacado del flujo normal.

Answer 7

Para una caja de selección para abrir en vuelo estacionario a la altura exacta requerida por su contenido, averiguar cuántos elementos hay:

JavaScript

function DropList(idval) { 
    // 
    // fully opens a dropdown window for a select box on hover 
    // 
    var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length; 
    var numOptions = document.getElementById(idval).getElementsByTagName('option').length; 
    document.getElementById(idval).size = numOptgroups + numOptions; 
} 

HTML

<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1"> 
    <option value="0">Any height</option> 
    etc. 
</select>