Consejos Blogger: Menú horizontal con subpestañas hecho con CSS

El siguiente menú es un menú horizontal con subpestañas llamado Professional dropdown y es creado por Stu nicholls. Está hecho a base de CSS y tiene un aire de elegancia y profesionalismo con la posibilidad de agregar subpestañas dentro de las subpestañas por lo que lo hace un menú de multiniveles bastante práctico.
Puedes verlo funcionando en el ejemplo de abajo.

Aunque agregarlo al blog pueda parecer complicado la verdad es que es bastante sencillo, así que empecemos y veamos cómo se hace.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Primero entramos en Diseño | Edición de HTML y antes de ]]></b:skin> pega los estilos:

#nav {
padding:0;
margin:0;
list-style:none;
height:28px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#nav li.top {display:block; float:left;}
#nav li a.top_link {
display:block;
float:left;
height:28px;
line-height:27px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwjnFqukaCcK1sCtkfXP8pb1JdD5RgQge4Q1YESD3pUrVM8X_Axpz5lwxRKadEWy4rvDHOiO0vk9-PLgmOhbUhp2aCLlCfDXeL6XI57V2Hz7uyYb2jnhzbg78PVHS-LA9LeKUmO5NflP9/);
}
#nav li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwjnFqukaCcK1sCtkfXP8pb1JdD5RgQge4Q1YESD3pUrVM8X_Axpz5lwxRKadEWy4rvDHOiO0vk9-PLgmOhbUhp2aCLlCfDXeL6XI57V2Hz7uyYb2jnhzbg78PVHS-LA9LeKUmO5NflP9/) right top;
}
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRUitalC5hWHINJQbGlGzNgjQNLoqiOZ9CTA6qUT-mKxgF00DbcaoDx2maBHbKGgut8Grs4hF_ntsR20WsOqwMS0BN0T8W_VR4VaWjldD67dasLSRsWU-wGW2jRXypBrYtEsju3xgY-0s/) no-repeat right top;
}
#nav li a.top_link:hover {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR6UlKG8jaPT0YSOneUKfIs5LcUqTtTYyZvSlJOo2xUOE4CELY9j_yWZZbEYMFGQ6-ZpwIXeXIzNO_YuVf2piebMS6_s4_kx7g0BQZ_Tjss4NP6WrnNJNHmcGxvhUlBB1x4uae6zRATph/) no-repeat;}
#nav li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR6UlKG8jaPT0YSOneUKfIs5LcUqTtTYyZvSlJOo2xUOE4CELY9j_yWZZbEYMFGQ6-ZpwIXeXIzNO_YuVf2piebMS6_s4_kx7g0BQZ_Tjss4NP6WrnNJNHmcGxvhUlBB1x4uae6zRATph/) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOosh2z9hlnEQStRQ8za0W0I8jbyB0qI621KZFiCpEcuM0WrIJ1RLb6J_CZrsquLykC0ZJgLhjyNnbNep9fXzNV64A35LpidyMswZtUD25fsh425b-2uGjMyCi51o1PrYre0g1vfqpw5A/) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR6UlKG8jaPT0YSOneUKfIs5LcUqTtTYyZvSlJOo2xUOE4CELY9j_yWZZbEYMFGQ6-ZpwIXeXIzNO_YuVf2piebMS6_s4_kx7g0BQZ_Tjss4NP6WrnNJNHmcGxvhUlBB1x4uae6zRATph/) no-repeat;}
#nav li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR6UlKG8jaPT0YSOneUKfIs5LcUqTtTYyZvSlJOo2xUOE4CELY9j_yWZZbEYMFGQ6-ZpwIXeXIzNO_YuVf2piebMS6_s4_kx7g0BQZ_Tjss4NP6WrnNJNHmcGxvhUlBB1x4uae6zRATph/) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOosh2z9hlnEQStRQ8za0W0I8jbyB0qI621KZFiCpEcuM0WrIJ1RLb6J_CZrsquLykC0ZJgLhjyNnbNep9fXzNV64A35LpidyMswZtUD25fsh425b-2uGjMyCi51o1PrYre0g1vfqpw5A/) no-repeat right top;}

