Entrar

Como crear un menú desplegable en JavaScript

Jenkins · · Solicitar retirada
:idea: Hace unos días se me ocurrió la idea de crear un menú desplegable en JavaScript, así que me pase algunos días estudiando códigos nuevamente, visitando páginas, viendo tutoriales y al final conseguí realizar uno realmente básico y sencillo, así que me gustaría compartirlo en este foro con el que estoy tan agradecido y en el que continuamente sigo aprendiendo todos los días.

Un menú desplegable en 7 pasos:

1 Paso:
Incluiremos el código JavaScript con las funciones que visualizaran y ocultaran el menú; entre <head> y </head> escribe lo siguiente: 

<link rel="stylesheet" href="estilos.css" type="text/css" media="all" />
<script type="text/javascript">
function ver(n) {
         document.getElementById("subseccion"+n).style.display="block"
         }
function ocultar(n) {
         document.getElementById("subseccion"+n).style.display="none"
         }
</script>
</head>

2 Paso:
Crearemos el código HTML que incluirá el menú, primeramente incluiremos un div principal con el nombre navegación y una lista con un solo elemento: 

<body>
<div id="navegador">
  <ul>
	<li id="seccion1">
	<a href="#">Bolsos</a>
	</li>
	</ul>
	</div>  
</body>
3 Paso:
Es hora de agregarle el código CSS y que todo esto empiece a tomar forma: 

* { padding: 0; margin: auto; text-align: center; }
#navegador { heigth:40px; width: 800px; background-color: black; padding: 5px; }
#navegador li { margin:5px; padding: 5px; background-color: blue; width: 200px; float: left; list-style-type: none;  position: relative;  }
#navegador li a:link { color: #feffe4; text-decoration: none; }
#navegador li a:visited { color: #feffe4; text-decoration: none; }
#navegador li a:hover { color:#ffd7a9 ; text-decoration: none; }
#navegador li a:active { color:#ffd7a9 ; text-decoration: none; }

4 Paso:
Ya estamos cerquita de terminar, así que es hora de crear las subsecciones en el código HTML, añadiremos un nuevo div para incluir las subsecciones: 

<body>
<div id="navegador">
  <ul>
	<li id="seccion1">
	<a href="#">Bolsos</a>
	<div id="subseccion1">
	<p><a href="#"> Manos Libres</a></p>
	<p><a href="#"> Medianos</a></p>
	<p><a href="#"> Grandes</a></p>
	<p><a href="#"> Dobles</a>
	</div>
	</li>
	</ul>
	</div> 
</body>

5 Paso:
Ya podemos ver la lista completa, sin embargo aparece totalmente desplegada, es hora de acomodarla correctamente en el punto 00.00 de la lista utilizando el div que creamos anteriormente, y la forma de hacerlo es indicando lo siguiente en el código CSS: 

#subseccion1 { padding: 5px; width: 200px;
position: absolute; top: 100%; left: 0px; background-color: black; font-family: arial; display: none; }

6 Paso:
La lista ya no aparece desplegada, sin embargo cuando pasamos el ratón por encima no pasa nada aun, lo que pasa es que aunque ya declaramos el código JavaScript aun no le hemos indicado en donde debe trabajar, así que lo hacemos de esta forma en el código HTML: 

<div id="navegador">
  <ul>
	<li id="seccion1" onmouseover="ver(1)" onmouseout="ocultar(1)">
	<a href="#">Bolsos</a>
	<div id="subseccion1">
	<p><a href="#"> Manos Libres</a></p>
	<p><a href="#"> Medianos</a></p>
	<p><a href="#"> Grandes</a></p>
	<p><a href="#"> Dobles</a>
	</div>
	</li>
	</ul>
	</div>

Paso 7:
A este paso el menú debe estar trabajando correctamente sin embargo en algunos navegadores aparecerá desplegado y se ocultara hasta que pasemos el raton por lo menos una vez encima de el, para evitar esto le añadiremos un class con la propiedad clear: both a la lista de este forma:

HTML: 

<div id="navegador">
  <ul>
	<li id="seccion1" onmouseover="ver(1)" onmouseout="ocultar(1)">
	<a href="#">Bolsos</a>
	<div id="subseccion1">
	<p><a href="#"> Manos Libres</a></p>
	<p><a href="#"> Medianos</a></p>
	<p><a href="#"> Grandes</a></p>
	<p><a href="#"> Dobles</a>
	</div>
	</li>
	</ul>
	<div class="borrar"></div>
	</div>

Y al CSS: 
.borrar { clear: both; }

Ahora si que tenemos nuestro menú desplegable trabajando y completo.
Espero les haya gustado este tutorial básico para implementar un menú desplegable con JavaScript.
Un Saludo
skaparate · · Solicitar retirada
Hola Jenkins:

Gracias por compartirlo :).

Consejo: envuelve el código entre las etiquetas
para que sea más legible. Ejemplo:

<script type="text/javascript">
  alert( 'Una ventana emergente' );
</script>
Jenkins · · Solicitar retirada
Jeje Gracias por tu consejo, lo edite nuevamente implementando lo que me dijiste y a quedado mucho mejor.
Un saludo.:rolleyes:
skaparate · · Solicitar retirada
Si :).

Incluso puedes utilizar las etiquetas dependiendo del código. Por ejemplo, para HTML están las 
código html
. Para PHP es lo mismo, solo que en lugar de html es php XD.

La lista de los códigos está en un enlace al pié del foro llamado Códigos BB.