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:
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
No saber resolver un problema como alumno es normal. Que te suceda como profesor da mucha rabia. ¿Me ayudas con un problema de JS difícil?
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
Programa javascript en la que se crea una etiqueta imagen que contiene un gif con un saludo. Se practica addEventListener() y removeChild(). Incluye solución.
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
No hay comentarios