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:
El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web. Cada et...
Programa que pide al usuario un número y escribe todas las tablas de multiplicar del 1 al número dado reutilizando código. Incluye solución.
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Dos ejercicios nivel principiante dónde repasar como se usa la estructura condicional if(){}else if(){}else{}. Incluyen solución.
No Comments