Tutorial: Mega Menú desplegable

miércoles, septiembre 4

En este mundo, existe gente que es una auténtica pasada y hace cosas que son impresionantes, para muestra, este maravilloso menú que traigo hoy.
En este menú podremos encontrar 5 submenús totalmente diferentes y muy fácil de personalizar, con tener un conocimiento básico de HTML podríamos cambiar muchas cosas según nos convenga.
Si no teneis idea de HTML no os preocupeis, a la hora de personalizarlo encontraréis diferentes indicaciones que os dirán como hacer lo siguiente:
Cambiar colores
Cambiar Tamaños
Añadir Imágenes... etc
Por cierto antes de olvidarme, para el tuto necesitaréis esta imagen. Es la que colocaréis de flechitas






Código CSS:

Como siempre, este código puede ir dentro de vuestro código del blog, o en el mismo gadget donde coloquéis el código.

<style>

#menu { /* Esta parte es con respecto a la barra horizontal */
 position: relative;
 z-index: 1000;
 overflow: visible !important;
 list-style:none;
 width:640px; /* Ancho de la barra */
 margin:100px auto 0px auto; /* margen de colocación */
 height:43px; /* Alto de la barra del menú */
 padding:0px 20px 0px 20px; /* margenes interiores */


 /* Esquinas redondeadas */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;


 /* Color de fondo y degradados */
 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  /* 1ºcolor superior, 2ºcolor inferior */



 /* Bordes*/
 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; /* separación entre Home, 5 Columns y 4 Columns */
 margin-top:7px; /* Altura de los menús en la barra horizontal */
 border:none;
 color: #000; /* Menu desplegable: Color textos y títulos */
}

#menu li:hover {
 border: 1px solid #777777; /* borde de los menús pero dentro del rectangulo del menú principal */
 padding: 4px 9px 4px 9px; /* distancias superiores, inferiores etc de los menús al pasár el ratón por encima (los menús dentro de la barra) */


 /* Color de fondo y degradados */
 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));


 /* Esquinas redondeadas */ 
 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}


#menu li a { /* Diferentes modificaciones sobre el texto de la barra de menú*/
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;  /* tamaño del texto */
 color: #EEEEEE; /* Color texto */
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000; /* Sombra texto */
}

#menu li:hover a { /* Diferentes modificaciones sobre el texto de la barra de menú al pasar el ratón */
 color:#161616;
 text-shadow: 1px 1px 1px #ffffff; /* Sombra texo del menú al pasar el ratón*/
}

#menu li .drop {
 padding-right:21px;
 background:url("URL Flecha") no-repeat right 8px; /* Flecha oscura*/
}

#menu li:hover .drop {
 background:url("URL Flecha") no-repeat right 7px; /* Flecha clara*/
}


.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto; /* Menú desplegable: Alto del menú desplegable con respecto a la barra horizontal */
 float:left;
 position:absolute;
 left:-999em; /* Oculta el menú desplegable, Viene siendo no Tocar o se amontonan los menus */
 text-align:left;
 padding:10px 5px 10px 5px; /* Menú desplegable: Tamaño del menú desplegable */
 border:1px solid #777777; /* Menú desplegable: borde y color del menú desplegable */
 border-top:none;

 
 / * Fondo degradado * /
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* 1ºcolor superior, 2ºcolor inferior */


 /* Bordes redondeados*/
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

 /* Anchos de los Desplegables */
.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;
}


 /* Menu desplegable: Modifica distancias entre el texto y la caja principal */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}

/* Modifica anchos de diferentes partes del menú desplegable */

.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; /* margen entre los 2 menús de la derecha de la barra horizontal */

}

#menu li .align_right {

 /* Bordes redondeados */
 -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 desplegable: Color sombra textos y títulos */
 color: #000; /* Menu desplegable: Color textos y títulos */
}

#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666; /* Menu desplegable: Menu 4 Color lineas superiores de las noticias */
}

#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888; /* Menu desplegable: Menu 4 Color lineas inferiores de las noticias */
}

#menu p {
 line-height:18px; /* Menu desplegable: Distancia entre lineas de las noticias */
 margin:0 0 10px 0; /* Menu desplegable: Distancia entre noticias superiores e inferiores */
}


#menu li:hover div a {
 font-size:12px;
 color:#015b86; /* color enlaces */
}
#menu li:hover div a:hover {
 color:#029feb; /* color enlace al pasar el ratón */
}


