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/AVvXsEgJAm3t89rO9oqrhJ4QKVKafM2Vn_84UGEMqevSIHgUXN4TJI106jZMjXezOrEAz1kTSBSpBJOFLSLdCkg0e2c2L_vqK1n6IxKaoPjXe829uuHOzoe27hvzTqJIY7tVVB2V8Ya6IRclcXQ/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 comments:
Post a Comment