Categoría: Experiencia de Usuario / UX

Megamenú

Continuamente en la construcción  de sistemas web se requiere de la creación de menús, una necesidad común es tener que hacer menús que contengan submenús a diversos niveles, para este tipo de menús existen diversos recursos en la web que nos muestran cómo hacerlos, incluso hice una entrada donde mostré como crear una barra emergente la cual usualmente se utiliza para colocar botones de menú, ahora quizá por casualidad he visto últimamente los llamados megamenús, los cuales utilizan una estructura o layout más elaborada como los que se muestran aquí, en lugar de solo algunos “hijos” , de manera que en esta ocasión aprenderemos como hacer un bonito menú de este tipo utilizando HTML5 y CSS3 que tien la apariencia mostrada en la portada de esta entrada.

1. Creación de la barra principal.

La estructura básica de la barra principal del menú es muy simple, solo consta de una lista no ordenada con el tag <ul> y dentro de cada elemento de la lista se coloca una imagen (o lo que usted prefiera).

<ul id="menu">
   <li><a href="#"><img src="opc01.png" /></a></li>
   <li><a href="#"><img src="opc02.png" /></a></li>
   <li><a href="#"><img src="opc03.png" /></a></li>
   <li><a href="#"><img src="opc04.png" /></a></li>
</ul>

Estilos al contenedor.

El elemento  <ul id=”menú”> funciona como contenedor, al cual procederemos a darle estilos CSS3. En la siguiente definición se indica la eliminación del bullet que aparece comúnmente en las listas HTML, se coloca una distancia de 10 pixeles en los márgenes izquierdo y derecho, se establece el alto y ancho de la barra, la distancia interna entre el extremo de la barra y los elemento que se coloque dentro de ella, se establece un efecto de gradiente y finalmente se indica el radio para que nuestra barra tenga esquinas redondeadas:

#menu {
   list-style:none;
   margin: 0px 10px;
   height: 57px;
   width: 900px;
   padding: 3px 5px 0px 5px;
   /*Gradientes*/
   background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
   background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
   /*Esquinas redondeadas*/
   border-radius: 10px;
}

Estilos a los elemento de la lista.

La definición del siguiente estilo hará que cada elemento del menú se despliegue uno  a la izquierda de otro y en bloque (como lo hace un encabezado o un párrafo) , la posición será relativa al elemento padre (ul en esta caso), las imágenes que se colocarán tendrá una distancia de 2 pixeles a todos lados excepto arriba que será de 6 pixeles, la distancia entre elementos será de 10 pixeles, se establece el ancho, tipo y color del borde de cada elemento, y por último un fondo con gradiente:

#menu li {
   float: left;
   display: block;
   position: relative;
   padding: 6px 2px 2px 2px;
   margin-right: 10px;
   border:  1px solid #777777;
   border-radius: 5px 5px 5px 5px;
   background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
   background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
}

Enseguida agregamos un estilo para exactamente el mismo elementos que afectamos con el estilo anterior, ¿por qué?  podría preguntarse,  la razón es que haremos que el siguiente estilo luzca diferente cuando el usuario coloca el puntero del ratón sobre el elemento del menú actual. El estilo, con la ayuda de pseudoclase hover, cambiará el color del  borde y los colores de gradientes de fondo:

#menu li:hover  {
   border: 1px solid #bfbfbf;
   /* Color de fondo y gradientes */
   background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
   background: -webkit-linear-gradient(top, #F4F4F4, #EEEEEE);
}

Para terminar el primer paso agregaremos un sencillo estilo que afectará  a los enlaces que se coloquen dentro de los elementos de menú:

#menu li a {
   font-size: 14px;
   color: #EEEEEE;
   display: block;
   outline: 0;
   text-decoration: none;
   text-shadow: 1px 1px 1px #000;
}

En mi caso estoy utilizando ciertas imágenes  como elementos del menú pero usted puede utilizar las propias o sustituirlas por texto,  la siguiente imagen da una idea de lo que aproximadamente obtendrá:

2. Haciendo los elementos emergentes (Drop Down).

La estructura básica de los elementos emergentes consiste únicamente de que un tag <div> donde se coloca todo el contenido del elemento drop down:

<ul id="menu">
   <li>
      <a href="#"><img src="opc01.png" /></a>
      <div class="emergente_1columna">
         Contenido del elemento emergente
      <div>
   </li>
   <li>
      <a href="#" ><img src="opc02.png" /></a>
      <div class="emergente_2columnas">
         Contenido del elemento emergente
      <div>
   </li>
</ul>

En la estructura de un menú drop down tradicional en lugar de divs anidaríamos otra lista, pero como en este caso deseamos un elemento mucho más elaborado utilizamos <div> para colocar lo que deseemos dentro.

Estilos para contenedor del elemento emergente.

