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

1 2 3 4 | siguiente >

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>

1 2 3 4 | siguiente >

Opinar
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.

Salva

Valoración muy negativa.

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

Anuncios Google

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.