• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

217
Vistas
¿Cómo puedo crear varios submenús en Javascript?

CÓDIGOS HTML:

 <header> <nav> <ul> <li class="asmenu"><a href="#">Menu1 <i class="fa fa-caret-down"></i></a> <ul class="submenu deactive"> <li><a href="#">Menu1-a</a></li> <li><a href="#">Menu1-b</a></li> <li><a href="#">Menu1-c</a></li> <li><a href="#">Menu1-d</a></li> </ul> </li> <li class="asmenu"><a href="#">Menu2 <i class="fa fa-caret-down"></i></a> <ul class="submenu deactive"> <li><a href="#">Menu2-a</a></li> <li><a href="#">Menu2-b</a></li> <li><a href="#">Menu2-c</a></li> <li><a href="#">Menu2-d</a></li> </ul> </li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> <li><a href="#">Menu6</a></li> </ul> </nav> </header>

CÓDIGOS CSS:

 header nav ul li { position: relative; } .submenu { position: absolute; width: 20rem; height: 20rem; background-color: darkgoldenrod; margin-top: 2rem; border-radius: 0rem 0rem 2.5rem 0rem; } .active { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; } .deactive { display: none; }

La pregunta es cómo puedo hacer un submenú usando estos códigos en Javascript. Quiero usar "alternar" pero no lo hice. Lo intenté varias veces, pero debido a que tengo 2 submenús, siempre tengo un error. En primer lugar, traté de mover el mouse y mover el mouse hacia afuera, pero cuando paso el mouse hacia el menú 2, está abriendo el submenú del menú 1 o cualquier otra cosa que se esté abriendo.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

prueba esto

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <h2>Multi-Level Dropdowns</h2> <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p> <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li class="dropdown-submenu"> <a class="test" href="#">Another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html>

fuente

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda