Crear un Menu Emergente con html y Java Script
Hola Buenas TArdes: Deseo realizar un menu emergente. Tengo unos Botones Definidos:
1 Inicio - 2 Organización - Descargas - Directorio - Sitios de Interés
Pero quiero que al usuario darle click en Organización se desplieguen un menu emergente que diga:
Estructura
Departamentos
Al igual para Descargas se despliegue:
Tutoriales
Instructivos
Formatos
Manuales de Procedimientos
De Ante Mano muchas gracias por tu atención
1 Inicio - 2 Organización - Descargas - Directorio - Sitios de Interés
Pero quiero que al usuario darle click en Organización se desplieguen un menu emergente que diga:
Estructura
Departamentos
Al igual para Descargas se despliegue:
Tutoriales
Instructivos
Formatos
Manuales de Procedimientos
De Ante Mano muchas gracias por tu atención
1 respuesta
Respuesta de jeybi
1
Tienes 3 opciones:
. CSS
Tu menu se desplegara correctamente, sera compatible con navegadores sin JS activado. Este tipo de menús se hace combinando listas anidadas y usando efectos :hover, no es posible que se visualice al hacer click, solo cuando el mouse esta encima del elemento:
<ul>
<li id="Organizacion">]
<a href="..">Organizacion</a>
<ul>
<li id="estructura"> ... </li>
<li id="Departamentos"> ... </li>
</ul>
</li>
...
</ul>
. JS
Tu menu se desplegara correctamente, no podrá ser visto en navegadores sin JS activado, pero podrás incluir efectos o animaciones y podrás usar como detonador ya sea un click o lo que quieras. El HTML es el mismo, solo que envés de usar :hover, tomaras las referencias a las listas (
<ul>
</ul>
) Y le aplicaras un 'onclick' o 'onmouseover', mostrando alguna animacon(opcional) y mostrando la lista (display:block).
. Híbrido
Ya que es el mismo HTML, puedes usar las dos tecninas, una version CSS para navegadores sin JS, y otra más elaborada para los que si lo tengan.
Checa estos enlaces:
-CSS
-JS
-Híbrido: Este lo haces tu leyendo los dos de arriba.