He de mencionar  que la forma de organizar las columnas en algún momento la vi en el código de alguna página que implementaba un mega menú, pero no recuerdo cual fue esa página, así que espero que el autor no se moleste por la falta de crédito, aunque en realidad, como veremos,  es sencillo.

El estilo comienza indicando que el posicionamiento es respecto a la ventana del navegador position: absolute, se envía al elemento a una gran distancia a la izquierda para que no se vea en el navegador inicialmente,  se colocan las indicaciones para posicionar los elementos dentro de nuestro contenedor, después se crea un gradiente como fondo y se finalmente redondean las esquinas.

   .emergente_1columna,
   .emergente_2columnas,
   .emergente_3columnas,
   .emergente_4columnas {
   /*Para desaparecer al elemento inicialmente*/
   position: absolute;
   left: -999em;
   text-align: left;
   padding: 10px 5px 0px 5px;
   border:1px solid #777777;
   margin-top: 3px;
   /*Gradiente de fondo*/
   background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
   background: -webkit-linear-gradient(top, #EEEEEE, #BBBBBB);
   /*Esquinas redondeadas*/
   border-radius: 5px 5px 5px 5px;
}

Lo que resta en este paso es indicar el tamaño para cada elemento emergente (div) y reposicionar al mismo cuando el puntero del mouse está sobre el elemento del menú en la barra principal con la pseudoclase hover.

   .emergente_1columna {width: 160px;}
   .emergente_2columnas {width: 280px;}
   .emergente_3columnas {width: 480px;}
   .emergente_4columnas {width: 640px;}

   #menu li:hover .emergente_1columna,
   #menu li:hover .emergente_2columnas,
   #menu li:hover .emergente_3columnas,
   #menu li:hover .emergente_4columnas {
   left:-50%;
   top:auto;
}

Estilos para las columnas dentro del contenedor del elemento emergente.

Como ha podido observar en los estilos anteriores, estamos utilizando clases de acuerdo al número máximo de columnas que habrá dentro del elemento emergente, en este caso usamos solo 4 pero puede usar tantas como usted desee, ahora crearemos contenido y estilos que actuarán sobre la(s) columnas que contiene cada elemento emergente:

<li>
   <a href="#" title="Opción 1" ><img src="opc01.png" /></a>
   <div class="emergente_1columna">
      <div class="col_1">
          <ul>
            <li><a href="#">Superman</a></li>
            <li><a href="#">Batman</a></li>
            <li><a href="#">GreenLantern</a></li>
            <li><a href="#">Shazam!</a></li>
            <li><a href="#">Wonder Woman</a></li>
            <li><a href="#">Flash</a></li>
            <li><a href="#">Wolverine</a></li>
          </ul>
      </div>
   </div>
</li>

Los estilos:

   .col_1,
   .col_2,
   .col_3,
   .col_4 {
   display: inline;
   float: left;
   position: relative;
   margin-left: 5px;
   margin-right: 5px;
}

.col_1 {width:150px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}

La manera de usar estos estilos en el código HTML es la siguiente:

<ul id="menu">
   <li><a href="#" class="drop">5 Columns</a>
   <div class="dropdown_4columns">
   <div class="col_4">

Esto es un contenido a 5 columnas.

</div>
    <div class="col_1">

Esto es un contenido a una columna.

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

Esto es un contenido a 2 columnas.

    </div>
   .
   .
   .
   </li>
</ul>

Y asi sucesivamente.

Lo que obtendrá como resultado será algo similar a esto:

3. Colocando el contenido

En este tercer y último paso agregaremos contenido a los elementos emergentes y por supuesto haremos los estilos correspondientes, pero antes de continuar debemos de tener claro que aunque hablaremos del contenido creado para el ejemplo esta es la parte donde usted puede crear el propio y sus estilos con total libertad, de manera que los elementos emergentes muestran la información que usted desee  de la forma que más le convenga, el siguiente código es solo un ejemplo.

Uno de los tags que manejo para mi contenido es <p> para crear párrafos, y les asigno el siguientes estilo con objetivos muy simples, solo se establece el alto de cada renglón del párrafo, el tamaño de la fuente, se orilla a la izquierda y se le coloca una sombra blanca.

#menu p {
    line-height: 15px;
    font-size: 12px;
    text-align: left;
    text-shadow: 1px 1px 1px #FFFFFF;
}

Para el caso de este ejemplo utilizo más listas para incluir dentro del contenido, por lo que se agregan más elementos <ul> y <li>, como estas listas no tienen que ver con las listas que forman parte de la estructura del megamenú se asignan nuevos estilos para evitar usar los estilos de listas para el resto del menú por lo que se refrescan los estilos para tener otro apariencia para estos items:

#menu li ul {
   list-style:none;
   padding:0px;
   margin:0 0 12px 0;
}