#nav li:hover {position:relative; z-index:200;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub{
left:0;
top:28px;
background: #fff;
padding:3px;
border:1px solid #3a93d2;
white-space:nowrap;
width:90px;
height:auto;
z-index:300;
}
#nav li:hover ul.sub li{
display:block;
height:20px;
position:relative;
float:left;
width:90px;
font-weight:normal;
}
#nav li:hover ul.sub li a{
display:block;
font-size:11px;
height:20px;
width:90px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
}
#nav li ul.sub li a.fly
{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC33Ww9uZFsZIX1ajfifXG3aR9fjkmTxn2ue3r_X-xclKWivmTFuh8cEdzdjjuwCaZ9H5DgOuc9yBpJB90GjbAZGcYIBaL5N8LW1pXn3XvU_4SSyLYcRf3D5n2UYJc9qkOPbQLxWItV0fV/) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxacb0vA2IhsqDqe7LXdq0974NNqgL07iB-BjuUwr-qkmTOucW0Gl2xQIxhiZdwRWQLyiAupLdSCsp0yeZenNTgBu74_5UTwl-7k9xSokkyBi3iXOeADDtbIUu_xf6XEOTrhpckIeNG6j/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxacb0vA2IhsqDqe7LXdq0974NNqgL07iB-BjuUwr-qkmTOucW0Gl2xQIxhiZdwRWQLyiAupLdSCsp0yeZenNTgBu74_5UTwl-7k9xSokkyBi3iXOeADDtbIUu_xf6XEOTrhpckIeNG6j/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}

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

<ul id="nav">
<li class="top"><a href="URL del enlace" class="top_link">Pestaña 1</a></li>

<li class="top"><a href="#" class="top_link">Pestaña 2</a><ul class="sub"><li><a href="#" class="fly">Pestaña 2.1</a><ul>
<li><a href="URL del enlace">Pestaña 2.1.1</a></li>
<li><a href="URL del enlace">Pestaña 2.1.2</a></li>
<li><a href="URL del enlace">Pestaña 2.1.3</a></li>
</ul>
</li>
<li class="mid"><a href="#" class="fly">Pestaña 2.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.3</a></li>
<li><a href="#" class="fly">Pestaña 2.2.4</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.4.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 2.2.5</a></li>
<li><a href="#" class="fly">Pestaña 2.2.6</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.6.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</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="top"><a href="#" class="top_link">Pestaña 3</a>
<ul class="sub">
<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>
</ul>
</li>

<li class="top"><a href="#" class="top_link">Pestaña 4</a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="#" class="fly">Pestaña 4.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.2.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2.2</a></li>
<li><a href="URL del enlace">Pestaña 4.2.3</a></li>
<li><a href="URL del enlace">Pestaña 4.2.4</a></li>
<li><a href="URL del enlace">Pestaña 4.2.5</a></li>
<li><a href="URL del enlace">Pestaña 4.2.6</a></li>
</ul>
</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 class="top"><a href="#" class="top_link">Pestaña 5</a>
<ul class="sub">
<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>
</ul>
</li>

<li class="top"><a href="URL del enlace" class="top_link">Pestaña 6</a></li>

</ul>

Ya sólo agrega la URL de los enlaces y el nombre de las pestañas donde se indica.
Si quisieras agregar otra pestaña simple sólo añade antes del último </ul> una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link">Pestaña</a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link">Pestaña</a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color verde y cámbiala por un código como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Y eso es todo. Como dije antes, la instalación es sencilla pero puede parecer complicado cuando se quieren agregar las subpestañas pero una vez entendiendo la estructura del menú será pan comido.
¿Y el color de fondo? El color del menú así como de las subpestañas está hecho a base de imágenes así que quien quiera cambiarle de color tendrá que editar todas las URLs de las imágenes que se encuentran en el primer código.

Consejos Blogger

viernes, 8 de abril de 2011

Menú horizontal con subpestañas hecho con CSS

No hay comentarios:

Publicar un comentario

Datos personales