Men? horizontal con subpesta?as y buscador integrado

El siguiente men? est? hecho ?nicamente con CSS, es un men? horizontal con subpesta?as, y del lado derecho tiene un buscador redondeado.

Es un men? pr?ctico para los que no requieren de men?s muy complejos o prefieren no usar uno que requiera scripts y/o demasiadas im?genes, adem?s, la instalaci?n y personalizaci?n es bastante sencilla, y por si fuera poco es bastante funcional, ya que al tener el buscador integrado puedes tener dos elementos en una misma ?rea.

Puedes verlo funcionando en este blog de pruebas, si usas el buscador escribe la palabra y presiona ENTER.

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.

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 buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del men? */
height:35px;
padding-left:14px;
background:#333333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tama?o de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submen? */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOU5o3nvDdH4bR1m_uMt-2x8kAdaPqTj2fIFYImFjeicvY6i1uZZaZVwQc8N4sEgnFN5CouBk9TkCxwQ2GXX1-v1QQBbEOzlyC3T5_4alkTZcgOc3y41V-jxFuT2ZYrNBhJHDCs9pCJA/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pesta?a */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pesta?as al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submen? */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submen? */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submen? */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpesta?as */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpesta?as al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#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;
}

Luego entra en la secci?n de Dise?o, y en un elemento HTML/Javascript pega la estructura del men?:

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Pesta?a 1</a></li>
<li><a href="#">Pesta?a 2</a>
<ul>
<li><a href="URL del enlace">Pesta?a 2.1</a></li>
<li><a href="URL del enlace">Pesta?a 2.2</a></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>
</ul>
</li>
<li><a href="#">Pesta?a 3</a>
<ul>
<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><a href="#">Pesta?a 4</a>
<ul>
<li><a href="URL del enlace">Pesta?a 4.1</a></li>
<li><a href="URL del enlace">Pesta?a 4.2</a></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>
</ul>
</li>

</ul>


<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></div>

Agrega las URLs de los enlaces donde se indica as? como el nombre de tus pesta?as.

En el primer c?digo puedes ver las ?reas que se pueden personalizar tales como el color, etc.

La apariencia redondeada del ancho de todo el men? tambi�n es CSS, as? que si usas un navegador antiguo no se ver?n esos bordes.

Si quisieras agregar otra pesta?a entonces a?ade antes del ?ltimo </ul> en color azul una l?nea como esta:

<li><a href="URL del enlace">Pesta?a 5</a></li>

Si quisieras que �sta tenga submen?s entonces el c?digo que deber?s poner es este:

<li><a href="#">Pesta?a 5</a>
<ul>
<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>
<li><a href="URL del enlace">Pesta?a 5.4</a></li>
</ul>
</li>

Sin embargo, se recomienda no poner muchas pesta?as, ya que si se excede entonces las pesta?as se mostrar?n en un segundo rengl?n.

Y eso es todo, ?apoco no fue sencillo?