() translation by (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.
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#">About</a></li> |
4 |
<li><a href="#">Services</a></li> |
5 |
<li><a href="#">Portfolio</a></li> |
6 |
<li><a href="#">Contact</a></li> |
7 |
</ul>
|
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".
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
}
|
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á:
1 |
-moz-border-radius: 10px |
2 |
-webkit-border-radius: 10px; |
3 |
border-radius: 10px; |
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.
1 |
background: #014464; |
2 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
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:
1 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
2 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
3 |
box-shadow:inset 0px 0px 1px #edf9ff; |
Aquí está el código final del CSS para el contenedor #menu:
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
|
10 |
-moz-border-radius: 10px; |
11 |
-webkit-border-radius: 10px; |
12 |
border-radius: 10px; |
13 |
|
14 |
/* Background color and gradients */
|
15 |
|
16 |
background: #014464; |
17 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
18 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
19 |
|
20 |
/* Borders */
|
21 |
|
22 |
border: 1px solid #002232; |
23 |
|
24 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
25 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
26 |
box-shadow:inset 0px 0px 1px #edf9ff; |
27 |
}
|
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):
1 |
#menu li { |
2 |
float:left; |
3 |
display:block; |
4 |
text-align:center; |
5 |
position:relative; |
6 |
padding: 4px 10px 4px 10px; |
7 |
margin-right:30px; |
8 |
margin-top:7px; |
9 |
border:none; |
10 |
}
|
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ú.
1 |
background: #F4F4F4; |
2 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
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.
1 |
border: 1px solid #777777; |
2 |
padding: 4px 9px 4px 9px; |
Luego, agregamos redondeados en la parte superior por lo que el desplegable se adhieren perfectamente en el menú principal:
1 |
-moz-border-radius: 5px 5px 0px 0px; |
2 |
-webkit-border-radius: 5px 5px 0px 0px; |
3 |
border-radius: 5px 5px 0px 0px; |
Aquí está el final CSS para los elementos de menú en vuelo estacionario:
1 |
#menu li:hover { |
2 |
border: 1px solid #777777; |
3 |
padding: 4px 9px 4px 9px; |
4 |
|
5 |
/* Background color and gradients */
|
6 |
|
7 |
background: #F4F4F4; |
8 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
9 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
10 |
|
11 |
/* Rounded corners */
|
12 |
|
13 |
-moz-border-radius: 5px 5px 0px 0px; |
14 |
-webkit-border-radius: 5px 5px 0px 0px; |
15 |
border-radius: 5px 5px 0px 0px; |
16 |
}
|
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) :
1 |
text-shadow: 1px 1px 1px #000; |
Aquí está el final CSS para los links:
1 |
#menu li a { |
2 |
font-family:Arial, Helvetica, sans-serif; |
3 |
font-size:14px; |
4 |
color: #EEEEEE; |
5 |
display:block; |
6 |
outline:0; |
7 |
text-decoration:none; |
8 |
text-shadow: 1px 1px 1px #000; |
9 |
}
|
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:
1 |
#menu li:hover a { |
2 |
color:#161616; |
3 |
text-shadow: 1px 1px 1px #FFFFFF; |
4 |
}
|
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):
1 |
#menu li .drop { |
2 |
padding-right:21px; |
3 |
background:url("img/drop.png") no-repeat right 8px; |
4 |
}
|
5 |
#menu li:hover .drop { |
6 |
background:url("img/drop.png") no-repeat right 7px; |
7 |
}
|
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:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#" class="drop">About</a></li> |
4 |
<li><a href="#" class="drop">Services</a></li> |
5 |
<li><a href="#" class="drop">Portfolio</a></li> |
6 |
<li><a href="#" class="drop">Contact</a></li> |
7 |
</ul>
|
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
|
10 |
-moz-border-radius: 10px; |
11 |
-webkit-border-radius: 10px; |
12 |
border-radius: 10px; |
13 |
|
14 |
/* Background color and gradients */
|
15 |
|
16 |
background: #014464; |
17 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
18 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
19 |
|
20 |
/* Borders */
|
21 |
|
22 |
border: 1px solid #002232; |
23 |
|
24 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
25 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
26 |
box-shadow:inset 0px 0px 1px #edf9ff; |
27 |
}
|
28 |
|
29 |
#menu li { |
30 |
float:left; |
31 |
display:block; |
32 |
text-align:center; |
33 |
position:relative; |
34 |
padding: 4px 10px 4px 10px; |
35 |
margin-right:30px; |
36 |
margin-top:7px; |
37 |
border:none; |
38 |
}
|
39 |
|
40 |
#menu li:hover { |
41 |
border: 1px solid #777777; |
42 |
padding: 4px 9px 4px 9px; |
43 |
|
44 |
/* Background color and gradients */
|
45 |
|
46 |
background: #F4F4F4; |
47 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
48 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
49 |
|
50 |
/* Rounded corners */
|
51 |
|
52 |
-moz-border-radius: 5px 5px 0px 0px; |
53 |
-webkit-border-radius: 5px 5px 0px 0px; |
54 |
border-radius: 5px 5px 0px 0px; |
55 |
}
|
56 |
|
57 |
#menu li a { |
58 |
font-family:Arial, Helvetica, sans-serif; |
59 |
font-size:14px; |
60 |
color: #EEEEEE; |
61 |
display:block; |
62 |
outline:0; |
63 |
text-decoration:none; |
64 |
text-shadow: 1px 1px 1px #000; |
65 |
}
|
66 |
|
67 |
#menu li:hover a { |
68 |
color:#161616; |
69 |
text-shadow: 1px 1px 1px #FFFFFF; |
70 |
}
|
71 |
#menu li .drop { |
72 |
padding-right:21px; |
73 |
background:url("img/drop.png") no-repeat right 8px; |
74 |
}
|
75 |
#menu li:hover .drop { |
76 |
background:url("img/drop.png") no-repeat right 7px; |
77 |
}
|
Y el resultado es:
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:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Item 1</a>< |
3 |
<ul> |
4 |
<li><a href="#">Subitem 1</a></li> |
5 |
<li><a href="#">Subitem 2</a></li> |
6 |
<li><a href="#">Subitem 3</a></li> |
7 |
</ul>
|
8 |
</li>
|
9 |
<li><a href="#">Item 2</a>< |
10 |
<ul> |
11 |
<li><a href="#">Subitem 1</a></li> |
12 |
<li><a href="#">Subitem 2</a></li> |
13 |
</ul>
|
14 |
</li>
|
15 |
</ul>
|
Estructura general
Nuestro Mega menú, en lugar de las listas anidadas, simplemente usaremos DIVs estándar, que funcionan como cualquier lista anidada:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Item 1</a> |
3 |
<div>
|
4 |
Drop down Content |
5 |
<div>
|
6 |
</li>
|
7 |
<li><a href="#">Item 2</a> |
8 |
<div>
|
9 |
Drop down Content |
10 |
<div>
|
11 |
</li>
|
12 |
</ul>
|
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:
1 |
position:absolute; |
2 |
left:-999em; |
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:
1 |
background:#F4F4F4; |
2 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
Vamos a utilizar otra vez redondeados, excepto la parte superior izquierda uno:
1 |
-moz-border-radius: 0px 5px 5px 5px; |
2 |
-webkit-border-radius: 0px 5px 5px 5px; |
3 |
border-radius: 0px 5px 5px 5px; |
1 |
.dropdown_1column, |
2 |
.dropdown_2columns, |
3 |
.dropdown_3columns, |
4 |
.dropdown_4columns, |
5 |
.dropdown_5columns { |
6 |
margin:4px auto; |
7 |
position:absolute; |
8 |
left:-999em; /* Hides the drop down */ |
9 |
text-align:left; |
10 |
padding:10px 5px 10px 5px; |
11 |
border:1px solid #777777; |
12 |
border-top:none; |
13 |
|
14 |
/* Gradient background */
|
15 |
background:#F4F4F4; |
16 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
17 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
18 |
|
19 |
/* Rounded Corners */
|
20 |
-moz-border-radius: 0px 5px 5px 5px; |
21 |
-webkit-border-radius: 0px 5px 5px 5px; |
22 |
border-radius: 0px 5px 5px 5px; |
23 |
}
|
Para ilustrar esto, vamos a ver como se vería si no habíamos prestado atención a los detalles:
Ahora aquí está nuestro ejemplo:
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:
1 |
.dropdown_1column {width: 140px;} |
2 |
.dropdown_2columns {width: 280px;} |
3 |
.dropdown_3columns {width: 420px;} |
4 |
.dropdown_4columns {width: 560px;} |
5 |
.dropdown_5columns {width: 700px;} |
Y para mostrar las bajas de la gota en hover mouse, simplemente vamos a usar:
1 |
#menu li:hover .dropdown_1column, |
2 |
#menu li:hover .dropdown_2columns, |
3 |
#menu li:hover .dropdown_3columns, |
4 |
#menu li:hover .dropdown_4columns, |
5 |
#menu li:hover .dropdown_5columns { |
6 |
left:-1px;top:auto; |
7 |
}
|
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:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#" class="drop">5 Columns</a> |
4 |
<div class="dropdown_5columns"> |
5 |
<p>5 Columns content</p> |
6 |
</div>
|
7 |
</li>
|
8 |
<li><a href="#" class="drop">4 Columns</a> |
9 |
<div class="dropdown_4columns"> |
10 |
<p>4 Columns content</p> |
11 |
</div>
|
12 |
</li>
|
13 |
<li><a href="#" class="drop">3 Columns</a> |
14 |
<div class="dropdown_3columns"> |
15 |
<p>3 Columns content</p> |
16 |
</div>
|
17 |
</li>
|
18 |
<li><a href="#" class="drop">2 Columns</a> |
19 |
<div class="dropdown_2columns"> |
20 |
<p>2 Columns content</p> |
21 |
</div>
|
22 |
</li>
|
23 |
<li><a href="#" class="drop">1 Column</a> |
24 |
<div class="dropdown_1column"> |
25 |
<p>1 Column content</p> |
26 |
</div>
|
27 |
</li>
|
28 |
</ul>
|
Aquí está una vista previa del código anterior:
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.
1 |
.col_1, |
2 |
.col_2, |
3 |
.col_3, |
4 |
.col_4, |
5 |
.col_5 { |
6 |
display:inline; |
7 |
float: left; |
8 |
position: relative; |
9 |
margin-left: 5px; |
10 |
margin-right: 5px; |
11 |
}
|
12 |
.col_1 {width:130px;} |
13 |
.col_2 {width:270px;} |
14 |
.col_3 {width:410px;} |
15 |
.col_4 {width:550px;} |
16 |
.col_5 {width:690px;} |
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:
1 |
<ul id="menu"> |
2 |
<li><a href="#" class="drop">5 Columns</a> |
3 |
<div class="dropdown_5columns"> |
4 |
<div class="col_5"> |
5 |
<p>This is a 5 Columns content</p> |
6 |
</div>
|
7 |
<div class="col_1"> |
8 |
<p>This is a 1 Column content</p> |
9 |
</div>
|
10 |
<div class="col_1"> |
11 |
<p>This is a 1 Column content</p> |
12 |
</div>
|
13 |
<div class="col_1"> |
14 |
<p>This is a 1 Column content</p> |
15 |
</div>
|
16 |
<div class="col_1"> |
17 |
<p>This is a 1 Column content</p> |
18 |
</div>
|
19 |
<div class="col_1"> |
20 |
<p>This is a 1 Column content</p> |
21 |
</div>
|
22 |
<div class="col_4"> |
23 |
<p>This is a 4 Columns content</p> |
24 |
</div>
|
25 |
<div class="col_1"> |
26 |
<p>This is a 1 Column content</p> |
27 |
</div>
|
28 |
<div class="col_3"> |
29 |
<p>This is a 3 Columns content</p> |
30 |
</div>
|
31 |
<div class="col_2"> |
32 |
<p>This is a 2 Columns content</p> |
33 |
</div>
|
34 |
</div>
|
35 |
</li>
|
36 |
</ul>
|
Vista previa del código:
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:
1 |
#menu .menu_right { |
2 |
float:right; |
3 |
margin-right:0px; |
4 |
}
|
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.
1 |
#menu li .align_right { |
2 |
/* Rounded Corners */
|
3 |
-moz-border-radius: 5px 0px 5px 5px; |
4 |
-webkit-border-radius: 5px 0px 5px 5px; |
5 |
border-radius: 5px 0px 5px 5px; |
6 |
}
|
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:
1 |
#menu li:hover .align_right { |
2 |
left:auto; |
3 |
right:-1px; |
4 |
top:auto; |
5 |
}
|
Ahora está listo para ser utilizado en el menú:
1 |
<li class="menu_right"><a href="#" class="drop">Right</a> |
2 |
<div class="dropdown_1column align_right"> |
3 |
<div class="col_1"> |
4 |
<p>This is a 1 Column content</p> |
5 |
</div>
|
6 |
</div>
|
7 |
</li>
|
Y un pequeño adelanto del código anterior:
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:
1 |
#menu p, #menu h2, #menu h3, #menu ul li { |
2 |
font-family:Arial, Helvetica, sans-serif; |
3 |
line-height:21px; |
4 |
font-size:12px; |
5 |
text-align:left; |
6 |
text-shadow: 1px 1px 1px #FFFFFF; |
7 |
}
|
8 |
#menu h2 { |
9 |
font-size:21px; |
10 |
font-weight:400; |
11 |
letter-spacing:-1px; |
12 |
margin:7px 0 14px 0; |
13 |
padding-bottom:14px; |
14 |
border-bottom:1px solid #666666; |
15 |
}
|
16 |
#menu h3 { |
17 |
font-size:14px; |
18 |
margin:7px 0 14px 0; |
19 |
padding-bottom:7px; |
20 |
border-bottom:1px solid #888888; |
21 |
}
|
22 |
#menu p { |
23 |
line-height:18px; |
24 |
margin:0 0 10px 0; |
25 |
}
|
26 |
.strong { |
27 |
font-weight:bold; |
28 |
}
|
29 |
.italic { |
30 |
font-style:italic; |
31 |
}
|
Podemos aplicar un color azul para los enlaces dentro de la gota abajo:
1 |
#menu li:hover div a { |
2 |
font-size:12px; |
3 |
color:#015b86; |
4 |
}
|
5 |
#menu li:hover div a:hover { |
6 |
color:#029feb; |
7 |
}
|
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:
1 |
#menu li ul { |
2 |
list-style:none; |
3 |
padding:0; |
4 |
margin:0 0 12px 0; |
5 |
}
|
6 |
#menu li ul li { |
7 |
font-size:12px; |
8 |
line-height:24px; |
9 |
position:relative; |
10 |
text-shadow: 1px 1px 1px #ffffff; |
11 |
padding:0; |
12 |
margin:0; |
13 |
float:none; |
14 |
text-align:left; |
15 |
width:130px; |
16 |
}
|
17 |
#menu li ul li:hover { |
18 |
background:none; |
19 |
border:none; |
20 |
padding:0; |
21 |
margin:0; |
22 |
}
|
Imágenes de peinado
1 |
.imgshadow { |
2 |
background:#FFFFFF; |
3 |
padding:4px; |
4 |
border:1px solid #777777; |
5 |
margin-top:5px; |
6 |
-moz-box-shadow:0px 0px 5px #666666; |
7 |
-webkit-box-shadow:0px 0px 5px #666666; |
8 |
box-shadow:0px 0px 5px #666666; |
9 |
}
|
Y para crear un párrafo con una imagen de la izquierda:
1 |
.img_left { |
2 |
width:auto; |
3 |
float:left; |
4 |
margin:5px 15px 5px 5px; |
5 |
}
|
Cuadros de texto
Para resaltar algún contenido, este es un ejemplo de una caja oscura con esquinas redondeadas y una sombra sutil detalle:
1 |
#menu li .black_box { |
2 |
background-color:#333333; |
3 |
color: #eeeeee; |
4 |
text-shadow: 1px 1px 1px #000; |
5 |
padding:4px 6px 4px 6px; |
6 |
|
7 |
/* Rounded Corners */
|
8 |
-moz-border-radius: 5px; |
9 |
-webkit-border-radius: 5px; |
10 |
border-radius: 5px; |
11 |
|
12 |
/* Shadow */
|
13 |
-webkit-box-shadow:inset 0 0 3px #000000; |
14 |
-moz-box-shadow:inset 0 0 3px #000000; |
15 |
box-shadow:inset 0 0 3px #000000; |
16 |
}
|
Listas de actualizaciones
Y para terminar, aquí es otra manera de estilo de sus listas utilizando, otra vez, algunos CSS3:
1 |
#menu li .greybox li { |
2 |
background:#F4F4F4; |
3 |
border:1px solid #bbbbbb; |
4 |
margin:0px 0px 4px 0px; |
5 |
padding:4px 6px 4px 6px; |
6 |
width:116px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
-moz-border-radius: 5px; |
10 |
-webkit-border-radius: 5px; |
11 |
border-radius: 5px; |
12 |
}
|
13 |
#menu li .greybox li:hover { |
14 |
background:#ffffff; |
15 |
border:1px solid #aaaaaa; |
16 |
padding:4px 6px 4px 6px; |
17 |
margin:0px 0px 4px 0px; |
18 |
}
|
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:
1 |
<!--[if IE 6]>
|
2 |
<style>
|
3 |
body {behavior: url("csshover3.htc");}
|
4 |
</style>
|
5 |
<![endif]-->
|
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
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 |
|
6 |
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" /> |
7 |
|
8 |
<title>Mega Drop Down Menu</title> |
9 |
<!--[if IE 6]>
|
10 |
<style>
|
11 |
body {behavior: url("csshover3.htc");}
|
12 |
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
|
13 |
</style>
|
14 |
<![endif]-->
|
15 |
|
16 |
</head>
|
17 |
|
18 |
<body>
|
19 |
|
20 |
<ul id="menu"> |
21 |
|
22 |
<li><a href="#" class="drop">Home</a><!-- Begin Home Item --> |
23 |
|
24 |
<div class="dropdown_2columns"><!-- Begin 2 columns container --> |
25 |
|
26 |
<div class="col_2"> |
27 |
<h2>Welcome !</h2> |
28 |
</div>
|
29 |
|
30 |
<div class="col_2"> |
31 |
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p> |
32 |
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p> |
33 |
</div>
|
34 |
|
35 |
<div class="col_2"> |
36 |
<h2>Cross Browser Support</h2> |
37 |
</div>
|
38 |
|
39 |
<div class="col_1"> |
40 |
<img src="img/browsers.png" width="125" height="48" alt="" /> |
41 |
</div>
|
42 |
|
43 |
<div class="col_1"> |
44 |
<p>This mega menu has been tested in all major browsers.</p> |
45 |
</div>
|
46 |
|
47 |
</div><!-- End 2 columns container --> |
48 |
|
49 |
</li><!-- End Home Item --> |
50 |
|
51 |
<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item --> |
52 |
|
53 |
<div class="dropdown_5columns"><!-- Begin 5 columns container --> |
54 |
|
55 |
<div class="col_5"> |
56 |
<h2>This is an example of a large container with 5 columns</h2> |
57 |
</div>
|
58 |
|
59 |
<div class="col_1"> |
60 |
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p> |
61 |
</div>
|
62 |
|
63 |
<div class="col_1"> |
64 |
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p> |
65 |
</div>
|
66 |
|
67 |
<div class="col_1"> |
68 |
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p> |
69 |
</div>
|
70 |
|
71 |
<div class="col_1"> |
72 |
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p> |
73 |
</div>
|
74 |
|
75 |
<div class="col_1"> |
76 |
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p> |
77 |
</div>
|
78 |
|
79 |
<div class="col_5"> |
80 |
<h2>Here is some content with side images</h2> |
81 |
</div>
|
82 |
|
83 |
<div class="col_3"> |
84 |
|
85 |
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
86 |
<p>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="#">Read more...</a></p> |
87 |
|
88 |
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
89 |
<p>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="#">Read more...</a></p> |
90 |
|
91 |
</div>
|
92 |
|
93 |
<div class="col_2"> |
94 |
|
95 |
<p class="black_box">This is a black box, you can use it to highligh some content. 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.</p> |
96 |
|
97 |
</div>
|
98 |
|
99 |
</div><!-- End 5 columns container --> |
100 |
|
101 |
</li><!-- End 5 columns Item --> |
102 |
|
103 |
<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item --> |
104 |
|
105 |
<div class="dropdown_4columns"><!-- Begin 4 columns container --> |
106 |
|
107 |
<div class="col_4"> |
108 |
<h2>This is a heading title</h2> |
109 |
</div>
|
110 |
|
111 |
<div class="col_1"> |
112 |
|
113 |
<h3>Some Links</h3> |
114 |
<ul>
|
115 |
<li><a href="#">ThemeForest</a></li> |
116 |
<li><a href="#">GraphicRiver</a></li> |
117 |
<li><a href="#">ActiveDen</a></li> |
118 |
<li><a href="#">VideoHive</a></li> |
119 |
<li><a href="#">3DOcean</a></li> |
120 |
</ul>
|
121 |
|
122 |
</div>
|
123 |
|
124 |
<div class="col_1"> |
125 |
|
126 |
<h3>Useful Links</h3> |
127 |
<ul>
|
128 |
<li><a href="#">NetTuts</a></li> |
129 |
<li><a href="#">VectorTuts</a></li> |
130 |
<li><a href="#">PsdTuts</a></li> |
131 |
<li><a href="#">PhotoTuts</a></li> |
132 |
<li><a href="#">ActiveTuts</a></li> |
133 |
</ul>
|
134 |
|
135 |
</div>
|
136 |
|
137 |
<div class="col_1"> |
138 |
|
139 |
<h3>Other Stuff</h3> |
140 |
<ul>
|
141 |
<li><a href="#">FreelanceSwitch</a></li> |
142 |
<li><a href="#">Creattica</a></li> |
143 |
<li><a href="#">WorkAwesome</a></li> |
144 |
<li><a href="#">Mac Apps</a></li> |
145 |
<li><a href="#">Web Apps</a></li> |
146 |
</ul>
|
147 |
|
148 |
</div>
|
149 |
|
150 |
<div class="col_1"> |
151 |
|
152 |
<h3>Misc</h3> |
153 |
<ul>
|
154 |
<li><a href="#">Design</a></li> |
155 |
<li><a href="#">Logo</a></li> |
156 |
<li><a href="#">Flash</a></li> |
157 |
<li><a href="#">Illustration</a></li> |
158 |
<li><a href="#">More...</a></li> |
159 |
</ul>
|
160 |
|
161 |
</div>
|
162 |
|
163 |
</div><!-- End 4 columns container --> |
164 |
|
165 |
</li><!-- End 4 columns Item --> |
166 |
|
167 |
<li class="menu_right"><a href="#" class="drop">1 Column</a> |
168 |
|
169 |
<div class="dropdown_1column align_right"> |
170 |
|
171 |
<div class="col_1"> |
172 |
|
173 |
<ul class="simple"> |
174 |
<li><a href="#">FreelanceSwitch</a></li> |
175 |
<li><a href="#">Creattica</a></li> |
176 |
<li><a href="#">WorkAwesome</a></li> |
177 |
<li><a href="#">Mac Apps</a></li> |
178 |
<li><a href="#">Web Apps</a></li> |
179 |
<li><a href="#">NetTuts</a></li> |
180 |
<li><a href="#">VectorTuts</a></li> |
181 |
<li><a href="#">PsdTuts</a></li> |
182 |
<li><a href="#">PhotoTuts</a></li> |
183 |
<li><a href="#">ActiveTuts</a></li> |
184 |
<li><a href="#">Design</a></li> |
185 |
<li><a href="#">Logo</a></li> |
186 |
<li><a href="#">Flash</a></li> |
187 |
<li><a href="#">Illustration</a></li> |
188 |
<li><a href="#">More...</a></li> |
189 |
</ul>
|
190 |
|
191 |
</div>
|
192 |
|
193 |
</div>
|
194 |
|
195 |
</li>
|
196 |
|
197 |
<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item --> |
198 |
|
199 |
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container --> |
200 |
|
201 |
<div class="col_3"> |
202 |
<h2>Lists in Boxes</h2> |
203 |
</div>
|
204 |
|
205 |
<div class="col_1"> |
206 |
|
207 |
<ul class="greybox"> |
208 |
<li><a href="#">FreelanceSwitch</a></li> |
209 |
<li><a href="#">Creattica</a></li> |
210 |
<li><a href="#">WorkAwesome</a></li> |
211 |
<li><a href="#">Mac Apps</a></li> |
212 |
<li><a href="#">Web Apps</a></li> |
213 |
</ul>
|
214 |
|
215 |
</div>
|
216 |
|
217 |
<div class="col_1"> |
218 |
|
219 |
<ul class="greybox"> |
220 |
<li><a href="#">ThemeForest</a></li> |
221 |
<li><a href="#">GraphicRiver</a></li> |
222 |
<li><a href="#">ActiveDen</a></li> |
223 |
<li><a href="#">VideoHive</a></li> |
224 |
<li><a href="#">3DOcean</a></li> |
225 |
</ul>
|
226 |
|
227 |
</div>
|
228 |
|
229 |
<div class="col_1"> |
230 |
|
231 |
<ul class="greybox"> |
232 |
<li><a href="#">Design</a></li> |
233 |
<li><a href="#">Logo</a></li> |
234 |
<li><a href="#">Flash</a></li> |
235 |
<li><a href="#">Illustration</a></li> |
236 |
<li><a href="#">More...</a></li> |
237 |
</ul>
|
238 |
|
239 |
</div>
|
240 |
|
241 |
<div class="col_3"> |
242 |
<h2>Here are some image examples</h2> |
243 |
</div>
|
244 |
|
245 |
<div class="col_3"> |
246 |
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
247 |
<p>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="#">Read more...</a></p> |
248 |
|
249 |
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
250 |
<p>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="#">Read more...</a></p> |
251 |
</div>
|
252 |
|
253 |
</div><!-- End 3 columns container --> |
254 |
|
255 |
</li><!-- End 3 columns Item --> |
256 |
|
257 |
|
258 |
</ul>
|
259 |
|
260 |
</body>
|
261 |
|
262 |
</html>
|
Parte de la CSS
1 |
body, ul, li { |
2 |
font-size:14px; |
3 |
font-family:Arial, Helvetica, sans-serif; |
4 |
line-height:21px; |
5 |
text-align:left; |
6 |
}
|
7 |
|
8 |
/* Navigation Bar */
|
9 |
|
10 |
#menu { |
11 |
list-style:none; |
12 |
width:940px; |
13 |
margin:30px auto 0px auto; |
14 |
height:43px; |
15 |
padding:0px 20px 0px 20px; |
16 |
|
17 |
/* Rounded Corners */
|
18 |
|
19 |
-moz-border-radius: 10px; |
20 |
-webkit-border-radius: 10px; |
21 |
border-radius: 10px; |
22 |
|
23 |
/* Background color and gradients */
|
24 |
|
25 |
background: #014464; |
26 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
27 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
28 |
|
29 |
/* Borders */
|
30 |
|
31 |
border: 1px solid #002232; |
32 |
|
33 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
34 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
35 |
box-shadow:inset 0px 0px 1px #edf9ff; |
36 |
}
|
37 |
|
38 |
#menu li { |
39 |
float:left; |
40 |
text-align:center; |
41 |
position:relative; |
42 |
padding: 4px 10px 4px 10px; |
43 |
margin-right:30px; |
44 |
margin-top:7px; |
45 |
border:none; |
46 |
}
|
47 |
|
48 |
#menu li:hover { |
49 |
border: 1px solid #777777; |
50 |
padding: 4px 9px 4px 9px; |
51 |
|
52 |
/* Background color and gradients */
|
53 |
|
54 |
background: #F4F4F4; |
55 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
56 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
57 |
|
58 |
/* Rounded corners */
|
59 |
|
60 |
-moz-border-radius: 5px 5px 0px 0px; |
61 |
-webkit-border-radius: 5px 5px 0px 0px; |
62 |
border-radius: 5px 5px 0px 0px; |
63 |
}
|
64 |
|
65 |
#menu li a { |
66 |
font-family:Arial, Helvetica, sans-serif; |
67 |
font-size:14px; |
68 |
color: #EEEEEE; |
69 |
display:block; |
70 |
outline:0; |
71 |
text-decoration:none; |
72 |
text-shadow: 1px 1px 1px #000; |
73 |
}
|
74 |
|
75 |
#menu li:hover a { |
76 |
color:#161616; |
77 |
text-shadow: 1px 1px 1px #FFFFFF; |
78 |
}
|
79 |
#menu li .drop { |
80 |
padding-right:21px; |
81 |
background:url("img/drop.png") no-repeat right 8px; |
82 |
}
|
83 |
#menu li:hover .drop { |
84 |
background:url("img/drop.png") no-repeat right 7px; |
85 |
}
|
86 |
|
87 |
/* Drop Down */
|
88 |
|
89 |
.dropdown_1column, |
90 |
.dropdown_2columns, |
91 |
.dropdown_3columns, |
92 |
.dropdown_4columns, |
93 |
.dropdown_5columns { |
94 |
margin:4px auto; |
95 |
float:left; |
96 |
position:absolute; |
97 |
left:-999em; /* Hides the drop down */ |
98 |
text-align:left; |
99 |
padding:10px 5px 10px 5px; |
100 |
border:1px solid #777777; |
101 |
border-top:none; |
102 |
|
103 |
/* Gradient background */
|
104 |
background:#F4F4F4; |
105 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
106 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
107 |
|
108 |
/* Rounded Corners */
|
109 |
-moz-border-radius: 0px 5px 5px 5px; |
110 |
-webkit-border-radius: 0px 5px 5px 5px; |
111 |
border-radius: 0px 5px 5px 5px; |
112 |
}
|
113 |
|
114 |
.dropdown_1column {width: 140px;} |
115 |
.dropdown_2columns {width: 280px;} |
116 |
.dropdown_3columns {width: 420px;} |
117 |
.dropdown_4columns {width: 560px;} |
118 |
.dropdown_5columns {width: 700px;} |
119 |
|
120 |
#menu li:hover .dropdown_1column, |
121 |
#menu li:hover .dropdown_2columns, |
122 |
#menu li:hover .dropdown_3columns, |
123 |
#menu li:hover .dropdown_4columns, |
124 |
#menu li:hover .dropdown_5columns { |
125 |
left:-1px; |
126 |
top:auto; |
127 |
}
|
128 |
|
129 |
/* Columns */
|
130 |
|
131 |
.col_1, |
132 |
.col_2, |
133 |
.col_3, |
134 |
.col_4, |
135 |
.col_5 { |
136 |
display:inline; |
137 |
float: left; |
138 |
position: relative; |
139 |
margin-left: 5px; |
140 |
margin-right: 5px; |
141 |
}
|
142 |
.col_1 {width:130px;} |
143 |
.col_2 {width:270px;} |
144 |
.col_3 {width:410px;} |
145 |
.col_4 {width:550px;} |
146 |
.col_5 {width:690px;} |
147 |
|
148 |
/* Right alignment */
|
149 |
|
150 |
#menu .menu_right { |
151 |
float:right; |
152 |
margin-right:0px; |
153 |
}
|
154 |
#menu li .align_right { |
155 |
/* Rounded Corners */
|
156 |
-moz-border-radius: 5px 0px 5px 5px; |
157 |
-webkit-border-radius: 5px 0px 5px 5px; |
158 |
border-radius: 5px 0px 5px 5px; |
159 |
}
|
160 |
#menu li:hover .align_right { |
161 |
left:auto; |
162 |
right:-1px; |
163 |
top:auto; |
164 |
}
|
165 |
|
166 |
/* Drop Down Content Stylings */
|
167 |
|
168 |
#menu p, #menu h2, #menu h3, #menu ul li { |
169 |
font-family:Arial, Helvetica, sans-serif; |
170 |
line-height:21px; |
171 |
font-size:12px; |
172 |
text-align:left; |
173 |
text-shadow: 1px 1px 1px #FFFFFF; |
174 |
}
|
175 |
#menu h2 { |
176 |
font-size:21px; |
177 |
font-weight:400; |
178 |
letter-spacing:-1px; |
179 |
margin:7px 0 14px 0; |
180 |
padding-bottom:14px; |
181 |
border-bottom:1px solid #666666; |
182 |
}
|
183 |
#menu h3 { |
184 |
font-size:14px; |
185 |
margin:7px 0 14px 0; |
186 |
padding-bottom:7px; |
187 |
border-bottom:1px solid #888888; |
188 |
}
|
189 |
#menu p { |
190 |
line-height:18px; |
191 |
margin:0 0 10px 0; |
192 |
}
|
193 |
|
194 |
#menu li:hover div a { |
195 |
font-size:12px; |
196 |
color:#015b86; |
197 |
}
|
198 |
#menu li:hover div a:hover { |
199 |
color:#029feb; |
200 |
}
|
201 |
.strong { |
202 |
font-weight:bold; |
203 |
}
|
204 |
.italic { |
205 |
font-style:italic; |
206 |
}
|
207 |
.imgshadow { |
208 |
background:#FFFFFF; |
209 |
padding:4px; |
210 |
border:1px solid #777777; |
211 |
margin-top:5px; |
212 |
-moz-box-shadow:0px 0px 5px #666666; |
213 |
-webkit-box-shadow:0px 0px 5px #666666; |
214 |
box-shadow:0px 0px 5px #666666; |
215 |
}
|
216 |
.img_left { /* Image sticks to the left */ |
217 |
width:auto; |
218 |
float:left; |
219 |
margin:5px 15px 5px 5px; |
220 |
}
|
221 |
#menu li .black_box { |
222 |
background-color:#333333; |
223 |
color: #eeeeee; |
224 |
text-shadow: 1px 1px 1px #000; |
225 |
padding:4px 6px 4px 6px; |
226 |
|
227 |
/* Rounded Corners */
|
228 |
-moz-border-radius: 5px; |
229 |
-webkit-border-radius: 5px; |
230 |
border-radius: 5px; |
231 |
|
232 |
/* Shadow */
|
233 |
-webkit-box-shadow:inset 0 0 3px #000000; |
234 |
-moz-box-shadow:inset 0 0 3px #000000; |
235 |
box-shadow:inset 0 0 3px #000000; |
236 |
}
|
237 |
#menu li ul { |
238 |
list-style:none; |
239 |
padding:0; |
240 |
margin:0 0 12px 0; |
241 |
}
|
242 |
#menu li ul li { |
243 |
font-size:12px; |
244 |
line-height:24px; |
245 |
position:relative; |
246 |
text-shadow: 1px 1px 1px #ffffff; |
247 |
padding:0; |
248 |
margin:0; |
249 |
float:none; |
250 |
text-align:left; |
251 |
width:130px; |
252 |
}
|
253 |
#menu li ul li:hover { |
254 |
background:none; |
255 |
border:none; |
256 |
padding:0; |
257 |
margin:0; |
258 |
}
|
259 |
#menu li .greybox li { |
260 |
background:#F4F4F4; |
261 |
border:1px solid #bbbbbb; |
262 |
margin:0px 0px 4px 0px; |
263 |
padding:4px 6px 4px 6px; |
264 |
width:116px; |
265 |
|
266 |
/* Rounded Corners */
|
267 |
-moz-border-radius: 5px; |
268 |
-webkit-border-radius: 5px; |
269 |
border-radius: 5px; |
270 |
}
|
271 |
#menu li .greybox li:hover { |
272 |
background:#ffffff; |
273 |
border:1px solid #aaaaaa; |
274 |
padding:4px 6px 4px 6px; |
275 |
margin:0px 0px 4px 0px; |
276 |
}
|
Enlaces interesantes y relevantes
- Diseño menús desplegables: Ejemplos y mejores prácticas
- Mega menú, disfrutar responsablemente!
- Menús de mega: la próxima Web diseño tendencia
- Menús de navegación desplegable de Mega funcionan bien
- 25 ejemplos de menús de Mega en diseño Web
- Menús desplegables de Mega (46 ejemplos)
Conclusión
Espero que hayas disfrutado este tutorial sobre cómo crear menús de mega. ¡Gracias por seguirnos a lo largo de!
