Menú horizontal con buscador expandible

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 eneste 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? ;)

ATENCIÓN: Si usas una plantilla original de Blogger primero necesitas seguir los pasos deesta entrada, de lo contrario el menú podría no verse o funcionar correctamente.

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/AVvXsEieuX7VZ6WqQ8KPwHZd7QWmWyBd1xqlEB_bM7B6BVWzXxikpB4gxjCOH6De5AXIvHAd0rip-iHRpZIjKZ_tp_VFW3Kbj1J4swH_bVP030b9dND-HHQvzG7kWAav7gyQHBI87llX5c5J9TMj/) 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/AVvXsEieuX7VZ6WqQ8KPwHZd7QWmWyBd1xqlEB_bM7B6BVWzXxikpB4gxjCOH6De5AXIvHAd0rip-iHRpZIjKZ_tp_VFW3Kbj1J4swH_bVP030b9dND-HHQvzG7kWAav7gyQHBI87llX5c5J9TMj/) 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/AVvXsEixd2wCbtU15wKtO-hn-gC8ZYV7QAoQKpzEvzZyZn4J6Va0WFDJkQThnt9SAYgQVRMWXjttFVL8UOzgTc-mbT0fAz5kXSvAP7BewBJ0OwBiHrkFccDP7nR731DAvcu7NjmrjgtyXk0QlYk/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 == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' 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:

<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.