Este es un men? vertical con subpesta?as hecho s?lo con CSS, no tiene nada de Javascript o de alguna librer?a, as? que para aquellos que prefieren las cosas simples esta es una buena opci?n para organizar las etiquetas del blog o cualquier enlace.
Colocarlo es bastante sencillo, s?lo entra en Dise?o | Edici?n de HTML y antes de
]]></b:skin> pega los estilos siguientes:
/* Men? vertical con subpesta?asAhora entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript y ah? pega lo siguiente:
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pesta?as */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pesta?a */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pesta?as */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top: -1px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpesta?as */
color: #fff; /* Color del texto subpesta?as */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpesta?as */
color: #000; /* Color del texto al pasar el mouse subpesta?as */
}
<div id="menuvertical">Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pesta?a SIN subpesta?as entonces a?ade antes de </ul> una l?nea como esta:
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Pesta?a 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 1.1</a></li>
<li><a href="URL del enlace">Pesta?a 1.2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pesta?a 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 2.1</a></li>
<li><a href="URL del enlace">Pesta?a 2.2</a></li>
<li><a href="URL del enlace">Pesta?a 2.3</a></li>
<li><a href="URL del enlace">Pesta?a 2.4</a></li>
<li><a href="URL del enlace">Pesta?a 2.5</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pesta?a 3</a>
<ul>
<li class="primera"><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>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pesta?a 4</a>
<ul>
<li class="primera"><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>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Pesta?a 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 5.1</a></li>
<li><a href="URL del enlace">Pesta?a 5.2</a></li>
</ul>
</li>
</ul>
</div>
<li class="nivel1"><a href="URL del enlace" class="nivel1">Pesta?a 6</a></li>Si quieres agregar una pesta?a CON subpesta?as entonces a?ade igual antes de </ul> lo siguiente:
<li class="nivel1"><a href="#" class="nivel1">Pesta?a 6</a>No es un men? fuera de lo normal pero s? es bastante ?til para organizar los enlaces del blog.
<ul>
<li class="primera"><a href="URL del enlace">Pesta?a 6.1</a></li>
<li><a href="URL del enlace">Pesta?a 6.2</a></li>
<li><a href="URL del enlace">Pesta?a 6.3</a></li>
<li><a href="URL del enlace">Pesta?a 6.4</a></li>
</ul>
</li>
No comments:
Post a Comment