#menu li ul li {
   font-size: 12px;
   line-height: 25px;
   position: relative;
   text-shadow: 1px 1px 1px #ffffff;
   padding: 5px;
   margin:0 0 5px 0;
   float: none;
   text-align: left;
   width: auto;
}

#menu li ul li:hover {
   padding: 5px;
   margin:0 0 5px 0;
   width:auto;
   cursor: pointer;
}

Y finalmente incluí algunos estilos para un par de imágenes que se utilizan en el ejemeplo con cambios muy simples como orientar a la izquierda e incluir una sombra.

.img_left {
   width: auto;
   float: left;
   margin: 5px 10px 1px 1px;
}

.imgshadow {
   background:#FFFFFF;
   padding:4px;
   border:1px solid #777777;
   margin-top:15px;
   -moz-box-shadow:0px 0px 5px #666666;
   -webkit-box-shadow:0px 0px 5px #666666;
   box-shadow:0px 0px 5px #666666;
}

El código final.

El código completo luce como se muestra a continuación, tenga presente que este ejemplo solo ha sido probado en Chrome y en Firefox.

HTML:

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="iso-8859-1">
      <title>Mega menú</title>
      <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body>
       <ul id="menu">
           <li>
           <a href="#" title="Opción 1" ><img src="opc01.png" /></a>
               <div class="emergente_1columna">
                  <div class="col_1">
                     <ul class="simple">
                         <li><a href="#">Superman</a></li>
                         <li><a href="#">Batman</a></li>
                         <li><a href="#">GreenLantern</a></li>
                         <li><a href="#">Shazam!</a></li>
                         <li><a href="#">Wonder Woman</a></li>
                         <li><a href="#">Flash</a></li>
                         <li><a href="#">Wolverine</a></li>
                     </ul>
                  </div>
              </div>
           </li>
           <li>
               <a href="#" title="Opción 2" ><img src="opc02.png" /></a>
               <div class="emergente_2columnas"><!-- Begin 2 columnas container -->
                  <div class="col_2">
                     <h2>Algún Encabezado</h2>
                  </div>
               <div class="col_2">

Este es un ejemplo de layout que se puede utilizar, usted puede modificarlo como desee.

Las posiblidades de CSS3 hace que puede personalizar el texto con resultados agradables.

       .
       .
       .
 
    </div>
<div class="col_2">
    <h2>Otro encabezado</h2>
</div>
<div class="col_1">
    <img src="ChromeFirefox.jpg" class="imgshadow" alt="" /></div>
    <div class="col_2">

Este menú ha sido probado en Chrome y Firefox.

   </div>
</div>
</li>
<li>
   <a href="#" title="Opción 3" ><img src="opc03.png" /></a>
   <div class="emergente_3columnas"><!-- Begin 3 columnas container -->
   <div class="col_3">
   <h2>Listas</h2>
</div>
<div class="col_1">
   <ul class="greybox">
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS3</a></li>
      <li><a href="#">JavaScript</a></li>
   </ul>
</div>
<div class="col_1">
   <ul class="greybox">
      <li><a href="#">SVG</a></li>
      <li><a href="#">WebGL</a></li>
      <li><a href="#">Más...</a></li>
   </ul>
</div>
<div class="col_1">
   <ul class="greybox">
      <li><a href="#">Chrome</a></li>
      <li><a href="#">FireFox</a></li>
      <li><a href="#">Opera</a></li>
   </ul>
</div>
<div class="col_3">
   <h2>Otra imagensita en este ejemplo</h2>
</div>
<div class="col_3">
   <img src="img1.png" class="img_left imgshadow" alt="" />Dolor hac. Turpis augue nec adipiscing turpis enim porta montes, porttitor integer nisi tincidunt nec nisi, scelerisque duis, in ultricies rhoncus cursus duis nec placerat dignissim cum adipiscing placerat penatibus, egestas massa dolor tincidunt scelerisque scelerisque quis porta phasellus. Auctor cras et. Natoque cursus ridiculus vut urna facilisis! Nunc mattis, tincidunt, platea sed ac? Etiam, turpis! Etiam parturient sed enim? Nisi, integer, aenean augue? Pellentesque, odio pulvinar massa, sit, porttitor urna lorem! Arcu sed et, et non, lectus! Tristique, ultricies cras? Tristique turpis hac. Sociis sit augue! Tristique, dapibus rhoncus aliquet, porta nunc ac, dictumst ac, vel platea tortor, non placerat sagittis, integer auctor mus lundium in enim. Turpis quis. Risus sociis, purus magna, enim, sagittis, mauris, eu in amet.<a href="#">Más...</a>

