0

Hola muy buenas a todos.

Por más que le doy vueltas no consigo hacer un menú desplegable en el que las opciones se desplieguen por encima del título.

Digamos que tengo una lista de frutas. Pone frutas, y al pasar el ratón por encima, se despliegan las frutas que tengo, todo esto hecho con hover. Además, hay un alto definido en píxeles, ya que hay más de 12 frutas y quiero poder hacer scroll. Bueno pues mi duda es cómo podría hacer que se desplegasen las frutas hacia arriba, quedando el título en el mismo sitio. Lo que ocurre ahora mismo es que las frutas van para abajo y el título sube.

Estoy haciéndolo todo sin JS, solamente html y css.

Muchas gracias por vuestro tiempo, ¡Saludos!

PD: lo de frutas es un ejemplo.

.container-div {
     width: 40%;
     height: 700px;
     display: flex;
     justify-content: space-between;
     border: 2px solid #fd8c8c;
}
 .container-div--flex-end {
     align-self: flex-end;
     border: 2px solid green;
}
 .c-ul {
     width: 220px;
     margin: 10px auto;
     padding: 0;
     list-style: none;
     font-size: 18px;
     text-align: center;
}
 .c-ul__title {
     list-style: none;
}
 .c-ul__title:hover .c-ul--list {
     max-height: 1000px;
     transition: 0.3s all ease-in;
}
 .c-ul__a {
     display: block;
     padding: 10px 10px 10px 20px;
     background: #333;
     color: #eee;
     border-bottom: 1px solid #000;
     border-top: 1px solid #666;
     text-decoration: none;
     box-sizing: border-box;
}
 .c-ul--list {
     width: 220px;
     max-height: 0;
     margin: 0;
     padding: 0;
     list-style: none;
     overflow: hidden;
     transition: 0.3s all ease-in;
}
 .c-ul--list-overflow {
     height: 200px;
     overflow: auto;
}
 .c-ul--list__item {
     display: block;
     padding: 10px 10px 10px 20px;
     background: #333;
     color: #eee;
     border-bottom: 1px solid #000;
     border-top: 1px solid #666;
     text-decoration: none;
     box-sizing: border-box;
}
 .c-ul--list__item:hover {
     background: #666;
     color: #fff;
}
 
<div className="container-div">
  <div className="container-div--flex-end">
    <ul className="c-ul">
      <li className="c-ul__title">
        <a className="c-ul__a" href="#">
          Title
        </a>

        <ul className="c-ul--list">
          <div className="c-ul--list-overflow">
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 1
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 2
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 3
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 4
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 5
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 6
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 7
              </a>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>

2
  • 3
    Puedes compartir tu código? Commented el 29 ene. 2021 a las 2:49
  • Ya está, edité el mensaje principal con el código.
    – Rosebud66
    Commented el 29 ene. 2021 a las 13:09

1 respuesta 1

0

Puedes usar un transform, esta propiedad tiene que tener los prefijos como

  • -webkit- => Safari
  • -moz- => Firefox
  • -o- => Opera

Y también transition para animar el transform

.hovMenuUl {
  position:absolute;
  transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -moz-transform:scale(1,0);
  -o-transform:scale(1,0);
  transform-origin:top center;
  -webkit-transform-origin:top center;
  -moz-transform-origin:top center;
  -o-transform-origin:top center;
  background:#121212;
  color:#fff;
  transition:0.3s;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -o-transition:0.3s;
}

.hovMenuUl > li {
  padding:1rem;
}

.hovMenu:hover + ul {
  transform:scale(1,1);
  -webkit-transform:scale(1,1);
  -moz-transform:scale(1,1);
  -o-transform:scale(1,1);
}

ul:first-child {
  float:left;
}
<ul>
  <li>
    <p class="hovMenu">List</p>
    <ul class="hovMenuUl">
      <li><p>Subitem</p></li>
      <li><p>Subitem</p></li>
      <li><p>Subitem</p></li>
    </ul>
  </li>
</ul>

El valor scale() escala un elemento en el Eje X e Y, si pruebas con valores inferiores a 1, verás como se hace más angosto cada vez.

Y el transform-origin es para posicionar el elemento donde queremos, sin que se vaya tan lejos del <p> que debe hacer hover

Usé un float:left para prevenir que el <ul> ocupe toda la pantalla


Puede haber casos en los que un elemento superpone al otro

No hay que preocuparse mucho por este problema, pues se soluciona fácilmente con un z-index

Superpondrá a otro elemento si tiene posición relativa y no hay un z-index en alguno de ellos

Por que tenemos lo siguiente

.relative {
  position:relative;
  background:blue;
  height:500px;
  padding:1rem;
}

.absolute {
  position:absolute;
  background:red;
}
<span class="absolute">Absolute</span>
<div class="relative">Relative</div>

Como se pude ver, uno superpone a otro, esto altera cuando se cambia el orden de los elementos

.relative {
  position:relative;
  background:blue;
  height:500px;
  padding:1rem;
}

.absolute {
  position:absolute;
  background:red;
}
<div class="relative">Relative</div>
<span class="absolute">Absolute</span>

O también podemos superponerlo con un z-index

.relative {
  position:relative;
  background:blue;
  height:500px;
  padding:1rem;
}

.absolute {
  position:absolute;
  background:red;
  z-index:2;
}
<span class="absolute">Absolute</span>
<div class="relative">Relative</div>

La propiedad z-index pone el orden de los elementos, por defecto todos tienen 0, a menos que se le ponga esta propiedad.

Si un elemento tiene menor z-index que otro, el que tenga mayor z-index será superpuesto encima del otro.

1
  • ¡Muchas gracias!, no sabía que tenía esas opciones. Voy a investigar un poco. Por lo que veo además, podré hacer buenos efectos y animaciones con estas propiedades. ¡Saludos!
    – Rosebud66
    Commented el 29 ene. 2021 a las 13:49

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.