Este menú pertenece a la plantilla Johny Joss, es un menú horizontal en el que sus subpestañas se muestran en dos columnas y que además está hecho con CSS, sin nada de scripts.
La "ventaja" por así decirlo, es que las subpestañas al acomodarse en dos columnas no quedan muy largas, así que se verán ordenadas y con menos espacio a lo largo. Puedes ver un ejemplo aquí mismo:
Para poner este menú entra en la Edición HTML y antes de ]]></b:skin> pega los estilos CSS:
/* Menú horizontal con subpestañas en dos columnasAhora entra en Diseño, y en un elemento HTML/Javascript pega la estructura del menú:
----------------------------------------------- */
#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/AVvXsEhgzvJTFzvAdsIuLUQ4xUyRsMfHiDa-nQIrTVPuEx4UfH5FoHbj4fcRW_1_xgnbPeFEHwiv3Fs_XBFfVKKCuF7R8RtvhOTGoXZBROUS0a9gBJMBy_43d0TGFxt1bL9uTEug3kjPrcIPR2U/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 */
}
<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>
Cambia las URLs de los enlaces y de las pestañas donde se indica.
Si quisieras agregar más pestañas entonces añade antes del </ul> en color azul una línea como esta:
<li><a href='URL del enlace'>Otra pestaña</a></li>Y si quisieras agregar una pestaña con subpestañas entonces agrega esto:
<li><a class='trigger' href='#'>Otra pestaña</a>
<ul>
<li><a href='URL del enlace'>Pestaña 1.1</a></li>
<li><a href='URL del enlace'>Pestaña 1.2</a></li>
<li><a href='URL del enlace'>Pestaña 1.3</a></li>
<li><a href='URL del enlace'>Pestaña 1.4</a></li>
<li><a href='URL del enlace'>Pestaña 1.5</a></li>
<li><a href='URL del enlace'>Pestaña 1.6</a></li>
</ul>
</li>
En el primer código verás en las anotaciones en color verde el área de lo que se puede personalizar.
El color de fondo está hecho con gradientes CSS, #317FB8 es el color más claro y #385D96 el color más oscuro.
Si quisieras que las subpestañas se muestren en columnas de 3 entonces cambia el valor del
/* Ancho del contenedor de las subpestañas */ por 450px
/* Ancho del contenedor de las subpestañas */ por 450px
Cada pestaña tiene un ancho de 150px (ver la anotación en verde), por lo que si quisieras hacerlo más ancho tendrás que cambiar también el ancho del contenedor de las subpestañas, de lo contrario se mostrarán en una columna nada más.
No hay comentarios:
Publicar un comentario