El men? horizontal con buscador integrado parece ser uno de los favoritos por muchos blogueros. Esta es una variante, se trata de un men? horizontal con subpesta?as y que incluye un buscador que se expande al pasar el cursor sobre �l cubriendo casi todo el ancho del men?. Puedes verlo funcionando en este blog de pruebas.
Este men? est? hecho ?nicamente con CSS por lo que no tendr?s que preocuparte por la compatibilidad con librer?as de scripts, ni con navegadores pues funciona bien con todos los navegadores en sus ?ltimas versiones.
El efecto expandible lo conseguimos tambi�n con CSS, y es simple, s?lo establecemos que el ancho del buscador sea de 0px en su estado normal, y luego aumentamos el ancho al pasar el cursor sobre �l. Juego de ni?os, ?no? ;)
El efecto expandible lo conseguimos tambi�n con CSS, y es simple, s?lo establecemos que el ancho del buscador sea de 0px en su estado normal, y luego aumentamos el ancho al pasar el cursor sobre �l. Juego de ni?os, ?no? ;)
Para poner este men? en tu blog entra en la Edici?n HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos CSS:
#menuBuscador {
position: relative;
width: 95%; /* Ancho del men? */
height: 40px;
padding-left: 14px;
background: #CC2A41; /* Color de fondo */
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top {display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:40px;
line-height:40px;
color:#fff; /* Color de los t?tulos */
text-decoration:none;
font-size:14px; /* Tama?o de la fuente */
padding:0 0 0 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;}
.menusearch li:hover {position:relative; z-index:2;}
.menusearch ul,
.menusearch li:hover ul ul,
.menusearch li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul ul,
.menusearch 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;}
.menusearch li:hover ul.sub {
left:0;
top:40px;
background:#351330; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menusearch li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menusearch li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#fff;
font-size:14px;
text-decoration:none;
}
.menusearch li ul.sub li a.fly {
/* Color de fondo del submen? */
background:#351330 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat;}
.menusearch li:hover ul.sub li a:hover {
background:#CC2A41; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#CC2A41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat; color:#fff;}
.menusearch li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #351330; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search input[type="text"] {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbsVrUULfEpYy4wnUVKbQhk_qMWOSJrW3ZhaX8EeAl2ftpT_HENDHwdyCxVRmw6Fv0hj8Bdr_b1gWuYnUHHT3-lD778aF8baibsfNOG_bHDUZSrFQXc3rIlsHbkPugj8tu2Jzbj-wyxk/s32/buscar.png) no-repeat center left;
position: absolute;
right:3px; /* Distancia del buscador desde la derecha */
outline:none;
font-size: 13px; /* Tama?o de la fuente del buscador */
color: #ccc;
width: 0;
margin: 0;
padding: 12px 0 12px 35px;
z-index: 1000;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */
Luego en Dise?o crea un gadget HTML/Javascript y ah? pega lo siguiente:
<div id='menuBuscador'>
<ul class='menusearch'>
<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>
</ul>
<!-- Buscador -->
<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>
</div>
Ya s?lo deber?s guardar los cambios. El primer c?digo son los estilos, ah? ver?s en color verde d?nde cambiar los colores, fuentes, etc., o sea, el aspecto del men?. En color rojo van las URLs y los nombres de tus pesta?as y subpesta?as.
Antes de <!-- Buscador --> puedes agregar m?s pesta?as. Por ejemplo: si quisieras a?adir otra pesta?a simple, agrega una l?nea como esta:
Antes de <!-- Buscador --> puedes agregar m?s pesta?as. Por ejemplo: 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>
<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 naranja 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>
Eso es todo, menos complicado de lo que parece. Sin duda es un men? que hay que considerar, no s?lo por lo atractivo del buscador, sino por la posibilidad de agregar subpesta?as y sin necesidad de usar ning?n script. Adem?s que podemos personalizarlo tanto como queramos.
