07 enero 2013

Menú con subpestañas y buscador en varios colores

menu horizontal
Este menú esta realizado totalmente en CSS, con subpestañas y buscador incluido, no utliliza javascript por lo que su carga es rápida. Os lo dejo en varios colores, para que la integración en la plantilla sea lo más adecuado posible. Puedes ver funcionando el de color rojo en este blog de pruebas.

Al instalarlo en plantillas antiguas no debes tener problemas pero si tu fín es adaptarlo a una plantilla nueva, debes seguir estos pasos, (SOLO PLANTILLAS DEL DISEÑADOR):

1.- 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.
Puede que encuentres muchas partes como la que está en rojo, eliminala todas.
Luego busca esta parte:
/* Tabs----------------------------------------------- */
Y elimina todo lo que haya dentro de ello,(css) hasta la próxima apertura, que debe ser otra línea parecida a la anterior, por ejemplo:
/* 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;}
Una vez hecho lo anterior podremos agregar cualquier menú y estos se verán como deben verse y las subpestañas podrás desplegarse sin problema.

Ahora ya es hora de agregar el menú tanto para plantillas antiguas como del diseñador:
Entra en la sección de Diseño, y en un elemento HTML/Javascript pega la estructura del menú:
Color Gris Oscuro
<style>
#amor-menu, #amor-menu ul {
margin: 0;
padding: 0;
border-top:1px solid #ccc;
list-style: none;
}
#amor-menu:before,
#amor-menu:after {
content: "";
display: table;
}
#search-box{
width: 140px;
margin: 8px 0px 0px 0px;
}
#amor-menu:after {
clear: both;
}
#amor-menu{
width: 930px;
margin: 1px auto;
border: 3px solid #ccc ;
background:#2E2D2D;
}
#amor-menu li {
background:#2E2D2D;
float: left;
border-right: 1px solid #222;
position: relative;
}

#amor-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#amor-menu li:hover > a {
color: #fafafa;
}
*html #amor-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#amor-menu ul {
margin: 20px 0 0 0;
margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
}
#amor-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#amor-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
margin: 0; /*IE6 only*/
}
#amor-menu ul li {
float: none;
display: block;
border:1px solid #ccc;
line-height: 0; /*IE6 only*/
}
#amor-menu ul a {
padding: 10px;
width: 130px;
height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#amor-menu ul a:hover {
background-color: #C4C4C4;
}
</style>

<nav id="amor-menu-wrap">
<ul id="amor-menu">
<li><a href="http://www.amorsevillista.com">Amor Sevillista</a> </li>
<li>
<a href="URL-aquí">Categorias</a>
<ul>
<li>
<a href="URL-aquí">Crónicas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Previas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Noticias</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Videos</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL-aquí">Equipos</a>
<ul>
<li><a href="URL-aquí">Sevilla</a></li>
<li><a href="URL-aquí">Atlético</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Femenino</a></li>
</ul>
</li>
<li><a href="URL-aquí">Sobre Nosotros</a></li>
<li><a href="URL-aquí">Contacto</a></li> 


<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

</ul></nav>
Color Rojo Oscuro
<style>
#amor-menu, #amor-menu ul {
margin: 0;
padding: 0;
border-top:1px solid #ccc;
list-style: none;
}
#amor-menu:before,
#amor-menu:after {
content: "";
display: table;
}
#search-box{
width: 120px;
margin: 8px 0px 0px 0px;
}
#amor-menu:after {
clear: both;
}
#amor-menu{
width: 930px;
margin: 1px auto;
border: 3px solid #ccc ;
background:#620101;
}
#amor-menu li {
background:#620101;
float: left;
border-right: 1px solid #222;
position: relative;
}

