> Faqs > Crear un menú desplegable con solamente con CSS (HTML5)

Crear un menú desplegable con solamente con CSS (HTML5)

Muy Buenas a todos:

Quisiera saber cómo hacer un "menu desplegable" sin jQuery ni nada por el estilo. Js puro.

bueno que cuando pase el raton por encima aparezca una seccion de la navegacion y cuando no este encima de dicho elemento desaparezca.

Le vamos a cambiar el título para mencionar que la solución que se da es solamente con CSS, ya que en principio no hace falta Javascript.

Respuestas

Efectivamente, no hace falta Javascript para crear un menú desplegable, al menos no hace falta en principio, a no ser que necesites alguna funcionalidad o efecto especial más avanzada.

La parte complicada sería cómo posicionar el elemento desplegable, porque esta parte necesita un poco de posicionamiento CSS, aunque lo resuelves con los atributos position: relative en el contenedor y position: absolute en el desplegable.

Mira este código HTML:

<div class="ancla" id="lanzador">
  <a href="#">Lanzador de menú</a>
  <div id="desplegable" class="desplegable">
   <a href="#">
    Este es el submenú 
   </a> 
   <a href="#">
    Otra opción 
   </a> 
  </div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

Fíjate que la parte desplegable está dentro del menú que lo abre, para poder posicionar bien un con respecto al otro.

Ahora mira este código CSS, que es el que consigue el efecto de mostrar y ocultar cuando pasas el ratón por el elemento que tiene el desplegable. Fíjate cómo se juega con el atributo position de CSS. Y cómo se hace uso de selectores CSS para conseguir seleccionar correctamente el hijo que se despliega.

.ancla {
  display: inline-block;
  background-color: #ffc;
  padding: 0.5rem 1rem;
  color: #00a;
  font-weight: bold;
  position: relative;
  line-height: 1rem;
}
.desplegable {
  background-color: #eee;
  padding: 0.5rem 1rem;
  display: none;
  position: absolute;
  top: 2rem;
  left: 0;
  z-index: 1;
  width: 150px;
}
.desplegable a {
  display: block;
  margin-bottom: 0.5rem;
}
.ancla:hover > a {
  color: red;
}
.ancla:hover .desplegable {
  display: block;
}

Cualquier duda más concreta puedes crear otra FAQ o comentar esta misma. Suerte!

Victor
302 8 21 17

Hola.

¿Te refieres a cómo desarrollarlo? o cómo implementarlo?

Porque para implementarlo existen diversas librerías que te pueden seguramente dar ya el código creado y que sea simplemente agregar el contenido que tú necesites. Muchos frameworks de diseño implementan como menús "dropdown" que puedes usar para crear tu menú. Es decir, igual tu menú no es más que una lista de 4 o 5 componentes dropdown que muestran más enlaces. Para que veas a qué me refiero, este es el componente dropdown de Materialize https://materializecss.com/dropdown.html

Para desarrollarlo por ti mismo tienes que tener un control sobre CSS para posicionar las capas de overlay y cómo mostrar y ocultar. No es algo trivial. Yo te sugiero aprender CSS y Javascript y hacerlo como ejercicio.

Si te atascas con algún punto concreto, por favor, envía tu duda siendo más específico en relación al problema que no sepas resolver. Por ejemplo, cómo hacer que un elemento se muestre o se oculte con Javascript, cómo hacer que un elemento se muestre encima de otro, cómo conseguir que un elemento se muestre al lado de otro, siendo que ese otro sirva de ancla y pueda estar situado en lugares distintos, etc. En fin, enfoca un poco más tu duda y podremos ayudarte mejor.

Sergio
366 11 32 13
si bueno ya lo diseñe y lo organize pero queria saber como ponerlo a funcionar.....en estos dias pense en hacer lo funcionar con CSS :hover me parecio bien ..... queria hacerlo sin ninguna libreria.......que te parece de hacerlo funcionar con CSS? =) :) gracias por la respuesta XD Sí, de una manera muy sencilla, pero incluso actualmente con CSS solamente podrías hacer algo de eso, incluso sin usar Javascript. Tienes que usar el :hover para darle visibilidad a ciertos child del elemento cuando se situa el ratón por encima. si lo intente pero no se me salio algo mal podria decirme como hacerlo