Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Cómo crear un menú desplegable Mega Kick-Butt CSS3 Mega

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
Build Awesome Practical CSS3 Buttons

Spanish (Español) translation by Daniel Oyola (you can also view the original English article)

De uso frecuente en el comercio electrónico o sitios web de gran escala, mega menús son cada vez más populares, ya que ofrecen una solución efectiva al mostrar una gran cantidad de contenido manteniendo un diseño limpio. En este tutorial, aprenderemos cómo crear un cross-browser, impresionante sólo CSS desplegable mega menú, utilizando características CSS3.

Paso 1: Construcción de la barra de navegación

Vamos a empezar con un menú básico, construido con una lista desordenada y algún estilo CSS básico.

Crear el contenedor del menú

Ahora a aplicar un estilo CSS básico. Para el contenedor del menú, definimos un ancho fijo que estamos estableciendo los márgenes izquierdos y derecho para "auto".

Ahora, vamos a ver cómo podemos mejorarla con algunas características de CSS3. Necesitamos utilizar sintaxis diferentes para los navegadores basados en Webkit (como Safari) y para los navegadores basados en Mozilla (como Firefox).

Para esquinas redondeadas, la sintaxis será:

Para el fondo, vamos a usar gradientes y un color de suplencia para exploradores más antiguos. Para mantener la coherencia al elegir colores, hay una herramienta impresionante fachada llamada que le ayuda a encontrar más ligeros y tonos más oscuros de un color básico.

La primera línea aplica un color de fondo simple (para navegadores antiguos); la segunda y tercera líneas crear un degradado de la tapa al fondo con dos colores: #0272a7 y #013953.

Ahora podemos añadir un borde más oscuro y pulir el diseño con un borde de inserción "falsa" creado con la función de "box-shadow". La sintaxis es la misma para todos los navegadores compatibles: el primer valor es el desplazamiento horizontal, el segundo es el desplazamiento vertical, el tercero es el radio de desenfoque (un valor pequeño hace más agudo; es 1 píxel en nuestro ejemplo). Fijamos compensaciones todos a 0 para que el valor de desenfoque creará un borde ligero uniforme:

Aquí está el código final del CSS para el contenedor #menu:

Elementos del menú estilo

Vamos a empezar con todos los elementos de menú alineados a la izquierda y espacio con una margen derecha (el relleno será necesario para el estado hover):

Para el estado hover y el desplegable, he elegido un esquema de color gris para el fondo.

