Jueves, 12 de abril de 2012
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  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 ésta página de pruebas:

El proceso puede parecer complicado, pero la verdad es muy sencillo.

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.

NOTA: Para buscar en Edición de HTML más fácilmente, utliza las teclas ctrl y F al mismo tiempo. Aparecerá una ventana en donde pegas el código que buscas.
Primero entramos en Diseño | Edición de HTML   (búsca ]]></b:skin> con ctrl y f) 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: #87A18F url();
}
#nav li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:#87A18F url() right top;
}
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:#87A18F url() no-repeat right top;
}
#nav li a.top_link:hover {color:#fff; background: #87A18F url() no-repeat;}
#nav li a.top_link:hover span {background:#87A18F url() no-repeat right top;}
#nav li a.top_link:hover span.down {background:#87A18F url() no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background:#87A18F url() no-repeat;}
#nav li:hover > a.top_link span {background:#87A18F url() no-repeat right top;}
#nav li:hover > a.top_link span.down {background:#87A18F url() 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://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcqtIs9I/AAAAAAAABSo/DM1oojAqk5s/arrow.gif) 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://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 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í os 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"><span>Pestaña 1</span></a></li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 2</span></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"><span class="down">Pestaña 3</span></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"><span class="down">Pestaña 4</span></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"><span class="down">Pestaña 5</span></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"><span>Pestaña 6</span></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"><span>Pestaña</span></a></li>

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

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></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? Si deseas, puedes cambiar el color de cada botón


Publicado por lauraguilaramirez @ 21:33
Comentarios (0)  | Enviar
Comentarios