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!
Entradas relacionadas:
Se muestran 3 ejemplos explicados paso a paso para ayudar a entender como funciona la estructura de programación for.
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio javascript avanzado que crea una lista de la compra y almacena la información mediante cookies. Incluye solución.
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
Ejercicio nivel principiante dónde se presenta una misma solución mediante un while y un for. Incluye solución.
No Comments