El color reserva va a ser un gris claro (#F4F4F4) y el gradiente se aplicará desde la parte superior (#F4F4F4) en la parte inferior (#EEEEEE). Esquinas redondeadas se aplicará sólo en las esquinas superiores como tenemos el desplegable de pegar en el menú.

El relleno izquierdo y derecho es ligeramente más pequeño aquí porque tenemos una frontera de 1 píxel que aparece en el hover. Si mantenemos el mismo relleno, elementos de menú se empujará dos pixeles a la derecha debido a los bordes izquierdos y derecho en hover mouse. Para evitar eso, te quitamos 1 píxel de acolchado en ambos lados, así que tenemos 9 píxeles en lugar de 10.

Luego, agregamos redondeados en la parte superior por lo que el desplegable se adhieren perfectamente en el menú principal:

Aquí está el final CSS para los elementos de menú en vuelo estacionario:

Para los enlaces, que aplicaremos una sombra agradable utilizando una sintaxis simple: los valores primero y segundo son desplazamientos horizontales y verticales de la sombra (1 píxel en nuestro ejemplo), la tercera es el desenfoque (1 píxel demasiado) y luego tenemos el color (negro) :

Aquí está el final CSS para los links:

En hover mouse, como el fondo es gris, usaremos un color más oscuro (#161616) para los enlaces y el color blanco para la sombra de texto:

Por último, necesitamos una forma de indicar si hay una caída hacia abajo o no mediante una imagen de la flecha simple como fondo, se colocará a la derecha con relleno y el margen superior se alineará a lo correctamente. En suspender este margen superior establecerá 7 píxeles en lugar de 8 ya que tenemos una frontera adicional que aparece en el hover mouse (de lo contrario, la flecha ser bajada 1 píxel en vuelo estacionario):

Aquí está nuestro código final para el envase de menú y vínculos; sólo el elemento "Inicio" no tiene ningún contenido desplegable por ahora:

Y el resultado es:

Building a CSS3 Mega Drop Down Menu

Paso 2: Codificación de la gota abajo

Un "clásico" menú desplegable de generalmente contiene listas anidadas dentro de elementos de la lista de los padres y se ve como:

Estructura general

Nuestro Mega menú, en lugar de las listas anidadas, simplemente usaremos DIVs estándar, que funcionan como cualquier lista anidada:

Se trata de la estructura básica de la gota abajo. La idea es poder incluir cualquier tipo de contenido, como los párrafos, imágenes, listas personalizadas o un formulario de contacto, organizada en columnas.

Desplegable de contenedores

Contenedores de diferentes tamaños celebrará el desplegable todo contenido. He elegido los nombres de las etiquetas según el número de columnas que contienen.

Para ocultar las bajas de la gota, vamos a utilizar posicionamiento absoluto con un margen izquierdo negativo:

El color de fondo de reserva es el mismo que el utilizado para los elementos de menú. Los navegadores modernos mostrarán un degradado a partir de #EEEEEE en la parte superior (para igualar el gradiente de artículo de menú padre) y terminando con #BBBBBB en la parte inferior:

Vamos a utilizar otra vez redondeados, excepto la parte superior izquierda uno:

Para ilustrar esto, vamos a ver como se vería si no habíamos prestado atención a los detalles:

Building a CSS3 Mega Drop Down Menu

Ahora aquí está nuestro ejemplo:

Building a CSS3 Mega Drop Down Menu

Como se puede ver, el desplegable pega muy bien a su elemento de menú primario.

Para tener una perfecta gota abajo la contenedor, tenemos que especificar el ancho de cada una:

Y para mostrar las bajas de la gota en hover mouse, simplemente vamos a usar:

Usando el desplegable de contenedores

Nuestras clases están listas para incluir en nuestro menú. Usaremos cada uno de ellos a partir de la columna 5, maquetación a una columna desplegable:

Aquí está una vista previa del código anterior:

Building a CSS3 Mega Drop Down Menu

Paso 3: Crear el desplegable de columnas contenedor

Ahora que ya tenemos los envases listos, vamos a crear columnas de aumentar tamaños, siguiendo los principios del sistema 960 grid.

Utilizando columnas de

Aquí es un ejemplo de un menú desplegable que contiene varias columnas. En este ejemplo, tenemos diferentes combinaciones utilizando todo tipo de columnas:

Vista previa del código:

Building a CSS3 Mega Drop Down Menu

Paso 4: Alinear a la derecha

Ahora, vamos a ver cómo nos podemos alinear nuestro menú y el desplegable de contenido hasta el borde derecho de la barra de navegación; también debe cambiar no sólo el elemento de menú, pero el contenedor desplegable.

Para lograr esto, vamos a añadir una clase nueva denominada .menu_right al elemento padre, así que restablecer el margen derecho y flotar a la derecha:

A continuación, vamos a ver la gota hacia abajo. En el código CSS anterior, esquinas redondeadas se aplicaron a todos los rincones excepto la izquierda-superior, para coincida con el fondo del elemento de menú primario. Ahora queremos esta caída abajo del palillo en el borde derecho de la opción del menú principal. Así, podrá sobrescribir los valores de la frontera-radio con una nueva clase llamada .align_right y la esquina superior derecha se establece en 0.

Por último pero no menos importante, queremos hacer la gota aparecen abajo a la derecha; para utilizar nuestra nueva clase y restablecer el valor izquierdo, entonces hacerlo pegarse a la derecha:

Ahora está listo para ser utilizado en el menú:

Y un pequeño adelanto del código anterior:

Building a CSS3 Mega Drop Down Menu

Paso 5: Agregar y estilo contenido

Ahora que tenemos lista toda la estructura, podemos agregar tanto contenido como queramos: texto, listas, imágenes, etcetera.

General estilos

Comencemos con algunos básico estilo para los párrafos y títulos:

Podemos aplicar un color azul para los enlaces dentro de la gota abajo:

Listas de estilos

Vamos a renovar nuestras listas; tenemos que restablecer un estilo como el color de fondo o las fronteras que se utilizan en la barra de navegación:

Imágenes de peinado

Y para crear un párrafo con una imagen de la izquierda:

Cuadros de texto

Para resaltar algún contenido, este es un ejemplo de una caja oscura con esquinas redondeadas y una sombra sutil detalle:

Listas de actualizaciones

Y para terminar, aquí es otra manera de estilo de sus listas utilizando, otra vez, algunos CSS3:

Paso 6: Manejo de IE6 y compatibilidades

Todos los navegadores mango flotar en las etiquetas de anclaje no... salvo Internet Explorer 6; así que nuestro Mega menú todavía no funciona con este navegador antiguo. Podemos solucionar este problema gracias a un archivo de comportamiento que añade esta funcionalidad. Puede encontrar aquí y utilizar Comentarios condicionales para destino IE6 pueden encontrar explicaciones más a través de este artículo de CSS-Tricks.

Objetivo IE6, utilizaremos el siguiente código:

He utilizado unos archivos del PNG en este tutorial, y como todos saben, IE6 no soporta transparencia así que tenemos diferentes soluciones:

  • Convertir a formato GIF o PNG-8
  • Utilizar un script
  • Establecer un color de fondo que no sea el gris por defecto con TweakPNG por ejemplo

Voy a dejar elegir uno que se adapte a sus necesidades. Ahora, vamos a revisar un completo ejemplo de trabajo.

Ejemplo final

Elemento HTML

Parte de la CSS

Enlaces interesantes y relevantes

Conclusión

Espero que hayas disfrutado este tutorial sobre cómo crear menús de mega. ¡Gracias por seguirnos a lo largo de!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.