</div>
   <!-- End 3 columnas container --></li>
   <li>
      <a href="#" title="Opción 4" ><img src="opc04.png" /></a>
      <div class="emergente_4columnas"><!-- Begin 4 columnas container -->
      <div class="col_4">
          <h2>Este es un header cualquiera</h2>
      </div>
      <div class="col_1">
          <h3>Lista de enlaces</h3>
          <ul>
              <li><a href="#">Warcraft</a></li>
              <li><a href="#">Starcraft</a></li>
              <li><a href="#">Diablo</a></li>
              <li><a href="#">Halo</a></li>
              <li><a href="#">Ninja Gaiden</a></li>
          </ul>
      </div>
      <div class="col_1">
         <h3>Otra lista</h3>
         <ul>
            <li><a href="#">Android</a></li>
            <li><a href="#">iOS</a></li>
            <li><a href="#">Windows</a></li>
            <li><a href="#">WebOS</a></li>
            <li><a href="#">BlackBerry</a></li>
         </ul>
      </div>
      <div class="col_1">
          <h3>Más enlaces</h3>
          <ul>
              <li><a href="#">C++</a></li>
              <li><a href="#">C#</a></li>
              <li><a href="#">Java</a></li>
              <li><a href="#">HTML5</a></li>
              <li><a href="#">ActionScript</a></li>
          </ul>
      </div>
      <div class="col_1">
          <h3>Otros...</h3>
          <ul>
             <li><a href="#">Candice</a></li>
             <li><a href="#">Adriana</a></li>
             <li><a href="#">Joanna</a></li>
             <li><a href="#">Marissa</a></li>
             <li><a href="#">Otros...</a></li>
          </ul>
      </div>
   </div>
<!-- End 4 columnas container --></li>
    </ul>
    </body>
</html>

CSS3:

@charset "iso-8859-1";
/* CSS Document */

body{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
}

#menu {
    list-style:none;
    margin: 0px 10px;
    height: 57px;
    width:900px;
    padding: 3px 5px 0px 5px;
    /*Gradientes*/
    background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
    background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
    /*Esquinas redondeadas*/
    border-radius: 10px;
}

#menu li {
   float:left;
   display:block;
   position:relative;
   padding: 6px 2px 2px 2px;
   margin-right: 10px;
   border: 1px solid #777777;
   border-radius: 5px 5px 5px 5px;
   background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
   background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
}

#menu li:hover {
    border: 1px solid #bfbfbf;
    /* Color de fondo y gradientes */
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-linear-gradient(top, #F4F4F4, #EEEEEE);
}

#menu li a {
    font-size: 14px;
    color: #EEEEEE;
    display: block;
    outline: 0;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
}

/* Estilos para las columnas */
    .emergente_1columna,
    .emergente_2columnas,
    .emergente_3columnas,
    .emergente_4columnas {
    /*Para desaparecer al elemento inicialmente*/
    position: absolute;
    left: -999em;
    text-align: left;
    padding: 10px 5px 0px 5px;
    border:1px solid #777777;
    margin-top: 3px;
    /*Gradiente de fondo*/
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-linear-gradient(top, #EEEEEE, #BBBBBB);
    /*Esquinas redondeadas*/
    border-radius: 5px 5px 5px 5px;
}

.emergente_1columna {width: 160px;}
.emergente_2columnas {width: 280px;}
.emergente_3columnas {width: 480px;}
.emergente_4columnas {width: 640px;}

#menu li:hover .emergente_1columna,
#menu li:hover .emergente_2columnas,
#menu li:hover .emergente_3columnas,
#menu li:hover .emergente_4columnas {
   left:-50%;
   top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4 {
   display:inline;
   float: left;
   position: relative;
   margin-left: 5px;
   margin-right: 5px;
}

.col_1 {width:150px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
#menu li ul {
   list-style:none;
   padding:0px;
   margin:0 0 12px 0;
}

#menu li ul li {
   font-size: 12px;
   line-height: 25px;
   position: relative;
   text-shadow: 1px 1px 1px #ffffff;
   padding: 5px;
   margin:0 0 5px 0;
   float: none;
   text-align: left;
   width: auto;
}

#menu li ul li:hover {
   padding: 5px;
   margin:0 0 5px 0;
   width:auto;
   cursor: pointer;
}

#menu p {
   line-height: 15px;
   font-size: 12px;
   text-align: left;
   text-shadow: 1px 1px 1px #FFFFFF;
}

/*Para las imagenes en los submenus*/
.img_left {
   width: auto;
   float: left;
   margin: 5px 10px 1px 1px;
}

.imgshadow {
   background:#FFFFFF;
   padding:4px;
   border:1px solid #777777;
   margin-top:15px;
   -moz-box-shadow:0px 0px 5px #666666;
   -webkit-box-shadow:0px 0px 5px #666666;
   box-shadow:0px 0px 5px #666666;
}

Código descargable aquí.

Estos son algunos libros que le pueden ayudar:

Emmanuel Herrera

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.

Some certifications include: PSM, PSPO, SSM.

internet80.com