Wir erstellen ein responsives Menu mit Untermenu innert wenigen Minuten – so einfach geht es (HTML & CSS)

Ich habe euch ja bereits gezeigt wie man ein einfaches responsives Menu machen kann (Wie programmiert man ein einfaches responsives Menu? (HTML & CSS)) und heute machen wir es ein wenig komplizierter. Diesmal machen wir nicht nur ein responsives Menu mit Hauptmenupunkte sondern auch mit Untermenu und Unter-Untermenupunkte.

Klingt kompliziert? Keine Angst, wenn man ein wenig aufpasst was man macht, ist auch diese Art von Menu keine Hexerei und mit dieser Anleitung könnt ihr sowas selbst bauen.

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

<header>
      <a href="#" class="logo">Chefblogger</a>
      <input type="checkbox" id="menubar" />
      <label for="menubar" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>

      <nav class="navbar">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Über mich</a></li>
          <li>
            <a href="#">Galerie +</a>
            <ul>
              <li><a href="#">Bild1</a></li>
              <li><a href="#">Bild2</a></li>
              <li>
                <a href="#">Bild3 +</a>
                <ul>
                  <li><a href="#">Alt1</a></li>
                  <li><a href="#">Alt2</a></li>
                  <li><a href="#">Alt3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Seite +</a>
            <ul>
              <li><a href="#">Seite 1</a></li>
              <li><a href="#">Seite 2</a></li>
              <li><a href="#">Seite 3</a></li>
            </ul>
          </li>
          <li><a href="#">Bericht</a></li>

          <li><a href="#">Kontakt</a></li>
        </ul>
      </nav>
    </header>

CSS

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 0 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
}

header .logo {
  font-weight: bolder;
  font-size: 30px;
  color: #333;
}

header .navbar ul {
  list-style: none;
}

header .navbar ul li {
  position: relative;
  float: left;
}

header .navbar ul li a {
  font-size: 20px;
  padding: 20px;
  color: #333;
  display: block;
}
header .navbar ul li a:hover {
  background: #333;
  color: #fff;
}
/* untermenu*/
header .navbar ul li ul {
  position: absolute;
  left: 0;
  width: 150px;
  background: #fff;
  display: none;
}

header .navbar ul li ul li {
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* unter unter menu*/
header .navbar ul li ul li ul {
  left: 150px;
  top: 0;
}

/* unter menu bei hover anzeigen */
header .navbar ul li:hover > ul {
  display: initial;
}

#menubar {
  display: none;
}

.checkbtn {
  font-size: 40px;
  color: #333;
}

.checkbtn:hover {
  color: #7d7d7d;
}

header label {
  display: none;
}

@media (max-width: 991px) {
  header {
    padding: 20px;
  }
  header label {
    display: initial;
  }

  header .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: none;
  }

  header .navbar ul li {
    width: 100%;
  }

  header .navbar ul li ul {
    position: relative;
    width: 100%;
  }
  header .navbar ul li ul li {
    background: #eee;
  }
  header .navbar ul li ul li ul {
    width: 100%;
    left: 0;
  }

  #menubar:checked ~ .navbar {
    display: initial;
  }

  #menubar:checked ~ .checkbtn {
    color: #a81c1c;
  }
}