20 Dic Ejercicio JS – Menú vertical desplegable con javascript (sin jquery)
Vamos a crear un menú vertical con un sub menú desplegable al activar un evento.
Importante: Este ejercicio es el típico que se haría muchísimo más fácil con jQuery. Sin embargo a nivel didáctico es interesante por la cantidad de conceptos que se usarán.
A nivel de Javascript practicaremos:
- Asignación de eventos al cargar un documento web.
- Condicional dado un estilo de una caja html.
A nivel de CSS practicaremos:
- Como crear un menú vertical.
- Inserción de iconos mediante font awesome.
Vayamos al ejercicio
Enunciado
Crea un menú vertical con un submenú desplegable según el de la imagen.
- Cuando se haga click por primera vez el menú se desplegará.
- Si se vuelve a hacer click se ocultará.
Usa el siguiente código html:
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quiénes somos</a></li>
<li class="submenu"><a href="#">Servicios</a><i class="far fa-caret-square-down more"></i><ul>
<li><a href="#">Servicio A</a></li>
<li><a href="#">Servicio B</a></li>
<li><a href="#">Servicio C</a></li>
</ul></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
Solución del ejercicio
Fijaros que la solución entregada puede ser perfeccionada.
El concepto importante a retener es que inicialmente el submenú se esconde mediante Javascript y se le asigna la propiedad display:none;
A continuación se asigna el evento click a la etiqueta <i> para que cuando su display sea block se oculte y viceversa.
Otra cuestión interesante es como se ha usado font awesome.
¿Como queda el css?
*{
box-sizing:border-box;
margin:0;
padding:0;
}
li{
list-style-type:none;
position:relative;
width:120px;
}
li a{
text-decoration:none;
display:inline-block;
padding:5px 10px;
width:120px;
height:30px;
border:1px solid #000;
color:#000;
}
.more{
display:inline-block;
position:absolute;
right:0px;
font-size:30px;
}¿Como queda el js?
window.onload = init;
function init(){
document.querySelectorAll(".more")[0].addEventListener("click",submenu);
document.querySelector(".submenu > ul").style.display = "none";
}
function submenu(){
var estado = document.querySelector(".submenu > ul").style.display;
if (estado == "none"){
document.querySelector(".submenu > ul").style.display = "block";
}else{
document.querySelector(".submenu > ul").style.display = "none";
};
}Si juntamos todas las piezas resolvemos el ejercicio.
¡Ah! Pensar a importar la librería de Font Awesome
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">Podéis descargar una posible solución de este ejercicio en este enlace.
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejercicio javascript con un campo que se muestra cuando se selecciona un asunto determinado mediante un select. Incluy resolución.
Ejercicio javascript dónde se inhabilitan todos los enlaces al cargar una web. Al hacer click en un botón se activan de nuevo. Incluye solución.
En esta entrada encontrarás 3 formas distintas de modificar tu ubicación de búsqueda en google sin necesidad de que te tengas que desplazar.
Ejercicio javascript dónde se repasa la sintaxi de funciones. Corrige los errores.
En esta entrada explicamos los tipos de cookies que existen y mostramos una biblioteca de funciones que nos permite crear, modificar, eliminar y detectar cookies con javscript.
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
No hay comentarios