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
Publicaciones Relacionadas
trucos blog
