Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 7 de 7

Tema: Dropdown con jQuery

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17

    Dropdown con jQuery

    Hola:

    Tengo un menú compuesto por varias listas y una de ellas será un desplegable. El problema es que el desplegable no se encontrará como un submenú, si no que es una capa (div) definido a parte del menú. Lo que quiero hacer es que al poner el ratón encima de esa lista, esa capa aparezca (hasta ahí todo bien), y que el desplegable aguante unos segundos si el ratón no está encima de él, aunque si el ratón está encima dejarlo abierto para poder navegar por él, y cuando quiten el raton y pasen unos segundos se cierre.

    Con CSS hay miles de tutoriales, pero para hacerlo con submenús en listas.
    Probé de todo, incluso así:
    Código:
    $(function() {
      
      $( "li.desplegable" ).on({
        mouseenter: function() {
          $( '.desplegado' ).css('display', 'block');
        }, mouseleave: function() {
          if($( '.desplegado' ).mouseover()){
            $( '.desplegado' ).css('display', 'none');
          } else {
            $( '.desplegado' ).css('display', 'block');
          }
        }
      });
    
    
    });
    (Era obvio que no funcionaría XD)

    El html sería algo así:
    Código:
    ...head de la página...
    
    <header>
      <div class="desplegado">contenido desplegable</div>
      <nav>
        <ul>
          <li><a href="">enlace</a></li>
          <li class="desplegable"><a href="">desplegar menù</a></li>
          <li><a href="">enlace</a></li>
        </ul>
      </nav>
    </header>

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    A las malas lo he intentado hacer así:
    Código:
    $(function(){
    
    
      $('li.desplegable').hover(function(){
        $('.desplegado').slideDown('slow');
      });
      $('.desplegado').mouseleave(function(){
        $('.desplegado').delay(600).slideUp('slow');
      });
    
    
    });
    Pero claro, si no pasas el ratón por encima del contenido desplegado no va a cerrarse...

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de codomodragon
    Fecha de Ingreso
    11 nov, 09
    Ubicación
    Venezuela
    Mensajes
    1,281
    Poder de Reputación
    18
    bueno creo que lo mejor es usar las clases .mouseenter y .mouseleave ,problemas, estas clases requieren de mucho trabajo para que funcionen como es debido en un menu, pero analíticamente deveria servir.

    en lo personal recomiendo el uso de css para esto debido a que es mas corto
    OMG WTF BBQ
    Disculpen cualquier error o metidota de pata, la universidad me tiene loco y candado.

    www.mangasve.com.ve el lugar venezolano del manga

    http://www.rauch.cl/cctw.jpg

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Hola @codomodragon:

    Sí, he estado haciendo muchas prácticas pero he logrado lo que puse arriba o algo parecido, y no era exactamente lo que quería. En principio quería hacerlo sólo con CSS, pero no tengo ni idea de como afectar desde la lista desplegable a la capa que no se encuentra en la lista (aunque sí en el mismo elemento padre, header)

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de codomodragon
    Fecha de Ingreso
    11 nov, 09
    Ubicación
    Venezuela
    Mensajes
    1,281
    Poder de Reputación
    18
    agggggg se me apago la pc 2 veces aggggggggg cuando tenia el texto completo.

    ok deja te explico, es facil solo debes jugar con los li u los ul

    Código HTML:
    <ul class='menu'>
      <li>
        <a>no desplegable</a>
      </li>
      <li>
        <a>desplegable</a>
        <ul class='menu-ijo'>
          <li>
            <a>hola</a>
          </li>
        </ul>
      </li>
    </ul>
    como vez solo creamos una lista y le agregamos una clase, luego creamos otra lista dentro de uno de los elementos de la anterior y le agregamos otra clase, lo dmas es con css

    Código HTML:
    .menu ul {
    	position:		absolute;
    	top:			-999em;
    	width:		10em; 
    }
    .menu ul li {
    	width:			100%;
    }
    .menu li:hover {
    	visibility:		inherit;
    }
    .menu li {
    	float:			left;
    	position:		relative;
    }
    .menu a {
    	display:		block;
    	position:		relative;
    }
    .menu li:hover ul,
    .menu li.sfHover ul {
    	left:			0;
    	top:			30px;
    	z-index:		150;
    }
    ul.menu li:hover li ul,
    ul.menu li.sfHover li ul {
    	top:			-999em;
    }
    ul.menu li li:hover ul,
    ul.menu li li.sfHover ul {
    	left:			5em; 
    	top:			0;
    }
    ul.menu li li:hover li ul,
    ul.menu li li.sfHover li ul {
    	top:			-999em;
    }
    ul.menu li li li:hover ul,
    ul.menu li li li.sfHover ul {
    	left:			5em;
    	top:			0;
    ok como vez esto es algo extenso pero en esencia solo estoy diciendo que el ul tendrá sus elementos alineados debajo del anterior al poner sobre el li el puntero los muestre acia abajo y que sean visibles, lo demas , son pequeños ajustes para lograr que todo quede en su sitio.

    pd no explique casi nada por que cada vez que terminaba se me apagaba la laptop >_< si no entiendes te lo explico mas a detalle
    OMG WTF BBQ
    Disculpen cualquier error o metidota de pata, la universidad me tiene loco y candado.

    www.mangasve.com.ve el lugar venezolano del manga

    http://www.rauch.cl/cctw.jpg

  6. #6
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Sí sí, de esa manera ya sé hacerlo, pero el div desplegable no está dentro de la lista como si fuese un submenú :p

    De todos modos, lo dejaré así hasta que sea necesario cambiarlo, y ya sería más bien una duda de CSS :)

    Saludos y gracias por la respuesta :)

  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de codomodragon
    Fecha de Ingreso
    11 nov, 09
    Ubicación
    Venezuela
    Mensajes
    1,281
    Poder de Reputación
    18
    haaa ok ya me extrañaba esta pregunta de tu parte jeje xD

    igual seguiré investigando un poco y si encuentro algo lo comento por acá
    además tengo que terminar algún día mi guía de ajax xD
    OMG WTF BBQ
    Disculpen cualquier error o metidota de pata, la universidad me tiene loco y candado.

    www.mangasve.com.ve el lugar venezolano del manga

    http://www.rauch.cl/cctw.jpg

Temas Similares

  1. Cronjobs y jquery
    Por jagmarej en el foro Problemas de Conexión con tu Servidor?
    Respuestas: 0
    Último Mensaje: 06/04/2014, 08:33
  2. ayuda con jquery
    Por pelaoloco en el foro Curso de jQuery
    Respuestas: 3
    Último Mensaje: 13/08/2012, 18:32
  3. Galerías en Jquery
    Por GazzD en el foro Curso de jQuery
    Respuestas: 1
    Último Mensaje: 29/05/2012, 00:16
  4. crear reproductor con jquery
    Por danieltra en el foro Curso de jQuery
    Respuestas: 0
    Último Mensaje: 24/02/2012, 08:46
  5. mas informacion jquery
    Por jacob en el foro Curso de jQuery
    Respuestas: 2
    Último Mensaje: 20/12/2011, 21:02

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •