Menú horizontal desplegable 2 columnas para blogger 2024


Tomado gentilmente de Ciudad Blogger
Hoy tenemos un menú para tu blog de blogger con estilo bastante especial el mismo es desplegable y fácil de incorporar un detalle exclusivo es que en sus subpestañas se despliega en dos columnas lo cual hace que la casilla no se extienda tanto para esta subpestaña.



Veamos un DEMO aquí mismo: 


¿Cómo ponerlo?


1. Lo primero será ingresar a Edición HTML allí buscamos el siguiente fragmento ]]></b:skin> y justo antes pegaremos lo siguiente: 
/* Menú horizontal con subpestañas en dos columnas
----------------------------------------------- */
#toppic {
width:940px; /* Ancho del menú */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Ancho del menú */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Color del texto de las pestañas */
}
#top a:hover {
background:#2f558b; /* Color de las pestañas al pasar el cursor */
color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
}
#top a.trigger {
/* Flecha */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGwT4s0Fz5DPVtNu3Tn-sdmA7EKTRh-Trc6xx0whD0uqcdPCYitJm8Ue7LPKMHR1rCmn9-a8K_seBRzIvG4INDoo2AmPwDLYD0upJRkOYsYBT3alOn_VMMcMCm6JntniuzCZMwewSODs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Ancho de cada subpestaña */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Color del texto de los submenús */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Color del texto de los submenús al pasar el cursor */
}
2. Ahora vamos a Diseño y añadimos un Gadget HTML/Javascript en dicho espacio pegaremos el siguiente código: 
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a class='trigger' href='#'>Pestaña 3</a>
<ul>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
<li><a href='URL del enlace'>Pestaña 3.5</a></li>
<li><a href='URL del enlace'>Pestaña 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 5</a>
<ul>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
<li><a href='URL del enlace'>Pestaña 5.4</a></li>
<li><a href='URL del enlace'>Pestaña 5.5</a></li>
<li><a href='URL del enlace'>Pestaña 5.6</a></li>
<li><a href='URL del enlace'>Pestaña 5.7</a></li>
<li><a href='URL del enlace'>Pestaña 5.8</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 6</a></li>

</ul>
<br class='clearit'/>
</div>
</div>
3. Y listo hasta aquí nuestro menú deberá estar funcionando perfectamente en nuestro blog.

Explicación colores:

- En el primer código, lo que tenemos en verde esmeralda, son los comentarios frente al parámetro CSS que puedes modificara a tu gusto.
- Lo que tenemos en naranja es donde irá el link o URL al cuál llevará dicho sección del menú ¡Fácil!
- Lo que tenemos en color Rojo es el nombre de la pestaña el cl llevará. 


Es todo en este post, hasta la próxima ;)

17 comentarios:

  1. Hola, logré que se vea en móvil, pero no es responsive y no se ajusta al ancho de la pantalla. Hay manera de arreglarlo?

    ResponderBorrar
    Respuestas
    1. Hola RUT lamento la tardía respuesta.

      Pero para arrglarlo hace falta dominar el código CSS para volver adaptativo lo cual si no tienes conocimientos en el manejo del lenguaje es díficl lograrlo.

      Saludos,

      Borrar
  2. Hola! Muchisimas gracias por el aporte!!! Es el único menú con sub menúas que me ha funcionado!!! :) Te hago una consulta: ¿ cómo cambio el color de fondo de las pestañas? (el azul) Porque entiendo que no hay modo de que el recuadro desaparezca y como pestaña solo queden las palabras verdad? (Inicio, nosotros, etc) De nuevo: ¡ muchas gracias!

    ResponderBorrar
    Respuestas
    1. Hola Utopía, en esta línea background-image: -moz-linear-gradient(top, #317FB8, #385D96);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));

      modificando el color HTML #317FB8 podrás hacerlo.

      Saludos,

      Borrar
  3. ¡ Muchísimas gracias! No solo me solucionaste el inconveniente sino que te tomaste el tiempo para responder. Un placer.

    ResponderBorrar
  4. Millones de gracias x el aporte!! hace mas de un mes que estoy con esto y es la primera vez que me funciona!!
    una consulta, el menu esta de izquierda a derecha, como puedo cambiarlo para que sea de derecha a izquierda?

    gracias!!!

    ResponderBorrar
    Respuestas
    1. Hola Caramelo ¿Ya lo implementaste en tu blog? puedes compartirme la URL para ver a que te refieres con exactitud.

      Saludos,

      Borrar
  5. gracias Andres por responder!
    te mando el url
    https://carameloandmore.blogspot.com/
    el blog esta vacio ya que estaba tratando de poner el menu en otro blog y me hice un lio terrible. Si logras ayudarme de como poner el menu de derecha a izquierda, voy a poder adelantar con los 2 blogs :)

    Gracias!!!

    ResponderBorrar
  6. otra pregunta, volvi a hacer los pasos en el otro blog
    https://diy-ididit.blogspot.com/

    aca ya no me despliegan los submenus (seguro por algo que hice antes pero no lo logro ver.
    si podes ayudarme te lo agradeceria mil!!

    Gracias!!

    ResponderBorrar
  7. Hola como puedo añadirle mas columnas osea 3 o 4
    espero tu ayuda amigo

    ResponderBorrar
    Respuestas
    1. Hola TeamDroid, más columnas en el menú o en los sub menú que tiene cada texto del menú.

      Quedo pendiente,

      SAlu2,

      Borrar
  8. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  9. Hola,
    Me gusta mucho el trabajo que has hecho. Es fácil a entender :)
    Me gustaría saber si tienes algun otro post con
    - submenus uno por línea
    - y donde los submenus tienen otros submenus

    Muchas gracias.

    ResponderBorrar
    Respuestas
    1. Hola Krisztina, De momento no tengo un artículo con lo que mencionas recuerda que puedes seguir el blog.

      Saludos,

      Borrar

ESTAMOS EN: