Men?? vertical con subpesta??as

  • junio 12, 2011
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.


Men?? vertical para blog blogger
  •  


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??as
———————————————– */
#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!important;
top:-31px;
}
#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 */
}

Ahora entra en Dise??o | Elementos de la p??gina | A??adir un gadget | HTML/Javascript y ah?? pega lo siguiente:

<div id=»menuvertical»>
<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>

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:

<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>
<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 es un men?? fuera de lo normal pero s?? es bastante ??til para organizar los enlaces del blog.



Fuente

No Comments Found