2

Hacer una barra de navegación con un menú desplegable que se desplegase automáticamente al pasar el ratón por encima de un elemento de dicha barra y que al abandonar el elemento se ocultase automaticamente.

He conseguido hacer casi todo, pero cuando quiero que el menu desplegable desaparezca sin haber entrado en el no me funciona. Ni mi profesor ni yo hemos conseguido dar con la respuesta y estoy convenido que es algo supersencillo que se me escapa.

A continuación dejo todo el codigo.

$(document).ready(function (){

	$(".dropdown-toggle").on("mouseover", function () {
		$(".dropdown-menu").show("slow");
	});	

	$(".dropdown-menu").on("mouseleave", function () {
		$(".dropdown-menu").hide("slow");
	});	
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
       <div class="navbar-header"> 
            <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown">Menu 1 </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
            <a href="#" class="navbar-brand"> Menu 2</a>
            <a href="#" class="navbar-brand"> Menu 3</a>
            <a href="#" class="navbar-brand"> Menu 4</a>
       </div> 
</nav>

0

2 respuestas 2

1

Aquí te dejo una alternativa que requiere cambiar un poco el código:

  • Mueve los elementos del menú a una lista
  • Haz que el menú desplegable sea una sublista
  • Pasa la clase dropdown-toggle al primer elemento de la lista (el que contiene el submenú/sublista)
  • Cambia los eventos para que ambos se apliquen a dropdown-toggle
  • Convierte el evento onmouseover en onmouseenter
  • Haz que los elementos del menú ocupen todo el alto del mismo

Al mover el submenú dentro de una sublista y el evento onmouseenter al primer elemento del menú (que contiene la sublista), entonces el menú se mostrará siempre que se pase el ratón por encima de ese elemento y de la sublista (incluída).

Aplicando esos cambios, el código quedaría así:

$(document).ready(function (){

	$(".dropdown-toggle").on("mouseenter", function () {
		$(".dropdown-menu").stop().show("slow");
	});	

	$(".dropdown-toggle").on("mouseleave", function () {
		$(".dropdown-menu").stop().hide("slow");
	});	
});
ul.navbar-header {
  margin-bottom:0; 
  height:50px;
}
ul.navbar-header > li, ul.navbar-header > li > a {
  height:50px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
  <ul class="navbar-header list-inline"> 
    <li class="dropdown-toggle"><a href="#" class="navbar-brand" data-toggle="dropdown">Menu 1 </a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
    <li><a href="#" class="navbar-brand"> Menu 2</a></li>
    <li><a href="#" class="navbar-brand"> Menu 3</a></li>
    <li><a href="#" class="navbar-brand"> Menu 4</a></li>
  </ul> 
</nav>

1
  • Gracias por tu respuesta Alvaro, me ha sido muy util. Commented el 13 jul. 2016 a las 19:34
1

Aunque la respuesta de Alvaro es muy buena, quise probar si era posible hacerlo funcionar con el código html que tienes, y llegué a esta solución usando una mezcla de hover() para el primer nivel del menú y mouseleave() para el submenú, además tuve que cambiar la versión de bootstrap a 3.3.6 y eliminar el margen del submenú para poder hacer la verificación de hoverOut.

¿Cómo funciona?

  • Cuando pasa el mouse por encima del elemento del menú, muestra el submenú.
  • Cuando el mouse 'sale' de dicho elemento del menú, averigua si el siguiente elemento con clase dropdown-menu (o sea un submenú en este caso) tiene el mouse encima o no (hover), de no estarlo, oculta el submenú.
  • Cuando el mouse 'sale' del submenú, averigua si el anterior elemento está en hover (según la disposición del código, equivale al menú superior), de no ser así, entonces oculta el submenú.

$( ".dropdown-toggle" ).hover(
  function() {
    // hover in
    $( this ).next('.dropdown-menu').show("slow");
  }, function() {
    // hover out
    var menuHover = !$(this).next(".dropdown-menu").is(":hover");
    if (menuHover) {
      $( this ).next('.dropdown-menu').hide("slow");     
    }
  }
);

$(".dropdown-menu").mouseleave(function () {
  if (!$(this).prev().is(":hover")) {
$(this).hide("slow");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.dropdown-menu {
  margin: 0;
}
</style>
<nav class="navbar navbar-inverse" role="navigation">
       <div class="navbar-header"> 
            <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown">Menu 1 </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
            <a href="#" class="navbar-brand"> Menu 2</a>
            <a href="#" class="navbar-brand"> Menu 3</a>
            <a href="#" class="navbar-brand"> Menu 4</a>
       </div> 
</nav>

1
  • Genial. Lo único es que le pondría un stop() en las animaciones para evitar que si se entra y sale varias veces se vea el efecto multiples veces
    – Alvaro Montoro
    Commented el 13 jul. 2016 a las 0:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.