Capitulos de este wiki
  1. 1 Menú Vertical Desplegable con CSS y JavaScript
  2. 2 Sobre el css y las dos imagenes
  3. 3 Del javascript
  4. 4 Organizando los archivos

Menú Vertical Desplegable con CSS y JavaScript - Menú Vertical Desplegable con CSS y JavaScript

1 - Menú Vertical Desplegable con CSS y JavaScript

Artículo creado por Balú. Extraido de: http://www.baluart.net/tema2/diseno-web/pagina18
11 de Agosto de 2006

Para obtener este efecto vamos a utilizar html, css, y javascript que cree la animación, este menú funciona tanto en Internet Explorer como en Firefox.

EL EVENTO ONLOAD Y LA LISTA HTML

El archivo html va a ser el que muestre el menú, por lo que en primer lugar colocamos un evento onload al body que nos cargue una función javascript, luego creamos una capa div y la nombramos “sidebar”, dentro de esta capa crearemos nuestra lista sin ordenar, recuerden que para crearla se utiliza la etiqueta “ul” para indicar que se trata de una lista sin ordenar y las etiquetas “li” para indicar que se trata de un item de la lista… ojo que nos es necesario que se cierren estas etiquetas “li”, pero si lo desarrollan en xhtml deben cerrarlas. Ahora bien, para crear esta aplicación vamos a anidar una lista dentro de un item de otra lista a fin de crear el menú desplegable.

Un esquema del orden seria el siguiente:

<body onLoad="menu_init(0,12,1,-20,10)">
<div id="sidebar">
<ul id="menunav">
<li><a href="#">Inicio</a></li>
<li><a href="#" class="menutrg">Botón 1</a>
<ul>
<li><a href="#">Botón 1 - 1</a></li>
<li><a href="#">Botón 1 - 2</a></li>
<li><a href="#">Botón 1 - 3</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Boton 2</a>
<ul>
<li><a href="#">Botón 2 - 1</a></li>
<li><a href="#">Botón 2 - 2</a></li>
<li><a href="#">Botón 2 - 3</a></li>
<li><a href="#">Botón 2 - 4</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Botón 3</a>
<ul>
<li><a href="#" class="menutrg">Botón 3 - 1</a>
<ul>
<li><a href="#">Botón 3 - 1 - 1</a></li>
<li><a href="#">Botón 3 - 1 - 2</a></li>
<li><a href="#">Botón 3 - 1 - 3</a></li>
<li><a href="#">Botón 3 - 1 - 4</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Botón 3 - 2</a>
<ul>
<li><a href="#">Botón 3 - 2 - 1</a></li>
<li><a href="#">Botón 3 - 2 - 2</a></li>
<li><a href="#">Botón 3 - 2 - 3</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Botón 3 - 3</a>
<ul>
<li><a href="#">Botón 3 - 3 - 1</a></li>
<li><a href="#">Botón 3 - 3 - 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Botón 4</a></li>
</ul>
</div>
</body>

5 opiniones

Ya caí en cuenta

Para eso es el href, listo entendí todo....
Super excelente

Muy bien explicado... pero y ahora cómo hago para programar lo que va a hacer cada opción... jajajaja bueno trabajeré en eso!!!! Mil gracias
Excelente

Qué mas puedo decir.. gracia por ayudar a las personas desorientadas
Muy vacano.

Muy vacano me gusto mucho este menu, ademas que lo necesitaba para un proyecto. Gracias.
Valoración muy negativa.

Incompleto, viene de otra página, los enlaces no funcionan.

Artículos relacionados con 'Menú Vertical Desplegable con CSS y JavaScript'

Este es un excelente efecto que le podemos dar a nuestros menús desplegables, les explicamos... Más »
Hace unos días vimos como a partir de una lista creamos un Menú desplegable vertical,... Más »

Autor y licencia de 'Menú Vertical Desplegable con CSS y JavaScript'


Artículo de Balú. Extraido de: http://www.baluart.net/tema2/diseno-web/pagina18 CopyLeft
Esta obra está bajo una licencia de Creative Commons
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.