Html - Pop up menu script

Phong2902
November 25, 2023
239 views
0 votes
2 Answers

I am trying to create a simple pop up menu where every time you click on the button, it will show 3 items, then it would close when you click outside of it.

  let menu = document.getElementById("book-menu");

  const toggleMenu = () => menu.classList.toggle("show");

  window.onclick = (event) => {
    if (!event.target.matches('.homepage-button')) {
        if(menu.classList.contains('show')){
            menu.classList.remove('show')
        }
    }
}

#book-menu {
    border: solid 2px;
    border-radius: 5px;
    display: none;
    position: fixed;
    width: 20%;
    left: 20%;
    bottom: 20%;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: 1rem;
    text-align: left;
    background-color: white;
  }

  .book-item {
    text-align: center;
    margin: 5px;
    border: solid 2px;
    border-radius: 5px;
    padding: 8px 20px;
    cursor: pointer;
    list-style: none;
    transition: all 0.3s ease;
  }

  .book-item:hover {
    background-color: red;
  }

  .show {
    display: block;
  }

<button onclick="toggleMenu()" id="book-btn" class="homepage-button"> BOOK</button>

<div>
      <ul id="book-menu">
        <li class="book-item">Mitte</li>
        <li class="book-item">Kreuzberg</li>
        <li class="book-item">Zoo</li>
      </ul>
    </div>

It seems there is something wrong with the JavaScript part, because I cannot add the "show" class to the div regardless of what I do, what am I doing wrong here ?

Answers

Your code is fine, but the css class based declaration for .show has a lower precedence than the id based #book-menu declaration.

If you change your show class selector to:

#book-menu.show{...}

This will work (as will any other option where your updated CSS takes precedence over the element’s default styling)

let menu = document.getElementById("book-menu");

  const toggleMenu = () => menu.classList.toggle("show");

  window.onclick = (event) => {
    if (!event.target.matches('.homepage-button')) {
        if(menu.classList.contains('show')){
            menu.classList.remove('show')
        }
    }
}

#book-menu {
    border: solid 2px;
    border-radius: 5px;
    display: none;
    position: fixed;
    width: 20%;
    left: 20%;
    bottom: 20%;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: 1rem;
    text-align: left;
    background-color: white;
  }

  .book-item {
    text-align: center;
    margin: 5px;
    border: solid 2px;
    border-radius: 5px;
    padding: 8px 20px;
    cursor: pointer;
    list-style: none;
    transition: all 0.3s ease;
  }

  .book-item:hover {
    background-color: red;
  }

  #book-menu.show {
    display: block;
  }

<button onclick="toggleMenu()" id="book-btn" class="homepage-button"> BOOK</button>

<div>
      <ul id="book-menu">
        <li class="book-item">Mitte</li>
        <li class="book-item">Kreuzberg</li>
        <li class="book-item">Zoo</li>
      </ul>
    </div>

We can use !important in css to have more priority than previous class property.

.show {
   display: block !important;
 }

Below is the final code:

  let menu = document.getElementById("book-menu");

  const toggleMenu = () => menu.classList.toggle("show");

  window.onclick = (event) => {
    if (!event.target.matches('.homepage-button')) {
        if(menu.classList.contains('show')){
            menu.classList.remove('show')
        }
    }
}

#book-menu {
    border: solid 2px;
    border-radius: 5px;
    display: none;
    position: fixed;
    width: 20%;
    left: 20%;
    bottom: 20%;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: 1rem;
    text-align: left;
    background-color: white;
  }

  .book-item {
    text-align: center;
    margin: 5px;
    border: solid 2px;
    border-radius: 5px;
    padding: 8px 20px;
    cursor: pointer;
    list-style: none;
    transition: all 0.3s ease;
  }

  .book-item:hover {
    background-color: red;
  }

  .show {
    display: block !important;
  }

<button onclick="toggleMenu()" id="book-btn" class="homepage-button"> BOOK</button>

<div>
      <ul id="book-menu">
        <li class="book-item">Mitte</li>
        <li class="book-item">Kreuzberg</li>
        <li class="book-item">Zoom</li>
      </ul>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Pop up menu script

Answers