.strong {
 font-weight:bold;
}

.italic {
 font-style:italic;
}


.imgshadow { /* Diferentes colores y posiciones de las sombras de la caja de las imágenes */
 background:#FFFFFF; /* Color fondo imágenes */
 padding:4px;
 border:1px solid #777777; /* Color borde imágenes */
 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 { /* Ubicación de las imágenes */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}

#menu li .black_box { /* Modificaciones Cajitas oscuras */
 background-color:#333333; /* Color de fondo de las cajitas oscuras */
 color: #eeeeee; /* Color texto de las cajitas oscuras */
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;



 /* bordes redondeados */

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

 /* sombras */
 -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:#F4F4F4;
 border:1px solid #bbbbbb; /* Borde cuadraditos columna 3 */
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;


 /* bordes redondeados */
    -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;
} 

</style>
En este código CSS os he dejado una serie de indicaciones en color dorado, que os servirá para editar y modificar la apariencia del menú. Desde el color de las letras, hasta el fondo. En color rosa os he indicado donde ha de colocarse el enlace de las flechitas del menú horizontal 

Código HTML:
Ahora os colocaré el código HTML.  Para usarlo recordad que tendréis que ir a las opciones de diseño del blog y crear un dadget HTML/Javascript y en el pegar todo el código ¿ok?
Este código se dividirá en 6 partes. 
La primera parte será la barra horizontal y las siguientes 5 partes serán los diferentes tipos de desplegable. También os diré donde y como colocar cada cosa en caso de que queráis el mismo desplegable 5 veces.



  • Barra Horizontal:


<ul id="menu">

Aquí dentro meteremos nuestros menús desplegables

</ul>

Con este código comenzamos a preparar nuestro menú según nuestro gusto, la frase que está en color Verde claro será sustituida por nuestros menus




Ahora vienen los Menús Desplegables, recordad, que si queréis utilizar uno, simplemente tenéis que añadirlo donde indica en la Barra Horizontal , uno detrás de otro y en el orden deseado
  • Menú Desplegable Inicio
<li><a class="drop" href="URL Página Inicio">Inicio</a><!-- Begin Home Item -->
        <div class="dropdown_2columns">
<!-- Begin 2 columns container -->
            <br />
<div class="col_2">
<h2>

Bienvenido !</h2>

</div>
<div class="col_2">

Hola y bienvenidos aquí! Esto es una muestra de las posibilidades de este impresionante Mega menú desplegable.<br />

Este artículo viene con una amplia gama de estilos de tipografía preparados, como encabezados, listas, etc.</div>

<div class="col_2">
<h2>

Navegadores Soportados</h2>
</div>
<div class="col_1">
<img alt="" height="48" src="URL Imagen Deseada" width="125" />
            </div>
<div class="col_1">

Este mega menú ha sido testeado en los principales navegadores.</div>

</div>
<!-- End 2 columns container -->
    </li>
<!-- End Home Item -->


En Color Rosa os he indicado las URL que tenéis que cambiar. La primera,  es para que al pinchar en Inicio os lleven a la página principal del blog. El segundo enlace corresponde con la imagen que se ve en el ejemplo.

En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo

En Verde tenéis el título del desplegable.


  • Menú desplegable 5 Columnas

<li><a class="drop" href="URL Página 5 columnas">5 columnas</a><!-- Begin 5 columns Item -->

    

        <div class="dropdown_5columns">

<!-- Begin 5 columns container -->

        

            <br />

<div class="col_5">

<h2>

Este es un ejemplo de un recipiente grande con 5 columnas</h2>

</div>

<div class="col_1">

<div class="black_box">

Se trata de un cuadro de texto de color gris oscuro. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</div>

</div>

<div class="col_1">

Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</div>

<div class="col_1">

<div class="italic">

Esto es un ejemplo de un texto en cursiva. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</div>

</div>

<div class="col_1">

Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</div>

<div class="col_1">

<div class="strong">

Esto es un ejemplo de un texto en negrita. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</div>

</div>

<div class="col_5">

<h2>

He aquí algunos contenidos con imágenes laterales</h2>

</div>

<div class="col_3">

<img alt="" class="img_left imgshadow" height="70" src="URL Imagen Deseada Superior" width="70" />

                <br />

Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="URL Página Leer mas">Seguir Leyendo...</a><br />

