Tutorial {Menú horizontal con subpestañas y buscador integrado}

Hola bloggeros, la semana pasada y ayer no subi tutorial pero hoy les traigo uno muy útil, y es un menú horizontal desplegable/subpestañas y con buscador, OJO, no en todos los blogs funcionan todos los menús... así que si este no os sirve lo lamento mucho pero tendrán que buscar en otro lado, de igual manera yo al paso del tiempo subire diferentes menús (horizontales y verticales). Así que espero y que les funciones.

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

(ACLARO: El tutorial es de ciudad blogger y os dejo una entrada en donde esta persona os enseña a modificar su plantilla para utilizar cualquier menú; entrada: LINK )

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:

PEGAS ESTO:

/* 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/AVvXsEjU7NSkjzRE54iFotAf3tIwwu_PbLPYxSRgYmxTQjbD-zAFpmIgR-slsn9sEN5n7ulOrQutgjprkwMXwLgybenqczVG7qU4SRtUHT3s3xTiSNjJv99IMebqNwWkvYpm4ZQm5GGowP6wSE4/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/AVvXsEhDfspwL349a91BnW0_N1ySxS9PAn32ZRI8bf1Gz1Qtxz_N7w-b553W1P7YFGZpf-lc0aNF2AK6hcJ0s9PVWiQM4Tiw5fIyXtXac-u2ybZNYKB8li5Y5qnaCV3V7oMMnECqi6OOHGzfkuY/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>

En el primer codigo que te di... puedes cambiar los atributos del color, ancho, pixeles (px), estilo de borde, etc..

También puedes pegar el primer código de la siguiente manera:

OJO: añadir Css esta hasta al final del menu (paso 4) por lo tanto no te vuelvas loc@ si no lo ves al inicio.

Das aplicar y listo, ya tienes tu menu.!!

Espero y te sirva y que te haya gustado el tutorial!! no olvides dejarme en los comentarios lo que te parecio y si os quieres un tutorial en especial.

Besos:* Nos leemos luego ^^