10 julio 2012

Gran Menú desplegable en CSS

Antes de nada quiero dar las gracias a todos aquellos que me habéis felicitado en este día tan especial para mí en las distintas Redes Sociales.
Pués sí, hoy cumplo como se diría últimamente en Google, "medio siglo +1".

Pero vayamos a lo que realmente nos importa y ello es este mágnifico menú desplegable que se está utilizando en muchísimos blog y es realmente útil para mostrar gran información de contenido sin saturar el diseño.

Entendiendo un poco de CSS,  lo podéis configurar y adaptar a vuestras nesecidades, lleva incorporado un buscador interno del blog.


Lo podemos instalar bajo la cabecera del blog, añadiendo un gadget HTML/JAVA e introduciendo el código siguiente:

<style>
body, ul, li {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
text-align:left;
}
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:33px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #A60202;
background: -moz-linear-gradient(top, #D10303, #840000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D10303), to(#840000));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Background color and gradients */
background: #fff;
background: -moz-linear-gradient(top, #fff, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #fff;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("http://i40.servimg.com/u/f40/13/20/23/83/drop11.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("http://i40.servimg.com/u/f40/13/20/23/83/drop11.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#fff;
background: -moz-linear-gradient(top, #fff, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
color:#000;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #000;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#B10E02;
}
#menu li:hover div a:hover {
color:#000;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow { /* Better style on light background */
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#000;
color: #fff;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#fff;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
#searchthis {
float:right;
}
#search-btn {
background:#ffffff;
width:60px;
float:center;
margin-top:5px;
}
#search-box {
width:180px;
float:center;
margin-top:5px;
}
</style>
<ul id="menu">
<li><a href="http://www.amorsevillista.com/" class="drop">INICIO</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Bienvenidos !</h2>
</div>
<div class="col_2">
<img src="https://lh4.googleusercontent.com/-e4im_YFGbrI/AAAAAAAAAAI/AAAAAAAAAEo/Gy1gc7w34Rk/s102-c-k/photo.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p>Amor Sevillista, es un blog con temática sobre el Sevilla FC, con trucos y tutoriales para Blogger.</p>
</div>
<div class="col_2">
<p><a class='barraMenu' href='http://www.sevillistasporelmundo.com/h69-sigueamor' onclick='window.open(this.href, this.target, &apos;width=1100,height=700,top=0px,left=100px&apos;); return false;'><h2>SÍGUENOS en las Redes Sociales</h2></a></p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">Sevilla FC</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Equipos</h2>
</div>
<div class="col_1">
<h3>S.F.C.</h3>
<ul>
<ul class="greybox">
<li><a href='http://www.amorsevillista.com/2010/02/plantilla-sfc_24.html' >Plantilla</a></li>
<li><a class='barraMenu' href='http://www.sevillistasporelmundo.com/clasificacionprimeradivision-h31.htm' onclick='window.open(this.href, this.target, &apos;width=280,height=580,top=20px,left=100px&apos;); return false;'>Clasificación</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=300,top=20px,left=100px&apos;); return false;'>Resultados</a></li>
</ul>
</ul></div>
<div class="col_1">
<h3>Atlético</h3>
<ul>
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/2010/01/plantilla-sfc-atletico.html">Plantilla</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/clasificacion-2b-h36.htm' onclick='window.open(this.href, this.target, &apos;width=370,height=455,top=20px,left=100px&apos;); return false;'>Clasificación 2ªB</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultados-2b-h35.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=260,top=20px,left=100px&apos;); return false;'>Resultados </a></li>
</ul>
</ul></div>
<div class="col_1">
<h3>C-Gº10</h3>
<ul>
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/p/sevilla-c.html">Plantilla</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/clasificacion-3-grupo-10-h38.htm' onclick='window.open(this.href, this.target, &apos;width=280,height=455,top=20px,left=100px&apos;); return false;'>Clasificación</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/resultados-3-grupo-10-h37.htm' onclick='window.open(this.href, this.target, &apos;width=270,height=260,top=20px,left=100px&apos;); return false;'>Resultados</a></li>
</ul>
</ul></div>
<div class="col_1">
<h3>Femenino</h3>
<ul>
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/p/sevilla-femino.html">Plantilla</a></li>
<li><a class='botonMenu' href='http://www.sevillistasporelmundo.com/h33-clasificacion-femino' onclick='window.open(this.href, this.target, &apos;width=520,height=430,top=20px,left=100px&apos;); return false;'>Clasificación</a> </li>
</ul>
</ul></div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li><a href="#" class="drop">Secciones</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/2010/05/indice-de-entradas.html">Indice de Entradas</a></li>
<li><a href="http://www.amorsevillista.com/2010/12/tabla-de-colores.html">Tabla de Colores</a></li>
<li><a href="http://www.amorsevillista.com/p/pruebas-en-html.html">Pruebas en HTML</a></li>
<li><a href="http://www.amorsevillista.com/p/conversor-html.html">Conversor HTML</a></li>
<li><a href="http://www.amorsevillista.com/2012/03/solicita-tu-cabecera.html">Solicita tu Cabecera</a></li>
<li><a href="http://www.amorsevillista.com/p/escribe-para-as.html">Escribe para A.S.</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">Trucos Blogger</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Lista de Trucos</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/search/label/gadget">Gadget</a></li>
<li><a href="http://www.amorsevillista.com/search/label/menu">Menú</a></li>
<li><a href="http://www.amorsevillista.com/search/label/formulario">Formularios</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/search/label/twitter">Twitter</a></li>
<li><a href="http://www.amorsevillista.com/search/label/facebook">Facebook</a></li>
<li><a href="http://www.amorsevillista.com/search/label/slider">Slider</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/search/label/entradas">Entradas</a></li>
<li><a href="http://www.amorsevillista.com/search/label/fondos">Fondos</a></li>
<li><a href="http://www.amorsevillista.com/search/label/iconos">Iconos</a></li>
</ul>
</div>
<div class="col_3">
<h2>Algunos ejemplos de Trucos</h2>
</div>
<div class="col_3">
<img src="http://3.bp.blogspot.com/-gBSojKVfGaA/T-oQecP9NmI/AAAAAAAAFPQ/nXN4gmszp18/s1600/Sin%2Bt%25C3%25ADtulo-1.gif" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Al igual que el año pasado de nuevo os traigo el gadget donde vamos a mostrar las Web Oficiales de los distintos equipos de la Primera División. <a href="http://www.amorsevillista.com/2012/06/gadget-de-equipos-de-la-liga-bbva.html">Leer más...</a></p>
<img src="http://4.bp.blogspot.com/-h1f0-pxG3yo/T_lmhdy3FNI/AAAAAAAAFWE/RkKeXIpnrbE/s1600/MENU.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Normalmente todos los Blog usamos un menú de navegación en la parte superior del blog que ayuda a los lectores a navegar y organizar facilmente nuestros enlaces. <a href="http://www.amorsevillista.com/2012/07/menu-horizontal-solo-con-css.html">Leer más...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
<li><a href="#" class="drop">Multimedia</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="greybox">
<li><a href="http://www.amorsevillista.com/p/descargas-del-sevilla-fc_11.html">Descargas</a></li>
<li><a href="http://www.amorsevillista.com/p/videos-del-sevilla-fc.html">Videos</a></li>
<li><a href="http://www.amorsevillista.com/p/sonidos-sevillistas.html">Audio</a></li>
<li><a href="http://www.amorsevillista.com/p/fondos-blogger-del-sevilla-fc.html">Fondos S.F.C. Blogger</a></li>
<li><a href="http://www.amorsevillista.com/p/giffaviconcursor-del-sevilla-fc.html">Gifs,Favicón</a></li>
<li><a href="http://www.amorsevillista.com/p/trivial-sevillista.html">Juegos</a></li>
</ul>
</div>
</div>
</li>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/> <input id='search-btn' type='submit' value='Buscar'/></form>
</ul>


