Como hacer un Menu Vertical estilo Acordeón con HTML, CSS y Jquery (Parte 3)



En este capitulo acabamos con el menu realizando la parte de jquery para hacer funcionar nuestro acordeón.

🚀 Blog de diseño web:
https://www.falconmasters.com

✔️ Curso Completo de Diseño Web Profesional:
https://www.udemy.com/course/diseno-web/?referralCode=BCC54890816B6A9BCFB7

✔️ Curso Completo de PHP7 y MYSQL:
https://www.udemy.com/course/php-y-mysql/?referralCode=65030D8167A2AC468B3A

✔️ Curso de Bootstrap 4:
https://www.udemy.com/course/curso-bootstrap/?referralCode=9295F0DABEA90E98FF64

✔️ Curso de Ecommerce:
https://www.udemy.com/course/curso-tienda-online/?referralCode=18423E7B622E6C6C2846


Redes Sociales:

♦ Twitter @falconmasters:

♦ Pagina de Facebook:
http://www.facebook.com/falconmasters

source

You May Also Like

About the Author: admin

34 Comments

  1. Programadores !!! El codigo funciona a la perfección, si tienen el codigo igual y no les quiere funcionar, solamente ubiquen el script al final antes de cerrar el body !! justo como carlos dice, tengan cuidado donde ubican los scripts ! me paso, que no hacia nada pero coloque el direccionamiento src del script al final y todo funciono a la perfección . suerte !!

  2. Amigo excelente tutoríal, pero no me lee mis archivos js no sé si sea porque han actualizado jquery y cambiando instrucciones, ya rectifique bien mi código, no podrás ayudarme?

  3. Falcon tus vídeos son geniales gracias a ti eh aprendido mucho mejor dicho soy el mejor en clase por que recién estamos comenzando a ver etiquetas y nuestro proyecto es hacer un sistema web
    así que te agradecería que sigas subiendo contenido. de este tipo
    Dios Te Bendiga
    Alexander Fuentes Futuro Ingeniero de Software

  4. ayuda porfa con mi archivo main.js, no quiere conectar con jquery y no se porque, llevo tres horas checando el codigo y esta todo igual, pero no quiere ejecutar esa parte

  5. Si yo lo que tengo en el submenu no es una etiqueta "a", si no un input tipo "file" y necesito que funcione, es decir que se le pueda dar click para elegir la foto que necesito cargar al servidor, ya que al dar click en ese input el acordeon se cierra, es posible????

  6. Hola FalconMaster sabes me encanto tu tutorial, mil gracias. tengo una consulta, mi menú lateral se hace grande porque tiene muchas opciones y en modo normal no hay problema se puede desplazar y se pueden ver las demás opciones abajo pero en modo de móvil no puedo ver las ultimas opciones de menú. de antemano muchas gracias. Saludos

  7. Yo no entiendo…. en el minuto 3:45 dices que preguntas al programa si el elemento productos tiene la clase "activado", pero en el video pasado ud mismo dijo que borraramos la clase activado…. eso quiere decir que nadie tiene la clase activado !!!

  8. Ayudenme u.u $(document).ready(function(){
    $('.menu li:has(ul)').click(function(e){
    e.preventDefault();

    if($(this).hasClass('activado')){
    $(this).removeClass('activado');
    $(this).children('ul').slideUp();
    }else{
    $('.menu li ul').slideUp();
    $('.menu li').removeClass('activado');
    $(this).addClass('activado');
    $(this).children('ul').slideDown();
    }
    });
    });
    VOY EN ESE PUNTO….. Hasta antes del JS me funciona bien, me falta que se desglose los subs menú, pero no da clic ni nada </3 AYUDAAAA pd: lo estoy haciendo en netbeans

  9. Hola qué tal muchas gracias por estos videos muy bien explicados.

    Alguien que me ayude con esta pregunta:

    Ya me funciona e menú, pero en versión escritorio el menú lo puse en horizontal, le quise dar hover y ya me aparecen los súbmenus pero ahora al darle click al li padre y al salirme del submenu al nav se hace de la altura del submenu y los submenus se quedan abiertos … en la version Mobil me funciona sin problemas…
    hay alguna forma de quitarle el evento click en la versión de escritorio ya que me gustaría que se quedara solo con el hover …

    Muchas gracias por su ayuda

  10. hola hola primero que todo gracias por el excelente video y aporte, quisera saber como hacer para que cuando se despliegue el menu no me baje los elementos de abajo, osea que el menu mantenga un tamaño estandar gracias!

  11. Alguien pudo con este ejemplo,hacer otro submenu? es decir Productos->Item 1->y aca otro submenu? tengo problemas en el java script al tratar de implementarlo al poner otro nivel. Le agradecceria quien me pudiera ayudar a este problema

  12. Tengo un pequeño problema, lo único que no me funciona es al momento de querer desplegar los submenús, pero lo demás está bien, incluso cuando está en versión móvil le doy click a la barra azul del menú y me despliega lo demás pero al momento de darle click a las barras grises (submenús) ya no me funciona, ya reescribí el código muchas veces, el único detalle que encuentro es que sale dos errores, el primero dice: Line 1 '$' was used before it was defined y el segundo dice: Line 2 Missing 'use strict' statement, ya traté de investigar en Internet pero al parecer no hay mucha información sobre ello, no sé si ha alguien más le pase.

    Por cierto, muy buenos tutoriales ;D

Comments are closed.