#amor-menu a {
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#amor-menu li:hover > a {
color: #ccc;
}
*html #amor-menu li a:hover { /* IE6 only */
color: #343333;
}
#amor-menu ul {
margin: 20px 0 0 0;
margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
}
#amor-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#amor-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
margin: 0; /*IE6 only*/
}
#amor-menu ul li {
float: none;
display: block;
border:1px solid #ccc;
line-height: 0; /*IE6 only*/
}
#amor-menu ul a {
padding: 10px;
width: 130px;
height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#amor-menu ul a:hover {
background-color: #343333;
}
</style>
<nav id="amor-menu-wrap">
<ul id="amor-menu">
<li><a href="http://www.amorsevillista.com">Amor Sevillista</a> </li>
<li>
<a href="URL-aquí">Categorias</a>
<ul>
<li>
<a href="URL-aquí">Crónicas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Previas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Noticias</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Videos</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL-aquí">Equipos</a>
<ul>
<li><a href="URL-aquí">Sevilla</a></li>
<li><a href="URL-aquí">Atlético</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Femenino</a></li>
</ul>
</li>
<li><a href="URL-aquí">Sobre Nosotros</a></li>
<li><a href="URL-aquí">Contacto</a></li> 

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>



</ul>
</nav>
Color Azul
<style>
#amor-menu, #amor-menu ul {
margin: 0;
padding: 0;
border-top:1px solid #ccc;
list-style: none;
}
#amor-menu:before,
#amor-menu:after {
content: "";
display: table;
}
#search-box{
width: 120px;
margin: 8px 0px 0px 0px;
}
#amor-menu:after {
clear: both;
}
#amor-menu{
width: 930px;
margin: 1px auto;
border: 3px solid #ccc ;
background:#031C8A;
}
#amor-menu li {
background:#031C8A;
float: left;
border-right: 1px solid #222;
position: relative;
}

#amor-menu a {
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#amor-menu li:hover > a {
color: #ccc;
}
*html #amor-menu li a:hover { /* IE6 only */
color: #343333;
}
#amor-menu ul {
margin: 20px 0 0 0;
margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
}
#amor-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#amor-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
margin: 0; /*IE6 only*/
}
#amor-menu ul li {
float: none;
display: block;
border:1px solid #ccc;
line-height: 0; /*IE6 only*/
}
#amor-menu ul a {
padding: 10px;
width: 130px;
height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#amor-menu ul a:hover {
background-color: #343333;
}
</style>

<nav id="amor-menu-wrap">
<ul id="amor-menu">
<li><a href="http://www.amorsevillista.com">Amor Sevillista</a> </li>
<li>
<a href="URL-aquí">Categorias</a>
<ul>
<li>
<a href="URL-aquí">Crónicas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Previas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Noticias</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Videos</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL-aquí">Equipos</a>
<ul>
<li><a href="URL-aquí">Sevilla</a></li>
<li><a href="URL-aquí">Atlético</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Femenino</a></li>
</ul>
</li>
<li><a href="URL-aquí">Sobre Nosotros</a></li>
<li><a href="URL-aquí">Contacto</a></li> 

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>
</ul>
</nav>
Color Verde
<style>
#amor-menu, #amor-menu ul {
margin: 0;
padding: 0;
border-top:1px solid #ccc;
list-style: none;
}
#amor-menu:before,
#amor-menu:after {
content: "";
display: table;
}
#search-box{
width: 120px;
margin: 8px 0px 0px 0px;
}
#amor-menu:after {
clear: both;
}
#amor-menu{
width: 930px;
margin: 1px auto;
border: 3px solid #ccc ;
background:#296A01;
}
#amor-menu li {
background:#296A01;
float: left;
border-right: 1px solid #222;
position: relative;
}

#amor-menu a {
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-align:center;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#amor-menu li:hover > a {
color: #ccc;
}
*html #amor-menu li a:hover { /* IE6 only */
color: #343333;
}
#amor-menu ul {
margin: 20px 0 0 0;
margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
}
#amor-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#amor-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
margin: 0; /*IE6 only*/
}
#amor-menu ul li {
float: none;
display: block;
border:1px solid #ccc;
line-height: 0; /*IE6 only*/
}
#amor-menu ul a {
padding: 10px;
width: 130px;
height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#amor-menu ul a:hover {
background-color: #7E7D7D;
}
</style>