!!!! A DISFRUTARLO !!!!!


9 comentarios

Hola que tal.

Disculpa una pregunta, y como podría hacer para poner lo que he escrito en mi blog en etiquetas y luego en lazarlas a este menu que has puesto?

Gracias.

Mi blog: www.11enlacancha.com

Berny, si observas el código verás todo colocado, tan solo debes modificarlo a tus necesidades.

Pero como se hace si para enlazar una etiqueta del blog en ese menú, porque yo voy a quitar las etiquetas en de mi blog para poner ese menú.

Gracias

Berny, los enlaces debes colocarlo así: <li><a href="http://nombre de tu blog.blogspot.com/search/label/nombre de la etiqueta">NOMBRE ETIQUETA</a></li>

Anteriormente te dije que observarás el código, está todo muy visible.

Saludos.

Este comentario ha sido eliminado por el autor.

Hola Antonio, este menú lo intente colocar en la plantilla que tu regalaste, pero no es posible hacerlo porque dice que hay que poner el gadget debajo de la cabecera. En la plantilla tuya no se puede colocar debajo de la cabecera nada, porque el mismo diseño no lo deja. Por eso fue que te consulte para ver si directamente se puede hacer en la parte de HTML editando desde allí. Gracias por tu atención y espero me ayudes.

Este comentario ha sido eliminado por el autor.

Hola Antonio, ya intente colocar este menú desplegable en la plantilla, editando desde el HTML con mi mínimo conocimiento de ello, y todo parecía bien, lo único malo es que las subpestañas quedan debajo del contenedor del carrusel de imágenes.Y aunque he hecho todo para lograr que queden por encima nada. Hasta intente cambiar de posición el menú, colocarlo debajo del carrusel pero no lo consigo, este sigue apareciendo en la misma parte. Como le hago para lograr que quede bien, sea dejando el menú en su sitio original o bajándolo después del carrusel. Gracias de antemanos.

Gilda te dejo mi menú tal cual lo tengo instalado, colócalo bajo el carrusel en la plantilla.
DESCARGAR MENÚ


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"