Dodanie funkcji zamykania okna w 'popupie'

Question

Mam ukrytego diva który wychodzi z lewej strony po najechaniu.

Jak zrobić żeby okno automatycznie się wyłaniało po otwarciu strony a po naciśnięciu X chowało się ?

 <section id="hero" data-aos="fade-up">
    <div class="box">
      <div class="box__content">
        <div class="box__title">News</div>
        <div class="box__description">
        Our news
        </div>
      </div>
    </div>

.box {
    background: #000000;
    border-radius: 0px 4px 4px 0px;
    left: -304px;
    padding: 4px 4px 4px 0px;
    position: fixed;
    top: 580px;
    transition: transform 0.4s;
    width: 300px;
}

.box:hover {
    transform: translateX(304px);
}

.box .box__content {
    background: #000000;
    min-height: 200px;
    padding: 10px;
    position: relative;
    color: #ffffff;
}

.box .box__title {
    background: #000000;
    border: solid #000000;
    border-radius: 0px 0px 4px 4px;
    border-width: 0px 4px 4px;
    cursor: default;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: -72px;
    text-align: center;
    top: 70px;
    transform: rotate(-90deg);
    width: 106px;
}

 

Answer 1

.box:hover {
    transform: translateX(304px);
}

Jeśli ten styl odpowiada za otwieranie menu, to zrobiłbym z tego selektor listy, np. .box--opened, .box:hover i dodał do elementu HTML klasę box--opened, żeby po wczytaniu strony mógł od razu otworzyć się sam.

Nie wiem o jakim "przycisku X" mówisz, ale możesz dodać mu obsługę kliku i tam usunąć klasę box--opened.

Próbowałem przetestować całość na CodePen, ale trzeba wyłączyć pozycję top żeby w ogóle zobaczyć menu, więc nie wiem, czy kod, który wstawiłeś działa bez dodatkowego kontekstu, a widzę atrybut data-aos, więc chyba używasz biblioteki do scrollowania.