Hace alg?n tiempo vimos el men? horizontal con subpesta?as y buscador integrado y desde eso me han preguntado c?mo hacer ese mismo men? pero de varios niveles, es decir, que las subpesta?as del men? tambi�n tengan subpesta?as. El men? a continuaci?n tiene esa caracter?stica, adem?s de conservar el buscador dentro del men?.
Los estilos redondeados en los submen?s se han quitado por cuestiones est�ticas, pero ya saben que cualquiera de estas moner?as pueden personalizarse a consideraci?n y gusto propio.
El men? puedes verlo en este blog de pruebas.
Para poner este men? horizontal con submen?s en tu blog entra en la Edici?n HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:
/* Menu horizontal con buscadorLuego entra en Dise?o y en un gadget HTML/Javascript pega lo siguiente:
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del men? */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tama?o de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu 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;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submen? */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHziyOXb2qNmFiwj1z3CaPq15Zy4OcXEXDFQS9FKC3s9XWoY8Kl-0wOY7vLBwu0kghBcWhIcPteokfdCOxoHeJzJpO1SaNW4EUpFnTOqZS3lqUhYPp2sdIeWQ3tE-T6q5giNA4yP3DByY/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
<div id='menuWrapper'>Guarda los cambios y listo. En color verde puedes ver las ?reas para cambiar los colores.
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pesta?a 1</span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 2</span></a><ul class='sub'><li><a class='fly' href='#'>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 class='fly' href='#'>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 class='fly' href='#'>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 class='fly' href='#'>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 class='top_link' href='#'><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 class='top_link' href='#'><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 class='fly' href='#'>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 class='top_link' href='#'><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>
<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>
</li>
</ul>
</div>
Antes de <!-- Buscador --> puedes agregar m?s pesta?as si lo deseas.
Si quisieras a?adir otra pesta?a simple, agrega 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>Y si quisieras que una de las subpesta?as tuviera otras subpesta?as entonces elimina una l?nea como la que est? en color naranja y c?mbiala por un c?digo como este:
<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>
<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>
Con esta variaci?n del men? podemos agrupar m?s enlaces y categor?as en poco espacio, y que adem?s, al conservar el buscador dentro del men? hace que sea un men? pr?ctico, compacto y ?til.
No comments:
Post a Comment