Es ist egal welches CMS man verwendet in allen egal ob WordPress oder Kirby oder Typo3, ein Menu ist ein sehr wichtiges Element auf einer Webseite. Leider wissen viele nicht wie einfach es eigentlich ist ein einfaches responsives Menu zu erstellen und das will ich heute ändern. Ich zeige euch die wichtigsten Elemente eines Menus die ihr braucht und wo ihr was ändern könnt, damit es in euer Design / CI passt.

Also spitzt die Ohren, putzt die Augen und passt auf, jetzt gehts los

Video

Font Awesome

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js" integrity="sha512-b+nQTCdtTBIRIbraqNEwsjB6UvL3UEMkXnhzd8awtCYh0Kcsjl9uEgwVFVbhoj3uu1DO1ZMacNvLoyJJiNfcvg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

HTML

<nav>
      <input type="checkbox" id="check" />
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">Chefblogger</label>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Über mich</a></li>
        <li><a href="#">Ort</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Offen</a></li>
      </ul>
</nav>

CSS

nav {
  background: #0082e6;
  height: 80px;
  width: 100%;
}
label.logo {
  color: #fff;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 3px;
}

a.active,
a:hover {
  background: #1b9bff;
  transition: 400ms;
}

.checkbtn {
  font-size: 30px;
  color: #fff;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check {
  display: none;
}

@media (max-width: 985px) {
  label.logo {
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 880px) {
  .checkbtn {
    display: block;
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    text-align: center;
    top: 80px;
    left: -100%;
    transition: all 500ms;
  }
  nav ul li {
    display: block;
  }
  nav ul li a {
    font-size: 20px;
  }
  #check:checked ~ ul {
    left: 0;
  }
}

@media (max-width: 413px) {
  label.logo {
    color: #fff;
    font-size: 20px;
    line-height: 80px;
    padding: 0 10px;
    font-weight: bold;
  }
}