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:

Sustituir un nodo por otro en el DOM mediante Javascript
- 240
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.
Ejercicio JS: Uso de length y acceso a las posiciones de un array.
- 152
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.
Resumen de como comentar código en html, css y javascript
- 450
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...
Ejercicio JS – Susto emergente
- 75
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Como contar vocales y espacios en blanco en un texto mediante javascript
- 143
Ejercicio con solución dónde se muestra como hacer un script que cuenta todas las vocales y espacios en blanco de un texto introducido por el usario.
Función que crea un objeto y lo almacena en una lista en Javascript
- 478
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Funciones Javascript: declaración, uso y utilidad en programación
- 568
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 144
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio – Generación de un dado de 6 caras con javascript
- 142
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Como llamar nodos del DOM mediante javascript
- 477
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
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.