Código de CSS - Menu superior con css y html5

Imágen de perfil

Menu superior con css y html5gráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 24 de Mayo del 2013 por Xavi
9.174 visualizaciones desde el 24 de Mayo del 2013. Una media de 56 por semana
Código que muestra como poner un menú superior con estilos, y que se vaya desplegando hasta cuatro niveles al ir pasando el ratón por encima sin utilizar javascript.

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 24 de Mayo del 2013gráfica de visualizaciones de la versión: Versión 1
9.175 visualizaciones desde el 24 de Mayo del 2013. Una media de 56 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puede ver el ejemplo de dicho código en: css_menus.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
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
61
62
63
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        section {clear:both}
        #menu, #menu ul {
            list-style:none;
            padding:0;
            margin:0;
        }
        /* hace referencia a los primeros enlaces */
        #menu li {
            float:left;
            position:relative;
            width: 10em;
        }
        /* hace referencia a los segundos submenus */
        #menu li ul {
            position:absolute;
            display:none;
        }
        /* hace referencia a los terceros submenus */
        #menu li ul li ul {
            margin-top:-2.2em;
            margin-left:10em;
        }
        /* hace referencia a los cuartos submenus */
        #menu li ul li ul li ul {
            margin-top:-2.2em;
            margin-left:10em;
        }
 
        /* hace referencia al formato de los enlaces */
        #menu a {
            display:block;
            border-right:1px solid #fff;
            background:#E0F574;
            color:#3B3B3B;
            text-decoration:none;
            padding:10px;
        }
        /* hace referencia al formato 
           cuando se pasa el raton por encima del enlace */
        #menu a:hover {
            background-color:#5798B4;
            color:#fff;
        }
        /* hace referencia a los bloques de los segundos menus en adelante */
        #menu ul {
            border-top:1px solid #fff;
        }
        /* hace referencia al formato
           del enlaces de los segundos menus en adelante */
        #menu ul a {
            border-right:none;
            border-right:1px solid #fff;
            border-bottom:1px solid #fff;
            border-left:1px solid #fff;
            background:#AEC245;
        }
 
        /* esconde los menus de tercer nivel cuando estamos en el primer nivel */
        #menu li:hover ul ul {
            display:none;
        }
        /* esconde los menus de cuarto nivel cuando estamos en el primer nivel */
        #menu li:hover ul ul ul {
            display:none;
        }
        /* esconde los menus de cuarto nivel cuando estamos en el segundo nivel */
        #menu li ul li:hover ul ul {
            display:none;
        }
        /* muestra los menus de segundo nivel */
        #menu li:hover ul {
            display:block;
        }
        /* muestra los menus de tercer nivel */
        #menu li ul li:hover ul{
            display:block;
        }
        /* muestra los menus de cuarto nivel */
        #menu li ul li ul li:hover ul{
            display:block;
        }
    </style>
</head>
 
<body>
 
    <header>
        <h1>Ejemplo de menus con estilos</h1>
 
        <nav id="menu">
            <li><a href="#" title="Homepage" class="selected">Inicio</a>
                <ul>
                    <li><a href="#" title="Clientes">Clientes</a></li>
                    <li><a href="#" title="Proveedores">Proveedores</a></li>
                </ul>
            </li>
            <li><a href="#" title="Projects">Proyectos</a>
                <ul>
                    <li><a href="#" title="Older projects">Proyectos antiguos</a>
                        <ul>
                            <li><a href="#" title="2010 projects">2010 projects</a></li>
                            <li><a href="#" title="2011 projects">2011 projects</a></li>
                            <li><a href="#" title="2012 projects">2012 projects</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Proyectos Actuales">Proyectos Actuales</a>
                        <ul>
                            <li><a href="#" title="Ventas">Ventas</a></li>
                            <li><a href="#" title="Producción">Producción</a>
                                <ul>
                                    <li><a href="#" title="Desarrollo">Desarrollo</a></li>
                                    <li><a href="#" title="Almacen">Almacen</a></li>
                                    <li><a href="#" title="Transporte">Transporte</a></li>
                                </ul>
                            </li>
                            <li><a href="#" title="Pendientes">Pendientes</a>
                                <ul>
                                    <li><a href="#" title="Desarrollo">Desarrollo</a></li>
                                    <li><a href="#" title="Almacen">Almacen</a></li>
                                    <li><a href="#" title="Transporte">Transporte</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Contacto">Contacto</a></li>
            <li><a href="#" title="La Empresa">La Empresa</a></li>
        </nav>
    </header>
 
    <section>
        <article>
            contenido de la pagina
        </article>
    </section>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (2)

Ella013
05 de Mayo del 2014
estrellaestrellaestrellaestrellaestrella
Hola, estoy tratando de aprender a hacer menus complicados, y me ha funcionado bastante bien éste, peeeero tengo el siguiente problema:

al cambiar el ancho de cada celda (a un numero menor)
probé con:
#menu li
with: 5em;

pero entonces el último nivel (2010,2011 y 2012projects)
queda separado de su menú superior :S

alguien me podría decir cómo corregir el que no quede separado
para que se pueda seleccionar?

Muchas gracias! ;)
Responder
José H.
19 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
Excelente post... Particularmente cambiaria los colore!
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2383