Confeccionar un menú con subpestañas con html y css es relativamente fácil.
Lo primero que debemos pensar es la distribución de nuestro menú, como irá estructurado tanto el diseño como las urls, una vez dibujado a papel nuestro “mapa”, debemos empezar a pintarlo mediante html y css, para ello creamos un nuevo documento con extensión .css y pegamos lo siguiente:
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
| ul#menu { background: #333; width: 940px; float:left; padding: 5px;} ul#menu li { color: #fff; float: left; list-style: none; margin: 0% 5%;} ul#menu li:hover{ color: #aaa073; cursor:pointer;} ul#menu ul { display: none; position: absolute; top: 49px; background: #333; color: #fff; padding: 5px 0px 5px 5px; margin: 0; } ul#menu ul li{ float: left; color: #fff; width:100%; margin:2% 0%;} ul#menu ul li a{ color: #fff;} ul#menu ul li a:hover{ color: #aaa073; cursor:pointer;} ul#menu li:hover ul ul,ul#menu li:hover ul ul ul,ul#menu li.iehover ul ul,ul#menu li.iehover ul ul ul { display: none; cursor:pointer;} ul#menu li:hover ul,ul#menu ul li:hover ul,ul#menu ul ul li:hover ul,ul#menu li.iehover ul,ul#menu ul li.iehover ul,ul#menu ul ul li.iehover ul { display: block; cursor:pointer;} |
Ahora abrimos un archivo con extensión .html o .php y copiamos el menú que queremos insertar en nuestra página web, en mi caso como prueba de este ejercicio realicé el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
|
|
PESTAÑA 5
El aspecto del menú tal y como está ahora mismo sería el siguiente, el diseño lógicamente es totalmente personalizable a gusto del usuario:
0 Comentarios