Crear un Menú Desplegable CSS3 [Tutorial]
Tema: CSS3
Dificultad: Principiante
Tiempo estimado: 20 minutos
En este tutorial programaremos en CSS3 un extracto del
Menú de Navegación que puedes encontrar en
Página personal de Miguel Ángel Herrán.
(
Está basado en el tutorial de
http://designmodo.com/css3-dropdown-menu/
y adaptado a mis propias necesidades).
Paso 1 – HTML
Creamos una lista con los elementos del menú. Para crear los submenús añadimos otra lista dentro de la anterior.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<
ul
class
=
"menu"
>
<
li
><
a
href
=
"LosHerran.htm"
>Página
de los Herrán</
a
></
li
>
<
li
><
a
href
=
"libro.htm"
>Libro de
los Herrán</
a
></
li
>
<
ul
>
<
li
><
a
href
=
"libro_argentina.htm"
class
=
"argentina"
>Argentina</
a
></
li
>
<
li
><
a
href
=
"libro_brasil.htm"
class
=
"brasil"
>Brasil</
a
></
li
>
<
li
><
a
href
=
"libro_canada.htm"
class
=
"canada"
>Canadá</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"http://maherran.blogspot.com"
>Blog</
a
></
li
>
<
li
><
a
href
=
"http://rincondemiguelangel.blogspot.com/"
>Rincón
de Miguel Angel</
a
></
li
>
</
ul
>
|
Paso 2 – Plantilla del Menú
Quitamos margen, relleno, borde y subrayado de todos los elementos del menú. Luego añadimos un ancho fijo y un alto al menú, esquinas redondeadas y gradientes CSS3. Para alinear los vínculos horizontalmente haremos flotar las listas a la izquierda. También necesitamos definir la posición como relativa dado que necesitaremos alinear los submenús.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
.menu,
.menu ul,
.menu li,
.menu a {
margin
:
0
;
padding
:
0
;
border
:
none
;
outline
:
none
;
}
.menu {
height
:
40px
;
width
:
465px
;
background
:
#4c4e5a
;
background
: -webkit-linear-gradient(
top,
#4c4e5a
0%,
#2c2d33
100%);
background
: -moz-linear-gradient(
top,
#4c4e5a
0%
,
#2c2d33
100%
);
background
: -o-linear-gradient(
top
,
#4c4e5a
0%
,
#2c2d33
100%
);
background
: -ms-linear-gradient(
top
,
#4c4e5a
0%
,
#2c2d33
100%
);
background
: linear-gradient(
top
,
#4c4e5a
0%
,
#2c2d33
100%
);
-webkit-border-radius:
5px
;
-moz-border-radius:
5px
;
border-radius:
5px
;
}
.menu li {
position
:
relative
;
list-style
:
none
;
float
:
left
;
display
:
block
;
height
:
40px
;
}
|
Ocultaremos
temporalmente el submenú para que sea más fácil dar estilo al primer nivel.
|
34
|
.menu ul {
display
:
none
; }
|
Paso 3 – Vínculos del Menú
Para dar estilo a los vínculos del menú
añadiremos algunas propiedades básicas de CSS tales como fuente, color,
relleno, etc.
Posteriormente añadiremos un texto oscuro sombreado y un color de transición
para crear un efecto alisado cuando el color cambia al pasar sobre él (hover).
Para crear separadores entre vínculos añadiremos un borde a derecha e izquierda,
y eliminaremos el borde izquierdo del primer vínculo y el borde derecho del
último. Para el estado hover sólo cambiaremos el color del texto.
|
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
.menu li a {
display
:
block
;
padding
:
0
8px
;
margin
:
6px
0
;
line-height
:
28px
;
text-decoration
:
none
;
border-left
:
1px
solid
#393942
;
border-right
:
1px
solid
#4f5058
;
font-family
:
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
bold
;
font-size
:
12px
;
color
:
#f3f3f3
;
text-shadow
:
1px
1px
1px
rgba(
0
,
0
,
0
,.
6
);
-webkit-transition: color .
2
s ease-in-out;
-moz-transition: color .
2
s ease-in-out;
-o-transition: color .
2
s ease-in-out;
-ms-transition: color .
2
s ease-in-out;
transition: color .
2
s ease-in-out;
}
.menu li:first-child a {
border-left
:
none
; }
.menu li:last-child a{
border-right
:
none
; }
.menu li:hover > a {
color
:
#8fde62
; }
|
Paso 4 – Submenú
Primero vamos a eliminar esta línea de código que añadimos en el segundo paso.
|
34
|
.menu ul {
display
:
none
; }
|
Ahora daremos estilo al submenú.
Comenzaremos por posicionar el submenú 40px desde arriba y 0px desde la
izquierda del menú, y añadiremos esquinas redondeadas. Pondremos la opacidad a 0
y en el estador hover a 1 para crear el efecto aparición/desaparición. Para el
efecto de deslizamiento arriba/abajo necesitamos poner list height a 0px cuando
está oculto y a 24px en estado hover.
|
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
.menu ul {
position
:
absolute
;
top
:
40px
;
left
:
0
;
opacity:
0
;
background
:
#1f2024
;
-webkit-border-radius:
0
0
5px
5px
;
-moz-border-radius:
0
0
5px
5px
;
border-radius:
0
0
5px
5px
;
-webkit-transition: opacity .
25
s ease .
1
s;
-moz-transition: opacity .
25
s ease .
1
s;
-o-transition: opacity .
25
s ease .
1
s;
-ms-transition: opacity .
25
s ease .
1
s;
transition: opacity .
25
s ease .
1
s;
}
.menu li:hover > ul { opacity:
1
; }
.menu ul li {
height
:
0
;
overflow
:
hidden
;
padding
:
0
;
-webkit-transition: height .
25
s ease .
1
s;
-moz-transition: height .
25
s ease .
1
s;
-o-transition: height .
25
s ease .
1
s;
-ms-transition: height .
25
s ease .
1
s;
transition: height .
25
s ease .
1
s;
}
.menu li:hover > ul li {
height
:
24px
;
overflow
:
visible
;
padding
:
0
;
}
|
Pondremos el ancho de los vínculos del submenú a 100px. En lugar de bordes izquierdo y derecho,
añadiremos un borde inferior y lo quitaremos del último vínculo.
|
103
104
105
106
107
108
109
110
111
112
|
.menu ul li a {
width
:
100px
;
padding
:
1px
0
1px
30px
;
margin
:
0
;
border
:
none
;
border-bottom
:
1px
solid
#353539
;
}
.menu ul li:last-child a {
border
:
none
; }
|
Para finalizar sólo necesitamos añadir un icono a
cada vínculo de submenú. Para ello, crearemos una clase personalizada
para cada uno de ellos, y una imagen background.
|
114
115
116
|
.menu a.argentina {
background
:
url
(../images/flags/flag_Argentina.gif)
no-repeat
6px
center
; }
.menu a.brasil {
background
:
url
(../images/flags/flag_Brasil.gif)
no-repeat
6px
center
; }
.menu a.canada {
background
:
url
(../images/flags/flag_Canada.gif)
no-repeat
6px
center
; }
|
Conclusión
Hemos creado satisfactoriamente este menú desplegable CSS3.
Si tienes alguna pregunta, házmelo saber en los comentarios; intentaré ayudarte, aunque no soy un experto en CSS3.
No olvides dejar algún feedback si lo crees oportuno, y compartirlo con tus amigos.
