Menú vertical desplegable con CSS

Autor

19 respuestas a “Menú vertical desplegable con CSS”

1. Jesús dice:

   27/06/2022 a las 17:28

   Como puedo hacer que los submenú se muestren al mismo nivel, es decir que todos comiencen hasta arriba como en el primer item del menú, que no sea como escalón

   Responder
   • Jose Aguilar dice:

     22/07/2022 a las 6:05

     Hola Jesús,

     Para conseguir lo que necesitas tendrás que jugar con la posición absoluta de los niveles ajustando el atributo left de la hoja de estilos según tu conveniencia.

     Saludos

     Responder
2. Hector dice:

   11/07/2020 a las 2:18

   Excelente, funciono de maravilla

   Responder
3. david dice:

   01/11/2018 a las 11:48

   muy útil e ideal para proyectos que no puede usar muchos recursos.

   Responder
4. Raúl dice:

   22/05/2017 a las 10:12

   Hola, ¿qué cambios habría que hacer en tu código para que las subcategorías se mostrasen debajo de su categoría padre y no a la derecha de la categoria padre? Es decir, al poner el ratón sobre «prestashop», se mostraría «modulos» y «themes» debajo de prestashop con una pequeña sangría y «wordpress», «joomla» y «proyectos» quedaría debajo de «modulos» y «themes» sin la sangria. Lógicamente solo habrá un nivel de subcategoría, no habría otro desplegable al poner el raton sobre «modulos» o «themes».
   Muchas gracias

   Responder
   • Jose Aguilar dice:

     25/05/2017 a las 7:09

     Hola buenos días,

     Para tu caso será mejor que te guies de un tutorial para hacer un menú horizontal. Como por ejemplo este:
     https://www.jose-aguilar.com/blog/menu-horizontal-css-query/

     Saludos

     Responder
5. JC dice:

   17/11/2016 a las 20:36

   Eres lo mejor de vida!!!!

   Responder
6. Xico Castañón dice:

   24/09/2015 a las 14:45

   Buenas, esta muy entendible tu ejemplo y aun más para uno de novato, mi duda es como podría hacer para que en mi primer subcategoria apareciera una lista doble, ya que mi primer subcategoria tiene 26 elementos y para verlos todos se tiene que desplazar la ventana hacia abajo, en vez de eso me gustaria que aparecieran dos listas de 13, ojalá me pudieras orientar, saludos.

   Responder
   • Jose Aguilar dice:

     10/10/2015 a las 12:25

     Hola buenas tardes,

     Yo creo que para tu caso deberás hacer dos listas dentro del desplegable. Una en cada columna.

     Saludos

     Responder
7. lita dice:

   20/02/2015 a las 15:45

   Gracias José, lo mejor que encotré relacionado en la web

   Responder
8. Manuel Puente dice:

   25/11/2014 a las 21:17

   EXCELENTE TUTORIAL! justo lo que necesitaba

   Responder
9. UlyssesMAc dice:

   24/10/2014 a las 0:21

   Hola que tal el ejemplo no funciona para internet explorer 10, saludos

   Responder
10. Negro dice:

    06/07/2014 a las 23:14

    Muchisimas gracias, habia intentado hacerlo con la misma ideologia que el horizontal pero tenia conflictos despues de la primera subcategoria, excelente colaboracion, gracias

    Responder
11. Alvaro dice:

    07/05/2014 a las 10:01

    Buenos días, esto es justo lo que andaba buscando pero tengo un problema. No soy ningún experto ni mucho menos en CSS y necesito trasladar esto al bloque de categorias de prestashop, ¿podrías indicarme cómo hacerlo? Es que no encuentro ningún módulo con estas características para instalar. Muchas gracias.

    P.D. Mi versión de PS en 1.5.6

    Responder
    • Jose Aguilar dice:

      08/05/2014 a las 18:32

      Hola buenas tardes,

      Posiblemente te pueda servir lo siguiente:

      http://www.jose-aguilar.com/modulos-prestashop/80-vertical-megamenu-con-categorias.html

      Y después lo maquetas a tu gusto.

      Saludos,

      Responder
12. Rafael dice:

    24/04/2014 a las 17:05

    Impresionante es justo lo que anda buscando gracias !!! Jose.

    Responder
