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:
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. 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.
Ejercicio de programación de una venta emergente con el mítico mensaje de Ley de Cookies. Paradójicamente hay que usar una cookie para cumplir con la ley de cookies. Incluye solución.
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
No Comments