Lo primero que necesitamos para hacer el menu, es una lista con dos niveles.
Nombramos el primero como "nav" y los demás con "off" excepto el que esta activo con "on".
Después lo que vamos a hacer es flotar los elementos primarios para que se vean horizontalmente.Y esconder "hidden" todos los submenus o elementos secundarios. Aprovechamos tambien para dar color, grosor y borde a los links.
A continuación posicionaremos nuestros elementos secundarios "#nav li.off ul, #nav li.on ul" debajo de los elementos principales de la lista, de talmanera que cuandolos mostremos nos queden en la situación correcta.
Finalmente mostramos la barra de del submenu para el area activa, con un selector de todo el submenu de la clase "Modern"
Por ahora deberíamos llevar algo asi:
Ahora vamos activar el rollover (imagen de sustitución) . Usamos CSS para quitar el borde de los"nav" en el segundo nivel. Hay que obligar a mostrar los submenus ("subnavs") cuando sus padres estan en hover. Colocamos un z-index para estar seguros de que el hover tiene preferencia sobre el area de los "subnavs" en estadonormal
Por ahora lo que deberiamos llevar esta asi.
Habría que añadir la clase ".over" a la lista de los elementos que requieren "hover" y retocar si es necesario los background-positions.
La solución con imágenes --> aquí <--
Nombramos el primero como "nav" y los demás con "off" excepto el que esta activo con "on".
Después lo que vamos a hacer es flotar los elementos primarios para que se vean horizontalmente.Y esconder "hidden" todos los submenus o elementos secundarios. Aprovechamos tambien para dar color, grosor y borde a los links.
A continuación posicionaremos nuestros elementos secundarios "#nav li.off ul, #nav li.on ul" debajo de los elementos principales de la lista, de talmanera que cuandolos mostremos nos queden en la situación correcta.
Finalmente mostramos la barra de del submenu para el area activa, con un selector de todo el submenu de la clase "Modern"
Por ahora deberíamos llevar algo asi:
Ahora vamos activar el rollover (imagen de sustitución) . Usamos CSS para quitar el borde de los"nav" en el segundo nivel. Hay que obligar a mostrar los submenus ("subnavs") cuando sus padres estan en hover. Colocamos un z-index para estar seguros de que el hover tiene preferencia sobre el area de los "subnavs" en estadonormal
Por ahora lo que deberiamos llevar esta asi.
Habría que añadir la clase ".over" a la lista de los elementos que requieren "hover" y retocar si es necesario los background-positions.
La solución con imágenes --> aquí <--
Comentarios
Publicar un comentario
Hola que tal???