-1

Quisiera hacer una replica del menú de opciones que usa Airbnb en su página, la funcionalidad me imagino que es igual a los tabs de Bootstrap, pero los tabs no se cierran, es como una combinación en tabs y modales. Adjunto imagenes para explicarme mejor:

Este es el diseño inicial de la barra de opciones

Despues de dar click a un boton se abre el div con sus opciones, si se le pica a otro boton, se cierra el div anterior y se abre uno nuevo.

Se le dio click a otra opción, el div anterior se cierra y uno nuevo se abre.

1
  • Como ya sabes y basándonos en Cómo preguntar, tu pregunta carece de elementos importantes tales como lo que llevas al momento y dudas puntuales lo cual provocará su cierre.
    – user128299
    el 18 sep. 2020 a las 4:13

1 respuesta 1

0

Como va? Fijate te arme un ejemplo: https://codepen.io/jorgepenela/pen/eYZPpGg La solución que encontré seria tener un div oculto dentro de cada botón. Ese div tiene posición absoluta con respecto al botón que lo contiene (li). Luego con javascript lo que hago es agregarle o sacarle la clase "activo" al boton --> Si esta activo mostrame el div sino ocultalo :)

Adentro del div podes meter lo que vos quieras. Espero te sirva.

HTML:

<ul class="menu">
  <li>boton 1
      <div> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor felis justo, et bibendum ante mattis nec. Donec tincidunt volutpat ante eu varius.
      </div>
  </li>
  <li>boton 2
      <div> 
        Vestibulum ante ipsum primis in   faucibus orci luctus et ultrices posuere cubilia curae; Phasellus feugiat eu nulla id finibus. 
      </div>
  </li>
<ul>
  

CSS:

/*armo los estilos del menu y el submenu */
.menu li{
  display: inline-block;
  border: solid thin;
  padding: 5px 10px;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  z-index:5;
}

.menu li div{
  position: absolute;
  top: 40px;
  background: #fff;
  box-shadow: 1px 1px 10px #000;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
  z-index: 9;  
  display: none;
}
/* estilos del boton activo */ 
.menu li.activo{
  border: solid 2px;
}
.menu li.activo div{
  display: block;
}

JS:

botones = document.querySelectorAll('.menu li')

botones.forEach( 
  (b)=>{
    b.addEventListener('click', ()=>{   
      if(b.classList.contains('activo')){        
        // Si ya esta activo, le saco la clase.
        b.classList.toggle('activo')
      }else{
        // borro todos los activos que haya
        botones.forEach((boton)=>{
          boton.classList.remove('activo')
        })
        // Luego agrego clase activo al boton que click
        b.classList.toggle('activo')
      }
      
    })
  } 
)
0

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