<img alt="" class="img_left imgshadow" height="70" src="URL Imagen Deseada Inferior" width="70" />

                <br />

Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="URL Página Leer mas">Seguir Leyendo...</a></div>

<div class="col_2">

<div class="black_box">

Esto es un cuadro negro, lo puedes usar para resaltar contenidos. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</div>

</div>

</div>

<!-- End 5 columns container -->

    

    </li>

<!-- End 5 columns Item -->

En Color Rosa os he indicado las URL que tenéis que cambiar. En Total Son 5 Enlaces y os comento que es cada uno en orden de aparición.

  1. Enlace:  Es al que seremos llevados si pinchamos en el título del menú
  2. Enlace: Es el enlace de la Imagen superior del menú
  3. Enlace: Es el Enlace que nos llevará al articulo que se cita (articulo superior)
  4. Enlace: Es el enlace de la Imagen Inferior del menú
  5. Enlace: Es el Enlace que nos llevará al articulo que se cita (articulo inferior)


En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo

En Verde tenéis el título del desplegable.

  • Menú desplegable 4 Columnas


<li><a class="drop" href="URL Página 4 columnas">4 columnas</a><!-- Begin 4 columns Item -->

        <div class="dropdown_4columns">

<!-- Begin 4 columns container -->
 
            <br />

<div class="col_4">

<h2>

Esto es un título de inicio</h2>

</div>

<div class="col_1">

<h3>

Some Links</h3>

<ul>

<li><a href="URL Página">ThemeForest</a></li>

<li><a href="URL Página">GraphicRiver</a></li>

<li><a href="URL Página">ActiveDen</a></li>

<li><a href="URL Página">VideoHive</a></li>

<li><a href="URL Página">3DOcean</a></li>

</ul>

</div>

<div class="col_1">

<h3>

Useful Links</h3>

<ul>

<li><a href="URL Página">NetTuts</a></li>

<li><a href="URL Página">VectorTuts</a></li>

<li><a href="URL Página">PsdTuts</a></li>

<li><a href="URL Página">PhotoTuts</a></li>

<li><a href="hURL Página">ActiveTuts</a></li>

</ul>

</div>

<div class="col_1">

<h3>

Other Stuff</h3>

<ul>

<li><a href="URL Página">FreelanceSwitch</a></li>

<li><a href="URL Página">Creattica</a></li>

<li><a href="URL Página">WorkAwesome</a></li>

<li><a href="URL Página">Mac Apps</a></li>

<li><a href="URL Página">Web Apps</a></li>

</ul>

</div>

<div class="col_1">

<h3>

Misc</h3>

<ul>

<li><a href="URL Página">Design</a></li>

<li><a href="URL Página">Logo&lt;/a></li>

<li><a href="URL Página">Flash</a></li>

<li><a href="URL Página">Illustration</a></li>

<li><a href="URL Página">More...</a></li>

</ul>

</div>

</div>

<!-- End 4 columns container -->

    </li>

<!-- End 4 columns Item -->

En Color Rosa os he indicado las URL que tenéis que cambiar. La primera,  es para que al pinchar en Inicio os lleven a la página principal del blog. El resto son los enlaces a los que os llevará las diferentes categorías

En Color Verde tenéis el título del desplegable y los títulos de las diferentes categorías. Si queréis  añadir más enlaces, simplemente copiar y pegar la siguiente linea y repetirla siguiendo la lógica que se m

<li><a href="URL Página">nombre de enlace</a></li>
En Dorado os dejé el texto a modificar, nombres de enlaces, títulos de categorías.. y como siempre, el nombre del menú desplegable.


  • Menú desplegable 3 Columnas


<li class="menu_right"><a class="drop" href="URL Página 3 columnas">3 columnas</a><!-- Begin 3 columns Item -->

    

        <div class="dropdown_3columns align_right">

<!-- Begin 3 columns container -->

            

            <br />

<div class="col_3">

<h2>

Listado en Cajas</h2>

</div>

<div class="col_1">

<ul class="greybox">

<li><a href="URL Página">FreelanceSwitch</a></li>

<li><a href="URL Página">Creattica</a></li>

<li><a href="URL Página">WorkAwesome</a></li>

<li><a href="URL Página">Mac Apps</a></li>

