Menu

Menu Desplegable Con Buscador Integrado

Lo primero es entrar en Diseño | Edición de HTML y SIN expandir los artilugios busca esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en color rojo.
Es posible que tengas muchas partes como la que está en rojo, elimina todas las que encuentres.

Luego busca esta parte en la plantilla:

/* Tabs
----------------------------------------------- */

Y elimina todo lo que haya dentro de ello. Por ejemplo, en la plantilla Awesome Inc. eliminarías todo lo que está en color verde

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Ya eliminado, en su lugar agrega lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

DESPUES DE HABER HECHO EL ANTERIOR PROCEDIMIENTO HAGAN ESTE.

Menú horizontal con subpestañas y buscador integrado

19 de abril de 2012 | Publicado por El Potro | 590 comentarios

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/AVvXsEjqucZHTScuQFHdikDIq-XtF8VzScfeXAf6hwIRLm3VtNxVXCnEu5FILmZrXh737aA3KsEamIRFDQ-mJY1uVUdFo3zxuf4Q3hdi7jYVE0dsemy3-IHY_9-FzK-kD-OBsO3dGY_sitHZZ3o/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/AVvXsEjFFuXRliNhJZBlK7TRVN1lmEueB2_S_2GUAMz5H2z5bviQMgzBYl4vrw4kXO2Xb7Tol1-tlWmcrQQMNUsdWinyDQXqn5bfgq2uuzj6NLMDWn0EYoiF6ZLJ_lSm61bo05P8Ps1_-9eJ0kY/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?