Anteriormente les mostrábamos como crear un formulario con CSS3 para permitir el envío de fotos a través de nuestra web, esta vez siguiendo con las aplicaciones del CSS3 veremos como crear una extraordinario mega menú con listas desplegables o dropdown.
Lo primero que veremos es la estructura en HTML de nuestro menú como podemos observar cuenta con una lista de enlaces principales los cuales despliegan contenido al pasar el “ratón” sobre ellos.
Este será la estructura del código que debe ir dentro de la etiqueta BODY o donde quieres que aparezca el menú, generalmente el header.
<
ul
class
=
"nav"
>
<
li
>
<
a
href
=
"#"
>Lo nuevo</
a
>
<
div
>
Contenido del menu aqui...
</
div
>
</
li
>
<
li
><
a
href
=
"#"
>Enlace 2</
a
></
li
>
<
li
>
<
a
href
=
"#"
>Enlace 3</
a
>
<
div
>
Contenido del Enlace 3
...
</
div
>
</
li
>
<
li
><
a
href
=
"#"
>Enlace 4</
a
></
li
>
<
li
><
a
href
=
"#"
>Enlace 5</
a
></
li
>
<
li
><
a
href
=
"#"
>Enlace 6</
a
></
li
>
<
li
class
=
"nav-search"
>
<
form
action
=
"#"
>
<
input
type
=
"text"
placeholder
=
"Buscar..."
>
<
input
type
=
"submit"
value
=
""
>
</
form
>
</
li
>
</
ul
>
Como puedes ver, al final incluye un buscador interno de tu blog.
Ahora, dentro de nuestro css, tendremos que agregar la estructura básica que le darán estilo a nuestro menú desplegable.
.nav > li > a {
position
:
relative
;
display
:
block
;
z-index
:
510
;
height
:
54px
;
padding
:
0
20px
;
line-height
:
54px
;
font-family
:
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
bold
;
font-size
:
13px
;
color
:
#fcfcfc
;
text-shadow
:
0
0
1px
rgba(
0
,
0
,
0
,.
35
);
background
:
#372f2b
;
border-left
:
1px
solid
#4b4441
;
border-right
:
1px
solid
#312a27
;
-webkit-transition:
all
.
3
s ease;
-moz-transition:
all
.
3
s ease;
-o-transition:
all
.
3
s ease;
-ms-transition:
all
.
3
s ease;
transition:
all
.
3
s ease;
}
.nav > li:hover > a {
background
:
#4b4441
; }
.nav > li:first-child > a {
border-radius:
3px
0
0
3px
;
border-left
:
none
;
}
.nav > li.nav-search > form {
position
:
relative
;
width
: inherit;
height
:
54px
;
z-index
:
510
;
border-left
:
1px
solid
#4b4441
;
}
.nav > li.nav-search input[type=
"text"
] {
display
:
block
;
float
:
left
;
width
:
1px
;
height
:
24px
;
padding
:
15px
0
;
line-height
:
24px
;
font-family
:
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
bold
;
font-size
:
13px
;
color
:
#999999
;
text-shadow
:
0
0
1px
rgba(
0
,
0
,
0
,.
35
);
background
:
#372f2b
;
-webkit-transition:
all
.
3
s ease
1
s;
-moz-transition:
all
.
3
s ease
1
s;
-o-transition:
all
.
3
s ease
1
s;
-ms-transition:
all
.
3
s ease
1
s;
transition:
all
.
3
s ease
1
s;
}
.nav > li.nav-search input[type=
"text"
]:focus {
color
:
#fcfcfc
; }
.nav > li.nav-search input[type=
"text"
]:focus,
.nav > li.nav-search:hover input[type=
"text"
] {
width
:
110px
;
padding
:
15px
20px
;
-webkit-transition:
all
.
3
s ease .
1
s;
-moz-transition:
all
.
3
s ease .
1
s;
-o-transition:
all
.
3
s ease .
1
s;
-ms-transition:
all
.
3
s ease .
1
s;
transition:
all
.
3
s ease .
1
s;
}
.nav > li.nav-search input[type=
"submit"
] {
display
:
block
;
float
:
left
;
width
:
20px
;
height
:
54px
;
padding
:
0
25px
;
cursor
:
pointer
;
background
:
#372f2b
url
(../img/search-
icon
.png)
no-repeat
center
center
;
border-radius:
0
3px
3px
0
;
-webkit-transition:
all
.
3
s ease;
-moz-transition:
all
.
3
s ease;
-o-transition:
all
.
3
s ease;
-ms-transition:
all
.
3
s ease;
transition:
all
.
3
s ease;
}
.nav > li.nav-search input[type=
"submit"
]:hover {
background-color
:
#4b4441
; }
.nav > li > div {
position
:
absolute
;
display
:
block
;
width
:
100%
;
top
:
50px
;
left
:
0
;
opacity:
0
;
visibility
:
hidden
;
overflow
:
hidden
;
background
:
#ffffff
;
border-radius:
0
0
3px
3px
;
-webkit-transition:
all
.
3
s ease .
15
s;
-moz-transition:
all
.
3
s ease .
15
s;
-o-transition:
all
.
3
s ease .
15
s;
-ms-transition:
all
.
3
s ease .
15
s;
transition:
all
.
3
s ease .
15
s;
}
.nav > li:hover > div {
opacity:
1
;
visibility
:
visible
;
overflow
:
visible
;
}
.nav .nav-column {
float
:
left
;
width
:
20%
;
padding
:
2.5%
;
}
.nav .nav-column h
3
{
margin
:
20px
0
10px
0
;
line-height
:
18px
;
font-family
:
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
bold
;
font-size
:
14px
;
color
:
#372f2b
;
text-transform
:
uppercase
;
}
.nav .nav-column h
3
.orange {
color
:
#ff722b
; }
.nav .nav-column li a {
display
:
block
;
line-height
:
26px
;
font-family
:
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
bold
;
font-size
:
13px
;
color
:
#888888
;
}
.nav .nav-column li a:hover {
color
:
#666666
; }
Ahora que ya hemos terminado por completo de darle estilo a nuestro menu, agregaremos el codigo completo de éste donde queremos que se muestre:
<
div
class
=
"nav-column"
>
<
h3
>Home</
h3
>
<
ul
>
<
li
><
a
href
=
"#"
>Pampers Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Huggies Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Seventh Generation</
a
></
li
>
<
li
><
a
href
=
"#"
>Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Derbies</
a
></
li
>
<
li
><
a
href
=
"#"
>Driving shoes</
a
></
li
>
<
li
><
a
href
=
"#"
>Espadrilles</
a
></
li
>
<
li
><
a
href
=
"#"
>Loafers</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"nav-column"
>
<
h3
>Home</
h3
>
<
ul
>
<
li
><
a
href
=
"#"
>Driving shoes</
a
></
li
>
<
li
><
a
href
=
"#"
>Espadrilles</
a
></
li
>
<
li
><
a
href
=
"#"
>Loafers</
a
></
li
>
</
ul
>
<
h3
>Home</
h3
>
<
ul
>
<
li
><
a
href
=
"#"
>Driving shoes</
a
></
li
>
<
li
><
a
href
=
"#"
>Espadrilles</
a
></
li
>
<
li
><
a
href
=
"#"
>Loafers</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"nav-column"
>
<
h3
>Home</
h3
>
<
ul
>
<
li
><
a
href
=
"#"
>Pampers Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Huggies Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Seventh Generation</
a
></
li
>
<
li
><
a
href
=
"#"
>Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Derbies</
a
></
li
>
<
li
><
a
href
=
"#"
>Driving shoes</
a
></
li
>
<
li
><
a
href
=
"#"
>Espadrilles</
a
></
li
>
<
li
><
a
href
=
"#"
>Loafers</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"nav-column"
>
<
h3
class
=
"orange"
>Related Categories</
h3
>
<
ul
>
<
li
><
a
href
=
"#"
>Pampers Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Huggies Diapers</
a
></
li
>
<
li
><
a
href
=
"#"
>Diapers</
a
></
li
>
</
ul
>
<
h3
class
=
"orange"
>Brands</
h3
>
<
ul
>
<
li
><
a
href
=
"#"
>Driving shoes</
a
></
li
>
<
li
><
a
href
=
"#"
>Espadrilles</
a
></
li
>
</
ul
>
</
div
>
Este código debe ir dentro de la primera estructura que hemos creado al inicio, la cual será el menú que mostrará al pasar el mouse sobre los enlaces principales.
El código puede ser aplicado tanto en Blogger de forma manual como en WordPress usando la jerarquía de las categorías a través del codex de WordPress.
Recuerda cambiar la información a mostrar en el menú tanto el texto de los enlaces como el menú desplegable.
Deja un comentario