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.

[vc_custom_heading text=»¿Como queda el css?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

*{
    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;
    }

[vc_custom_heading text=»¿Como queda el js?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

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!