<nav id="amor-menu-wrap">
<ul id="amor-menu">
<li><a href="http://www.amorsevillista.com">Amor Sevillista</a> </li>
<li>
<a href="URL-aquí">Categorias</a>
<ul>
<li>
<a href="URL-aquí">Crónicas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Previas</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Noticias</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
<li>
<a href="URL-aquí">Videos</a>
<ul>
<li><a href="URL-aquí">Sevilla FC</a></li>
<li><a href="URL-aquí">Sevilla Atlt.</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Sevilla Fémino</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL-aquí">Equipos</a>
<ul>
<li><a href="URL-aquí">Sevilla</a></li>
<li><a href="URL-aquí">Atlético</a></li>
<li><a href="URL-aquí">Sevilla C</a></li>
<li><a href="URL-aquí">Femenino</a></li>
</ul>
</li>
<li><a href="URL-aquí">Sobre Nosotros</a></li>
<li><a href="URL-aquí">Contacto</a></li> 

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>
 </ul>
</nav>

Y eso es todo


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

16 comentarios

Hola!
Desde aquí Santa Fe, Argentina, te saludo cordiálmente!
Me gustaría saber si me puedes explicar como colocar un Menú horizontal como el que tienes (Color negro) aquí en tu blog. ¡Me encanta! Y además tiene muchos submenúes como el que necesito. Estoy haciendo un blog de recuerdos y he colocado muchas secciones y quisiera ordenarlas un poco. La dirección del blog (por si quieres echarle un vistazo): http://simimemorianofalla.blogspot.com.ar/
Y mi correo: [email protected]
Te agradeceré mucho si me puedes ayudar. ¡Un abrazo!

Hola Amor sevillista, soy novata en esto, como se si tengo una plantilla antigua o nueva?
El blog, en el cual estoy interesada en poner el menú desplegable es:http://viajeblogevasion.blogspot.com.es/ y mi correo [email protected] GRACIAS

Conchi tu plantila es modificada por lo tanto puedes colocar el menú donde desees.
Puedes colocarlo bajo la cabecera y darle todo el ancho del blog.
Te explico, una vez colocado el menú (de tu gusto) en un gadget html, bajo la cabecera debes cambiar:
#amor-menu{
width: 930px; por 100%; y el menú se verá a todo el ancho del blog.
Espero que me hayas comprendido, pero si tienes alguna duda, no dejes de comentarmelo.

Gracias, lo intentaré, y ya te comento

Que maravilla¡¡¡ Lo he intentado y funciona, lo tengo aún en edición porque debo ir añadiendo más entradas, pero lo que he hecho funciona muy bien.
GRACIAS

Hola, no se que ha pasado, bueno he intentado copiar y pegar para que se desplegara la 4ª pestaña y se ha estropeado todo, mañana empezaré de nuevo, ¿como puedo poner desplegables en las pestañas que no tienen?

Siento molestarte, pero si entras en el blog, verás que las pestañas de ISRAEL Y ESTADOS UNIDOS se han ido abajo, no lo entiendo. Podías echarme una mano. Gracias

Conchi, algo has debido colocar mal, elimina el gadget y coloca ESTE en su lugar.
Luego modifícalo a tu gusto.

Gracias Amor Sevillista, ha quedado muy bien, pero me da miedo tocarle para incorporar más entradas, ¿tengo que tener algo en cuenta? Gracias de nuevo y hasta pronto, por cierto te he agregado a mis círculos de "soy seguidor" y "viajeros", un saludo

Observo que queda un poco grande, ya que el buscador está desplazado hacia abajo, habría que unir algunas etiquetas.
Te lo modifico un poco y ahora te lo mando.

Conchi, vuelve a copiar el de antes, ya está modificado.
Haber que tal.

Ya le he puesto, creo que queda muy bien, ¿verdad? Gracias

Hola Antonio. No me funciona el buscador integrado en el menu. Podrías ayudarme por favor. Gracias de antemano y un saludo.

Prado prueba a copiar el código de nuevo, había un pequeño fallo.
Solucionado.

Antes de que me contestaras he copiado el buscador integrado de otro menú tuyo y va de lujo. Muchas gracias por todo y enhorabuena por tu trabajo.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"