Menú Vertical Desplegable con CSS y JavaScript - Menú Vertical Desplegable con CSS y JavaScript
1 - Menú Vertical Desplegable con CSS y JavaScript
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>
|
Opiniona sobre 'Menú Vertical Desplegable con CSS y JavaScript - Menú Vertical Desplegable con CSS y JavaScript' (2)
Opina sobre este artículo |