<li><a href="URL Página">Web Apps</a></li>

>
</ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="URL Página">ThemeForest</a></li> <li><a href="URL Página">GraphicRiver</a></li> <li><a href="URL Página">ActiveDen</a></li> <li><a href="URL Página">VideoHive</a></li> <li><a href="URL Página">3DOcean</a></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="URL Página">Design</a></li> <li><a href="URL Página">Logo&lt;/a></li> <li><a href="URL Página">Flash</a></li> <li><a href="URL Página">Illustration</a></li> <li><a href="URL Página">More...</a></li> </ul> </div> <div class="col_3"> <h2> He aquí algunos ejemplos de imágenes</h2> </div> <div class="col_3"> <img alt="" class="img_left imgshadow" height="70" src="Enlace Imagen Superior" width="70" />                 <br /> Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="URL Página Leer mas#">Sigue Leyendo...</a><br /> <img alt="" class="img_left imgshadow" height="70" src="Enlace Imagen Inferior" width="70" />                 <br /> Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="URL Página Leer mas">Sigue Leyendo...</a></div> </div> <!-- End 3 columns container -->            </li> <!-- End 3 columns Item -->
En Color Rosa os he indicado las URL que tenéis que cambiar.Como en los demás los enlaces son, la del títuulo del menú desplegable. Las Direcciones del listado en cajas y las direcciones del seguir leyendo.

En Color Verde son los enalces de las imágenes.

En Dorado os dejé el texto a modificar


  • Menú desplegable 1 Columna


<li class="menu_right"><a class="drop" href="URL Página 1 columna">1 Columna</a>

    

  <div class="dropdown_1column align_right">

<div class="col_1">

<ul class="simple">

<li><a href="URL Página">FreelanceSwitch</a></li>

<li><a href="URL Página">Creattica</a></li>

<li><a href="URL Página">WorkAwesome</a></li>

<li><a href="URL Página">Mac Apps</a></li>

<li><a href="URL Página">Web Apps</a></li>

<li><a href="URL Página">NetTuts</a></li>

<li><a href="URL Página">VectorTuts</a></li>

<li><a href="URL Página">PsdTuts</a></li>

<li><a href="URL Página">PhotoTuts</a></li>

<li><a href="URL Página">ActiveTuts</a></li>

<li><a href="URL Página">Design</a></li>

<li><a href="URL Página">Logo&lt;/a></li>

<li><a href="URL Página">Flash</a></li>

<li><a href="URL Página">Illustration</a></li>

<li><a href="URL Página">More...</a></li>
</ul>

</div>

</div>

</li>

Este es el desplegable más sencillo, tenemos en Rosa direcciones en Dorado nombres de las direcciones, creo que no hace falta explicar mucho más. Si queréis añadir más lineas.. pues copiar y pegar la siguiente y listo. Si queréis menos lineas.. todo es borrar.

<li><a href="Url Página">Nombre página</a></li>



Si tenéis alguna duda entonces intentaré ayudaros en lo posible.



7 comentarios:

juan dijo...

Gracias genial me sirve

Angie Navarro dijo...
Este comentario ha sido eliminado por el autor.
Angie Navarro dijo...

pleaseee puedes poner las indicaciones para cambiarlo de color? te lo agradecería mucho!! :)

Richard Restrepo dijo...

Muchas Gracias.... esta excelente :D

GranPumuki dijo...

Es fantástico, pero me he encontrado dos problemas al implementarlo en mi blog.
1) la parte azul sobresale a todo, de forma que si por ejemplo pincho una imagen y esta se hace grande, el menu sigue encima tapándola
1b) tengo dos menus, uno arriba largo, bajo el título, para todo y otro mas pequeño en el lateral para las etiquetas, el problema es como antes las partes azules tienen prioridad y se ven tapando el desplegable que viene de arriba (este problema en el fondo es el mismo)

2) tengo el menu perfectamente diseñado. Si lo mento en un gadget lateral o en un post, está perfecto, pero cuando lo meto en gatget bajo título (en blogspot), se modifican todos los estilos, colores, etc.

Se puede arreglar
Gracias

Saul Carrasco dijo...

hola no consigo hacerlo funciona puedes poner la barra en un html en vacio solo con la barra para ver el codigo....

Donato Pariona H. dijo...

Muy bueno nenna, gracias sigue pa adelante..

Publicar un comentario en la entrada