Hay otros que tienen aún subpestañas de subpestañas, pero son mucho más complicados y generalmente se comenten errores, por eso por ahora les voy a dejar el que tengo colocado aquí por si les gusta y quieren probarlo.
Les aseguro que hace muchísimo más fácil la navegación por el sitio, ahorrando incluso el espacio que pueden llevar las etiquetas, salvo que quieras incluir etiquetas que no figuren en el menú, como yo que las tengo en una nube en la sidebar.
Para colocar este menú debes hacer lo siguiente:
- Ve a Diseño - Html y (sin expandir los artilugios) busca ]]></b:skin>
- Arriba de esto pega el siguiente código
/* MENU DOS (Robs)
----------------------------------------------- */
#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}
#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
- En la parte señalada en negrita puedes efectuar los cambios de tamaño. Por defecto está configurado así width: 873px pero puedes cambiarle por el largo de píxeles que desees o sustituír el 873px por 100% con lo cual el largo se ajustará al espacio del lugar donde lo coloques
- Ahora guarda los cambios luego de la vista previa y vuelve a Diseño para agregar el gadget correspondiente que empezarás a configurar. Esta es la parte más difícil, pero con un poco de atención no te confundirás.
<li><a href="URL" title="">PESTAÑA3</a>
<ul>
<li><a href="URL" title="">SUB-PESTAÑA3</a>
</li>
<li><a href="URL" title="">SUB-PESTAÑA3</a>
</li>
</ul>
</li>
<li><a href="URL" title="">PESTAÑA4</a>
<ul>
<li><a href="URL" title="">SUB-PESTAÑA4</a>
</li>
<li><a href="URL" title="">SUB-PESTAÑA4</a>
</li>
</ul>
</li>
<li><a href="URL" title="">PESTAÑA5</a>
<ul>
<li><a href="URL" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="URL" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="URL" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="URL" title="">SUB-PESTAÑA5</a>
</li>
</ul>
</li></ul></div>
- Donde dice url debes colocar la dirección de la etiqueta correspondiente
- Entre las comillas de "title" puedes colocar un texto que se verá al pasar el cursor, aunque si no lo haces no afecta en nada.
- Donde dice Pestaña y Sub pestaña colocas el nombre o título que le quieres dar a esa parte del menú.
- Por ejemplo: en el menú de este blog un ejemplo de pestañas sería Tráfico web, y de subpestañas Seo y Redes Sociales
- El contenido de las pestañas que no van a incluir subpestañas, va incluido entre <li> y </li>
<li><a href="URL DEL BLOG" title="Inicio">INICIO</a></li>
- El contenido de la pestaña que incluirá subpestañas irá incluido entre <li> y <ul> a continuación estarán las subpestañas (cada una incluida entre <li> y </li>) y para cerrar terminaremos con </ul> </li>
<li><a href="URL" title="">PESTAÑA3</a><ul>
<li><a href="URL" title="">SUB-PESTAÑA3</a></li>
<li><a href="URL" title="">SUB-PESTAÑA3</a></li>
</ul>
</li>
Con estas pautas ya puedes comenzar a armar tu menú. El código que te presento como gadget html es un código ejemplo que puedes retocar con los dos puntos anteriores en cualquier momento, tanto si no se ajusta exactamente a tu blog como si agregas una nueva sección después de un tiempo. El contenido de la plantilla no varía nunca, sólo el del gadget. Cualquier duda me consultas.
muy bueno y facil de hacer
ResponderEliminar