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

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

Print Friendly, PDF & Email
Ejercicio JS – Menú vertical desplegable con javascript (sin jquery)
Valora esta entrada

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:

Como programar la ley de cookies con Javascript
- 101
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.
Ejercicio JS: Uso de length y acceso a las posiciones de un array.
- 251
En este ejercicio se practica el método length y se usa para jugar con los arrays y acceder al primer elemento y al último de un vector.
El Document object model (DOM) de Javascript
- 517
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...
Resumen de como comentar código en html, css y javascript
- 772
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...
Sustituir un nodo por otro en el DOM mediante Javascript
- 360
Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como: Identificar nodos del DOM. Crear nuevos nodos. Si tienes claros estos conceptos sigue leyendo el ejemplo práctico.
Eliminar el comportamiento por defecto de un elemento html
- 409
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Palabras reservadas que no se deben usar para declarar variables
- 341
Listado de palabras reservadas en Javascript de acuerdo con el último stándard ECMA Script 6.
Lista de la compra con javascript perfeccionada con cookies
- 111
Ejercicio javascript avanzado que crea una lista de la compra y almacena la información mediante cookies. Incluye solución.
Ejercicio – Escribir un texto almacenado en una variable
- 235
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 215
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.