Dropdown menu html + css without JavaScript

Question

Hello could someone please tell me why my menu does not go from page to page. Dropdown works but when I click it doesn't go to the subpage. Anticipating the question, I don't want to use JavaScript. Buttons without dropdown menu works. If this cannot be fixed, could someone sent me a menu in similar style without JavaScript.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #333;
}

hr {
  border-top: 2px dashed white;
  border-bottom: none;
}

a {
  text-decoration: none;
  color: black;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
  height: 6vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 60%;
  margin: auto;
}

.dropdown {
  position: relative;
}

.dropdown ul {
  position: absolute;
  background: #bebebe;
  margin-top: 10px;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  list-style: none;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.6s ease;
  left: 0px;
}

.dropdown li {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dropdown li:hover {
  background-color: darkslategray;
}

.navbar button,
.deco {
  background: none;
  border: none;
  color: black;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
}

.navbar button:hover,
.deco:hover {
  color: darkslategray;
}

.dropdown button:focus+ul {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0px);
}

.top {
  text-decoration: none;
  background: yellow;
  border: none;
  color: black;
  font-size: 48px;
  cursor: pointer;
  border-radius: 5px;
  width: 45px;
  height: 45px;
  align-items: center;
  right: 0;
  bottom: 0;
  position: fixed;
}

.autor {
  color: #bebebe;
  font-size: 16px;
}

.printButton {
  border: none;
  font-size: 18px;
  border-radius: 5px;
  width: 80px;
  height: 20px;
  cursor: pointer;
  color: black;
  background: darkslategray;
}

@media print {
  .noPrint {
    display: none;
  }
}

<header class="noPrint">
  <a href="index.html"><img src="https://via.placeholder.com/80" alt="Logo strony" class="center"></a>
  <div class="navbar">
    <button><a href="index.html" class="deco">Główna</a></button>
    <div class="dropdown">
      <button>Ciasta</button>
      <ul>
        <li><a href="biszkopt.html">Biszkopt</a></li>
        <li><a href="beza.html">Beza</a></li>
        <li><a href="makowiec.html">Makowiec</a></li>
      </ul>
    </div>
    <div class="dropdown">
      <button>Pieczywo</button>
      <ul>
        <li><a href="chleb.html">Chleb</a></li>
        <li><a href="bulki.html">Bułki</a></li>
        <li><a href="bulkiNaSlodko.html">Bułki na słodko</a></li>
      </ul>
    </div>
    <button><a href="informacje.html" class="deco">Informacje</a></button>
  </div>
</header>

Are you asking why your anchor links don't work? They do, as far as I can see. — isherwood
– isherwood, Commented Jan 25, 2022 at 20:19
@RomanGavrilov This is what my menu looks like: imgur.com/a/kcxVbxL When I click on an item from the list, nothing happens. It should take me to the subpage — xEska
– xEska, Commented Jan 25, 2022 at 20:35
@isherwood If you can't have anchors in buttons, how should I do that? — xEska
– xEska, Commented Jan 25, 2022 at 20:36

isherwood · Accepted Answer · 2022-01-26 13:51:55Z

Instead of using a button, I used input of type checkbox to style the dropdown when its open and remove the style when its closed. button won't work because they require either JavaScript to add functions or be inside a form element (to act as a submit button which is not what you want here).

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown > .dropdown-text {
    padding: 10px 20px;
}
.dropdown > input {
    top: 0;
    opacity: 0;
    margin: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    cursor: pointer;
}
.dropdown > input:checked + .dropdown-container {
    transform: scaleY(1);
}
.dropdown > .dropdown-container {
    transform: scaleY(0);
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
}
.dropdown > .dropdown-container > a {
    display: block;
    text-decoration: none;
    padding: 10px;
    background-color: #ffffff;
    color: #000000;
}

<div class="dropdown">
    <div class="dropdown-text">THIS IS A DROPDOWN</div>
    <input type="checkbox">
    <div class="dropdown-container">
        <a href="/link1">Item 1</a>
        <a href="/link2">Item 2</a>
        <a href="/link3">Item 3</a>
    </div>
</div>

Collectives™ on Stack Overflow

Dropdown menu html + css without JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related