[SOLUCIONADO] Mostrar sub-menu al hacer hover con javascript

AprendizPollito · #1 (**permalink**) 28/04/2014, 22:37

Hola muy buenos días,

Tengo este problemilla haber si me hechan una mano

Código HTML:

<!DOCTYPE HTML>
<html class="no-js" lang="es">
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#menu").mouseenter(function(){
            $('.menu-activo').show()
         });
        $("#menu").mouseleave(function(){
            $('.menu-activo').hide()
        });
		 $(".menu-activo").mouseenter(function(){
            $('.menu-activo').show()
         });
        $(".menu-activo").mouseleave(function(){
            $('.menu-activo').hide()
        });
    });
</script>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="Contenedor" -->
<nav class="contain-to-grid top-bar-main">
	<div class="row">
    	<a href="#" class="top-bar-logo">LOGO</a>
        
        <!-- Navegación -->
        <ul class="menu-principal">
        	<li id="menu"><a href="#">CATEGORIAS</a></li>
        </ul>
        <!-- /Navegación -->
	</div>
    
</nav>
<div class="menu-activo">
<ul>
	<li class="titulo">TITULO</li>
	<li><a href="#">Lista 1</a></li>
        <li><a href="#">Lista 2</a></li>
</ul>
<ul>
	<li class="titulo">TITULO</li>
	<li><a href="#">Lista 1</a></li>
        <li><a href="#">Lista 2</a></li>
</ul>
</div>

</body>
</html>

Explico :

Tengo un barra superior donde está mi menú. Al hacer hover en el <li id="menu"> mediante el script en el HEAD hace que aparesca un DIV con contenido... El problema es que cuando el mouse esta dentro de este contenido, la seleccion o el efecto del LI desaparece y eso es porque yo estoy poniendo que haga eso en el script, pero es que si no lo pongo, se cierra... quisiera que cuando el mouse esté dentro del DIV, siga seleccionado o el efecto de hover en el LI.

Pongo una DEMO para que Uds mismos lo vean y puedan decirme más facilmente que tengo que hacer...

[URL="http://sitiodepruebas.bl.ee/pruebas/"]DEMO AKI!!/[/URL]

Soy nuevo, recien soy pollito... espero me ayuden please!

Triby · #2 (**permalink**) 28/04/2014, 22:43

Bienvenido a FDW.

Vaya, publicas en PHP un tema que crees que es de Javascript, pero... finalmente, es de CSS.

Muevo tu tema al foro adecuado.

AprendizPollito · #3 (**permalink**) 28/04/2014, 22:45

:O Vaya! finalmente fue de CSS, pensé que sería MYSQL

Sería bueno, que ya que está por akí me heche una manita

pzin · #4 (**permalink**) 29/04/2014, 03:31

Bienvenido al foro.

Pues yo al pasar el ratón por encima de "categorías" y moverme por en submenú, sigue abierto y no existe el problema que mencionas.

Aparte, todo eso puedes hacerlo mediante CSS sin necesidad de JavaScript.

Esto es de interés para ti

haber = verbo o sustantivo
a ver = preposición "a" y verbo "ver" [+]

hechan = no existe
echan/eche = verbo echar conjugado

AprendizPollito · #5 (**permalink**) 29/04/2014, 07:07

:O Gracias por responder

me refería a que cuando el mouse está por el contenido del DIV, la selección o efecto de hover en el "LI" desaparece...

Si, quisiera hacerlo en CSS, pero, el DIV que se muestra no está padre-hijo ó en arbol para hacer algo asi : li:hover DIV por lo que no encontré de otra que usar javascript.

Hay alguna manera de aparecer un DIV al hacer hover en una LI, sin que esta sea en arbol o padre-hijo?? si lo hubiera me resolveria todo esto.

pzin · #6 (**permalink**) 29/04/2014, 07:13

Aham.

Pues, tienes mal estructurado el HTML. Un submenú se hace tal que así:

Código HTML:

Ver original<ul>
  <li>
    <ul>Este sería el submenú</ul>
  </li>
</ul>

Los listas anidadas. Y así ya podrías hacer algo como:

Código CSS:

Ver originalul li:hover a {
  background: #000;
}

Hay formas de solucionarlo sin tener que cambiarlo, pero en principio deberías de cambiar la estructura, por hacer las cosas bien.

AprendizPollito · #7 (**permalink**) 29/04/2014, 07:17

No, no lo quiero hacer asi en padre-hijo porque si lo haz notado al hacer HOVER aparece el submenú a fullscreen de ancho y a su vez el texto de abajo lo mueve.

Por eso preguntaba si hay forma de relacionarlo en el CSS sin tener que ser padre-hijo.

En otra palabras, te lo resumo... me quiero copiar de AVAST.COM xD!

Gracias

Cita:

Iniciado por pzin

Bienvenido al foro.

Esto es de interés para ti

haber = verbo o sustantivo
a ver = preposición "a" y verbo "ver" [URL="http://www.rae.es/consultas/ver-haber"][+][/URL]

hechan = no existe
echan/eche = [URL="http://www.wordreference.com/conj/EsVerbs.aspx?v=echar"]verbo echar conjugado[/URL]

:O Gracias, en mis tiempos así me habian enseñado xD! nose si la prof estuvo mal o es que necesito actualizarme.

pzin · #8 (**permalink**) 29/04/2014, 08:19

Pues tal como lo tienes no puedes hacerlo mediante CSS, no. Tendrás que usar JavaScript.

AprendizPollito · #9 (**permalink**) 29/04/2014, 09:33

A ya veo... entonces volviendo a lo de antes, como podría modificar el script para que se quede el LI con el efecto de hover estando tanto encima de él como del DIV de submenú?

Código HTML:

<script type="text/javascript">
    $(document).ready(function(){
        $("#menu").mouseenter(function(){
            $('.menu-activo').show()
         });
        $("#menu").mouseleave(function(){
            $('.menu-activo').hide()
        });
		 $(".menu-activo").mouseenter(function(){
            $('.menu-activo').show()
         });
        $(".menu-activo").mouseleave(function(){
            $('.menu-activo').hide()
        });
    });
</script>

pzin · #10 (**permalink**) 29/04/2014, 09:36

Te muevo el tema al foro de jQuery a ver si ahí saben.

AprendizPollito · #11 (**permalink**) 29/04/2014, 13:09

Okay, ojala que alguien me responda ._.

bathorz · #12 (**permalink**) 30/04/2014, 01:32

No sé si lo he entendido pero prueba:

Código Javascript:

Ver original$(".menu-activo").mouseenter(function() {
          $("#menu a").css({"background": "#000"});
          $('.menu-activo').show()
        });
        $(".menu-activo").mouseleave(function() {
          $("#menu a").css({"background": ""});
          $('.menu-activo').hide()
        });

AprendizPollito · #13 (**permalink**) 30/04/2014, 11:03

Gracias, si me sirvió =D