Blogging Tips: 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/AVvXsEhp3lHWIVZoUfMifFildx28JhXif1B5fUUEx-JGcu6TU9Ph1M6zgvpiD7vGzls6EEIdu5wLKZiRpjJ593j0YQJbtn5nI_9F-m2VYBsWzQtJgXo7E9EypOZZDYq60Wv5qtzaX19hitxoqpJo/);
}
#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/AVvXsEhp3lHWIVZoUfMifFildx28JhXif1B5fUUEx-JGcu6TU9Ph1M6zgvpiD7vGzls6EEIdu5wLKZiRpjJ593j0YQJbtn5nI_9F-m2VYBsWzQtJgXo7E9EypOZZDYq60Wv5qtzaX19hitxoqpJo/) 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/AVvXsEj78Y9xGD4xg3IIlafOigM86RwDzkmdTIqwgUY-d5P67fAj1RE4rbw_ljRpNVYNilkJwN7sE_98yGeTWtqn-WeCSGxPwujVWfArWJ_ue6vjDTr7UyMOXuvsw4s1J53jiO-kGtBgxO99BdR-/) no-repeat right top;
}
#nav li a.top_link:hover {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat;}
#nav li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWQ723pFbm8kK4YDvdKDdGSCZKIWIS5UFExFnJctZ_3ST_0CKvh7w-gRV05B3SVXgFdHC_zmH1WNY0DOS_qdTI4irl0wn12vWz48XxzlT9bcUYBX8DnPhPzAHPrHLDuzo-y0rUMrQ5Usk/) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat;}
#nav li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWQ723pFbm8kK4YDvdKDdGSCZKIWIS5UFExFnJctZ_3ST_0CKvh7w-gRV05B3SVXgFdHC_zmH1WNY0DOS_qdTI4irl0wn12vWz48XxzlT9bcUYBX8DnPhPzAHPrHLDuzo-y0rUMrQ5Usk/) 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/AVvXsEhuF77fGGhxThBZbFWhOiVv9HlZmcoPxnEGVu1aJ4aT-D5LYnoisED5hvMZg0QcvK6U6GDF62a0lrdmeyIP1AfAMRmOuXKUvSSzKyQgHS0BzS4qw0WOeNAgmx2nCsVp6jKK9hQ3PBVVmOZN/) 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/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 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.

Blogging Tips

Friday, April 8, 2011

Men? horizontal con subpesta?as hecho con CSS

No comments:

Post a Comment