13. heiner gonzalez neira dice:

    23/01/2014 a las 16:08

    buenos días, soy un aprendiz, y este ejemplo me sirvió mucho, pero tengo un problema yo tengo una galería de fotos que quiero mostrar junto al menú pero no se puede, el menú sale debajo de la galería, o encima, mas no en linea como yo lo quiero.

    mi pagina es http://www.logisticarecreacionyeventos.com

    nesecito que me ayudes con este invonveniente, gracias.

    * { margin: 0; outline: none; }
    body { background-color: }
    .c { clear: both; }
    #wrapper { margin: auto; padding: 0 40px 60px 40px; width:100px;}
    h2 { padding: 20px 0 10px 0; font-size: 24px; line-height: 40px; font-weight: normal; color: #adc276; text-shadow: 0 1px 3px #222222; }

    
    
    #menu {
    padding: -10;
    margin: -10;
    border: 0;
    }

    #menu ul, li {
    list-style: none;
    margin: 5;
    padding: 1;
    }

    #menu ul {
    position: relative;
    z-index: 597;
    float: left;
    }

    #menu ul li {
    float: left;
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle;
    }

    #menu ul li.hover,
    #menu ul li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
    }

    #menu ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
    }

    #menu ul ul li {
    float: none;
    }

    #menu ul li:hover > ul {
    visibility: visible;
    }

    #menu ul ul {
    top: -115;
    left: 95%;
    }

    #menu ul li {
    float: none;
    }

    #menu {
    width: 180px;
    }

    #menu span, #menu a {
    display: inline-block;
    font-family: Arial black, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
    }

    #menu:after, #menu ul:after {
    content: »;
    display: block;
    clear: both;
    }

    #menu ul, #menu li {
    width: 100%;
    }
    #menu li {
    background: #99FFEE;
    }
    #menu li:hover {
    background: #FFFFEE;
    }
    #menu a {
    color: #111111;
    line-height: 160%;
    padding: 11px 28px 11px 28px;
    width: 144px;
    }
    #menu ul ul li {
    background: #99FFEE;
    }
    #menu ul ul li:hover {
    background: #FFFF88;
    }
    #menu ul ul li:hover a {
    color: #111111;
    }
    #menu ul ul li ul li {
    background: #99FFEE;
    }
    #menu ul ul li ul li:hover {
    background: #FFBBFF;
    }
    #menu .has-sub {
    position: relative;
    }

    #menu .has-sub:after, #menu .has-sub > ul > .has-sub:hover:after {
    content: »;
    display: block;
    width: 10px;
    height: 9px;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -5px;
    background-image: url(right.png);
    }
    #menu .has-sub > ul > .has-sub:after, #menu .has-sub:hover:after {
    background-image: url(right.png);
    }

    
    
    

    effectsDemo2 = ‘rain,stairs,fade’;
    var demoSlider_2 = Sliderman.slider({container: ‘SliderName_2’, width: 700, height: 500, effects: effectsDemo2,
    display: {
    autoplay: 4000,
    loading: {background: ‘#000000’, opacity: 0.7, image: ‘img/loading.gif’},
    buttons: {hide: true, opacity: 1, prev: {className: ‘SliderNamePrev_2’, label: »}, next: {className: ‘SliderNameNext_2’, label: »}},
    description: {hide: true, background: ‘#000000’, opacity: 0.7, height: 50, position: ‘bottom’},
    navigation: {container: ‘SliderNameNavigation_2’, label: »}
    }
    });

    Talleres Corporativo y consultorias
    Eventos Empresariales
    Alquiler de Material Rcreativo

    Potro Mecanico
    Inflable Resbaladero
    Inflable Multy PlayGround
    Inflable Saltarin Castillo
    Mini Inflable Saltarin

    Paquetes Recreativos

    Paquetes Recreativos Basicos
    Paquetes Recreativos Especiales

    Chiquy Baby
    La Mision del Pirata
    Paquete de Princesas
    Mini Feria Inflable
    Fiesta Vaquera

    Paquetes Recreativos Personalizados

    Sonido y Luces
    Personajes Infantiles
    Decoracion
    Contactenos

    Responder
    • Jose Aguilar dice:

      23/01/2014 a las 22:32

      Me parece que ya lo has podido arreglar ya que lo veo en linea

      Responder
14. Lennin dice:

    12/01/2014 a las 1:21

    EXCELENTE EL MEJOR QUE PUDE CONSEGUIR Y RESOLVI CON ESTE, GRACIAS POR COMPARTIR

    Responder

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre