0

Me encuentro con una aplicación híbrida realizada en HTML, CSS y JavaScript, estoy con el menú superior, que lo he hecho responsive, de forma que en el móvil se vea como un desplegable, el problema es que al pulsar sobre un elemento del menú, no se cierra después, a menos que le de yo a cerrar. De la misma forma, si se pulsa fuera de él tampoco se cierra, y también debería.

El menú lo tengo administrado en dos archivos, en uno defino el navbar, y en el otro pongo los elementos del navbar. En resumen, debería de cerrar el menú al pulsar sobre un elemento del mismo, o al pulsar fuera de el.

Os dejo aquí el código, gracias de antemano:

Index.html:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#" id="ini1" onclick="comprobarUsuario();">tecnología</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbarColor01" style="">
    <ul class="navbar-nav ml-auto" id="inicio">      
    </ul>          
  </div>
</nav>

Control.js:

function mostrarNavLogout(){

  var strLogout = '<li class="nav-item"><a class="nav-link" href="#" onclick="com.obtenerAlumnos();"><span class="glyphicon glyphicon-log-out"></span>Alumnos</a></li>';
  strLogout= strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="com.obtenerProfesores();"><span class="glyphicon glyphicon-user"></span>Profesores</a></li>';
  strLogout= strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="abandonar();"><span class="glyphicon glyphicon-user"></span>Abandonar partida</a></li>';
  strLogout = strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="mostrarActualizarEliminar();"><span class="glyphicon glyphicon-user"></span>Modificar perfil</a></li>';
  strLogout = strLogout + '<li class="nav-item"><a class="nav-link" href="#" onclick="reset();"><span class="glyphicon glyphicon-log-out"></span>Salir</a></li>';

  $('#inicio li').remove();
  $('#inicio').append(strLogout);

}
3
  • 1
    Hola Víctor, veo que usas los glyphicon en tu código, pero las clases parecen ser de Bootstrap 4 que no lo soportan. ¿Qué versión de Bootstrap estás utilizando en tu proyecto? el 19 jul. 2019 a las 18:01
  • Sí, es Bootstrap 4, los glaphycon como dices no los muestra, los quitaré, el problema es lo del menú, ya he solucionado para que cuando se le de click a un elemento se vuelva a colapsar, me faltaría cuando se le da fuera, en otro punto de la pantalla. el 22 jul. 2019 a las 7:19
  • 1
    Actualiza entonces tu publicación con el avance que has realizado el 22 jul. 2019 a las 12:07

2 respuestas 2

0

Con un poquito de brujería de CSS puro, podemos hacer un menú desplegable basado en el elemento checkbox, donde es el checkbox quien determina si el menú es visible.

Te pongo el ejemplo:

#navbar-toggle {
  position: absolute;
  top: -99999px;
  left: -99999px;
  opacity: 0;
  visibility: hidden;
}

.nav-menu {
  display: none;
}

#navbar-toggle:checked + label .nav-menu {
  display: block;
}
<div class="navbar">
<input type="checkbox" id="navbar-toggle" />
<label for="navbar-toggle">
    <span class="btn-menu">Desplegar menú</span>
    <ul class="nav-menu">
      <li>Opcion1</li>
      <li>Opcion2</li>
      <li>Opcion3</li>
    </ul>
</label>

0

Puede que esto te ayude. Ejecuta el código y ve que cuando sacas el mouse desaparece el navbar.

function doc(element) {
  return document.querySelector(element);
}

const nav = doc("nav");
const none = doc(".none");

nav.addEventListener("mouseenter", ()=>{
  nav.style.width = "100%";
  setTimeout(()=>none.style.display = "initial",200)
})

nav.addEventListener("mouseleave", ()=>{
  nav.style.width = "50px";
  none.style.display = "none"
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  width: 50px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0404;
  font-size: 20px;
  position: relative;
  transition: 0.7s;
}

li.btn {
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: #0303;
}

li.none {
  display: none;
}

li {
  list-style: none;
}
<nav>
  <ul>
    <li class="btn">button</li>
    <li class="none">Navbar con javascript puro</li>
  </ul>
</nav>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.