A continuación verás como hacer un menú despegable o Dropdown menú de forma sencilla, vamos a utilizar las bondades de CSS3 para darle un toque de elegancia tanto en la forma visual como la forma funcional de este menú. Tratare de explicártelo paso por paso.
Esto es lo que vamos a conseguir:
EL HTML
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
| <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Empresa</a> <ul> <li><a href="#">Quienes Somos</a></li> <li><a href="#">Corporativos</a></li> <li><a href="#">Proyección</a></li> </ul> </li> <li><a href="#">Sevicios</a> <ul> <li><a href="#">Diseño</a></li> <li><a href="#">Desarrollo</a></li> <li><a href="#">Apps</a></li> <li><a href="#">Sociales</a></li> </ul> </li> <li><a href="#">Proyectos</a> <ul> <li><a href="#">Corporativos</a></li> <li><a href="#">Institucionales</a></li> <li><a href="#">Personales</a></li> </ul> </li> <li><a href="#">Blog</a></li> <li><a href="#">Contacto</a></li></ul> |
Ok, en el código anterior tenemos la parte correspondiente al HTML del menú, tenemos una <ul> lista desordenada con una class=”menu”, dentro de esa lista tenemos los respectivos ítems representados por los <li> y dentro el nombre del ítem envueltos por la etiqueta <a> que nos crea un enlace, por cierto que no nos lleva a ningún lado ya que estamos utilizando la almohadilla # que nos crea el enlace y nos mantiene en la misma pagina. Dentro de algunos <li> </li> tenemos otra lista desordenada anidada, que van a hacer los ítems que se van a desplegar cuando pase el mouse sobre su ítem padre, estos van a estar en otra <ul> con sus respectivos <li> y <a>.
EL CSS
El css vamos a verlo paso por paso.
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
| .menu,.menu ul,.menu li,.menu a { margin: 0; padding: 0; border: none; outline: none;}ul.menu { height: 50px; width: 100%; 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;} |
Primero quitamos márgenes, padding y bordes a los elementos que forman el menú, luego damos los estilos al menú, el ancho y alto, en la misma instrucción le damos como fondo un degradado de CSS3 por medio de linear-gradient y damos los respectivos prefijos de cada navegador, también para los bordes redondeados por medio de border-radius y aunque los navegadores actuales ya soportan esta propiedad, no falta el que conserva las versiones antiguas, así que también aplicamos esta propiedad con sus prefijos para los diferentes navegadores.
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
| ul.menu li { position: relative; list-style: none; float: left; display: block; height: 40px;}ul.menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 36px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 16px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out;} |
Luego posicionamos los <li> relativamente, quitamos las viñetas de cada item, los mostramos como bloque y los flotamos a su izquierda tambien le damos ul alto que en este caso es de 40px.
Y en los enlaces <li> <a> damos un poco de padding y margen, quitamos la decoración que por defecto coloca a los enlaces y un line-height de 36px, colocamos bordes a su derecha e izquierda, asignamos características al texto (bold, tipo de fuente y tamaño, color y una sombra por medio de text-shadow) y una transición que se mostrara cuando cree los estilos del estado hover, es decir cuando situé el mouse sobre el cambiara el color del texto en 2 milisegundos. Esta transición va también con los prefijos de cada navegador aunque los navegadores acepten esta propiedad de css3.
y esto es lo que llevamos al momento.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| ul.menu li:first-child a { border-left: none; }ul.menu li:last-child a{ border-right: none; }ul.menu li:hover > a { color: #caad16; }ul.menu ul { position: absolute; top: 50px; left: 0; opacity: 0; background: rgba(0,0,0,0.67); -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s;}.menu li:hover > ul { opacity: 1; } |
Quitamos los bordes del primer y ultimo ítem que no los necesitamos, lo hacemos por medio de los pseudo-class first y last child que selecciona el primer y ultimo <li> del menú, después hacemos el estado hover del enlace, cambiamos el color. Luego nos ocupamos de la lista que se va a desplegar en su respectivo ítem padre. La posicionamos absolutamente en su altura y su izquierda de manera que quede bien acomodada, le damos un background semitransparente por medio de rgba que controla también el alfa, y en opacidad de la lista le damos 0 ya que vamos a hacer una transición de opacidad de 0 a 1 y así dar la apariencia de que aparece en desvanecido. Luego de placar la transición le damos opacidad 1 es decir que se muestre totalmente cuando este situado sobre ella.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| ul.menu ul li { height: 0; overflow: hidden; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s;}ul.menu li:hover > ul li { height: 36px; overflow: visible;}ul.menu ul li a { width: 130px; padding: 0 10px; margin: 0; font-size: 14px; border: none; border-bottom: 1px solid #353539;} |
Escondemos los li en estado normal y el alto es 0, no tendrán altura los ítems y aplicamos otra transición que mostrara el cambio de altura, la transición que tendrá el ítem cuando aparezcan. Luego en el estado hover aumentamos su altura, le damos 36, a los enlaces aplicamos un width y un tamaño de texto de 14px, quitamos los bordes, pero dejamos el bottom, para dejarlo como separador.
y por ultimo quitamos el borde al ultimo ítem que se despliega, ya que no lo necesita.
1
| ul.menu ul li:last-child a { border: none; } |
- See more at: http://www.tutosytips.com/tutorial-menu-despagable-dropdown-con-css3/#sthash.wiR16x6P.dpuf
Fuente:enlace
No hay comentarios:
Publicar un comentario