Entrada destacada

Como usar enums en Android, kotlin

el
0

Cómo crear un menú superior desplegable con HTML y CSS

el
A continuación se muestra una forma muy sencilla de hacer un menú desplegable utilizando sólo HTML y CSS.



La estructura del HTML es sencilla sólo tenemos que utilizar listas dentro de una lista principal a la cual asignaremos como selector un id "#menu".

 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
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
  <ul id="menu">
    <li><a href="">Animals</a>
      <ul>
        <li><a href="">«Pigs on the Wing 1»</a></li>
        <li><a href="">«Dogs»</a></li>
        <li><a href="">«Pigs (Three Different Ones)»</a></li>
        <li><a href="">«Sheep»</a></li>
        <li><a href="">«Pigs on the Wing 2»</a></li>
      </ul>
    </li>
    <li><a href="">The wall</a>
      <ul>
        <li><a href="">«In The Flesh?»</a></li>
        <li><a href="">«The Thin Ice»</a></li>
        <li><a href="">«Another Brick In The Wall (Part 1)»</a></li>
        <li><a href="">«The Happiest Days Of Our Lives»</a></li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>


Ahora el CSS, esto lo haremos paso a paso.

  • Primero daremos los estilos necesarios para conseguir que los menús queden horizontalmente, hay que tener cuidado con los margenes y el padding para que no quede descuadrado todo, también al aplicar la propiedad float sólo debe aplicarse a los elementos <li> del <ul> principal.

  • Ahora los eventos. Con el selector hover haremos el efecto de despliegue para eso primero ocultamos los menús secundarios y cuando pasemos el puntero del ratón por encima de los menús principales estos se desplegaran. También daremos un estilo deferente a los menús al pasar sobre ellos.

 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
34
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
<style>
 * {
   padding: 0;
   margin: 0;
 }
 
 nav {
   background-color: RoyalBlue;
   height: 60px;
 }
 
 ul {
   list-style: none;
 }
 
 a {
   text-decoration: none;
 }
 
 #menu {
   width: 600px;
   margin: 0 auto;
 }
 
 #menu>li>a {
   background-color: RoyalBlue;
   color: white;
   padding: 10px;
   display: block;
   min-width: 200px;
          border-left: 1px solid white;
 }
 
 #menu>li>ul a {
   background-color: #EEE;
   color: black;
   padding: 10px;
   display: block;
   min-width: 200px;
 }
 
 #menu li>a:hover {
   color: black;
   background-color: RoyalBlue;
 }
 
 #menu>li {
   float: left;
 }
 
 #menu>li>ul {
   display: none;
 }
 
 #menu>li:hover ul {
   display: block;
   background-color: white;
   color: black;
 }
</style>

Resultado

Puedes probar el código Aquí

See the Pen Menú desplegable by Jesus Tepec (@JesusTepec) on CodePen.

Comentarios

Publicar un comentario