0

Quiero hacer un menú completamente responsive con varias opciones. Quiero hacer algo similar a lo siguiente. Pero quiero que los botones no tengan un tamaño fijo, ni un número fijo de columnas, y que todos los botones tengan siempre el mismo tamaño, y por supuesto que los botones cubran todo el tamaño de la caja. Estaba tratando de hacerlo con la propiedad flex, pero no funcionó para mí. Te muestro el menú.

Muchas gracias.

Quiero algo como esto [1]: https://i.sstatic.net/1Jok0.png

CSS

#desplegableTitle {
    width: 160px;
    margin-left: auto;
    margin-right: auto;
}

#desplegableTitle a {
    background-color: #00857a;
    color: #fff;
    box-shadow: #aaaaaa 0px 0px 15px 0px;
    border-radius: 20px;
    padding: 8px;
}

.listaRecursos {
    padding: 20px;
    border-radius: 20px;
    box-shadow: #cccccc 0px 0px 15px 0px;
}

#desplegable {
    overflow: hidden;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}

#desplegable li {
    flex: 1 1 0px;
}

 

Html

 <div class="full">
    <div class="mainCont">

        <ul class="listaRecursos">
            <li id="desplegableTitle"><a>Recursos</a></li>
            <div id="desplegable">
                <li>
                    <a href="#">Cursos</a>
                </li>
                <li>
                    <a href="#">Videos</a>
                </li>
                <li>
                    <a href="#">Webinars</a>
                </li>
                <li>
                    <a href="#">Revistas</a>
                </li>
                <li>
                    <a href="#">Articulos</a>
                </li>
                <li>
                    <a href="#">Noticias</a>
                </li>
                <li>
                    <a href="#">Grabaciones</a>
                </li>
                <li>
                    <a href="#">12
                        Octubre</a>
                </li>
            </div>
        </ul>
    </div>
</div>
3
  • 1
    Hola, sany, gracias por unirte a Stack Overflow. No puedo mirar tus imágenes, por favor edita tu pregunta y de paso, te recomiendo que vayas a Cómo preguntar para que tu experiencia en el foro sea mejor. Commented el 5 feb. 2021 a las 11:10
  • 2
    Es importante que indiques qué has intentado. Por favor, edita tu pregunta y agrega un ejemplo mínimo verificable.
    – padaleiana
    Commented el 5 feb. 2021 a las 11:12
  • Ya añadí el cogido que utilice
    – sany
    Commented el 5 feb. 2021 a las 21:22

1 respuesta 1

1

Esto se puede lograr de distintas formas. Me tomé el atrevimiento de realizarlo sin las etiquetas <ul> y <li> que tenías. Utilice Media Queries para lo de responsive. Las longitudes, colores, etc. puedes cambiarlas según tus objetivos. Puedes mejorar esta solución, espero te ayude.

* {
  /* 
    Esto permite que si se define un elemento con un ancho de 100 pixeles. Esos 100 
    pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido 
    se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil 
    dimensionar elementos.
  */
  box-sizing: border-box;
}
.mainCont {
  font-weight: bold;
  padding: 20px;
  border-radius: 20px;
  margin: 15px;
  box-shadow: #cccccc 2px 4px 10px 0px;
}
.desplegableTitle {
  /* Utilizo flex en el div para facilitar el centrado  (Recursos)*/
  display: flex;
  justify-content: center; /* centro la etiqueta <a> */
}
.desplegableTitle a {
  background-color: #00857a;
  color: #fff;
  box-shadow: #aaaaaa 2px 4px 10px 0px;
  border-radius: 20px;
  padding: 15px 28px;
  font-size: 22px;
}
.desplegableTitle a:hover {
  /* efecto que cambia el color de las etiquetas <a> al pasar sobre el */
  background-color: #095c55;
  color: #fff;
}
.desplegable {
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.desplegable a {
  flex: 100%; /* Para movil */
  float: left;
  text-align: center;
  text-decoration: none;
  background-color: #ddd;
  color: black;
  font-size: 18px;
  border-radius: 20px;
  padding: 15px 28px;
  margin: 4px;
}
.desplegable a:hover {
  background-color: rgb(150, 147, 147);
  color: #fff;
}

/* Medias queries para cambiar los tamaños de las etiquetas según ancho de la pantalla 
*/

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .desplegable a {
    flex: 33.33%;
  }
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .desplegable a {
    flex: 22.5%;
  }
}
<div class="full">
  <div class="mainCont">
    <div class="desplegableTitle">
      <a>Recursos</a>
    </div>
      <div class="listaRecursos">
        <div class="desplegable">
          <a href="#">Cursos</a>
          <a href="#">Videos</a>
          <a href="#">Webinars</a>
          <a href="#">Revistas</a>
          <a href="#">Articulos</a>
          <a href="#">Noticias</a>
          <a href="#">Grabaciones</a>
          <a href="#">12 Octubre</a>
      </div>
    </div>
  </div>
</div>

2
  • Muchas gracias por tu ayuda! Ahora lo probaré
    – sany
    Commented el 6 feb. 2021 a las 12:20
  • Bueno, de nada.
    – WilsonPT
    Commented el 6 feb. 2021 a las 22:54

Tu Respuesta

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

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