Ejercicio JS – Menú vertical desplegable con javascript (sin jquery)

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>
Ejercicio JS - Menú vertical desplegable con javascript (sin jquery) 1

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!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.