Sitemap

Von den Gipfeln der Startseite bis zu den versteckten Ecken der Archivseite – folge dem Weg der Information und entdecke das Herz unserer Webseite. Willkommen in unserem Sitemap-Menü.

Basiscode

Fangen wir an mit dem erstellen der notwendigen Dateien, einmal index.html, style.css und scripts.js. Die index.html füllen wir erstmal mit einem Basiscode in dem wir style und scripts einbinden.

// index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sitemap</title>
    <link rel="stylesheet" href="assets/style.css" />
  </head>
  <body>
    <script src="assets/scripts.js"></script>
  </body>
</html>

Weiter füllen wir die index mit dummy Text. Wir erstellen einen main Container mit mehreren section und gestallten ihn in der style.css.

// assets/style.css

html,
body {
  margin: 0;
  padding: 0;
}
main {
  max-width: 1248px;
  margin: auto;
  padding: 0 1rem;
}

section {
  margin-bottom: 1rem;
}

Footer-Sitemap-Menü

// index.html

<footer class="footer-wrap">
  <nav class="sitemap">
    <div class="sitemap-item">
      <strong class="sitemap-title text-white">Kontakt</strong>
      <ul class="sitemap-list">
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">b4um</a>
        </li>
        <li class="sitemap-list-item">
          <a href="tel:+492212828288" class="sitemap-list-link"
            >+49 221 2828288</a
          >
        </li>
      </ul>
    </div>
    <div class="sitemap-item">
      <strong class="sitemap-title text-white">Südsee</strong>
      <ul class="sitemap-list">
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Fiji</a>
        </li>
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Neukaledonien</a>
        </li>
      </ul>
    </div>

    <div class="sitemap-item">
      <strong class="sitemap-title text-white"
        >Französisch Polynesien</strong
      >
      <ul class="sitemap-list">
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Fiji</a>
        </li>
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Neukaledonien</a>
        </li>
      </ul>
    </div>

    <div class="sitemap-item">
      <strong class="sitemap-title text-white">Inselparadiese</strong>
      <ul class="sitemap-list">
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Fiji</a>
        </li>
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Neukaledonien</a>
        </li>
      </ul>
    </div>

    <div class="sitemap-item">
      <strong class="sitemap-title text-white">Kreuzfahrten</strong>
      <ul class="sitemap-list" role="menu">
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Fiji</a>
        </li>
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Neukaledonien</a>
        </li>
      </ul>
    </div>

    <div class="sitemap-item">
      <strong class="sitemap-title text-white"
        >Dorothee`s Flug-Service</strong
      >
      <ul class="sitemap-list">
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Fiji</a>
        </li>
        <li class="sitemap-list-item">
          <a href="#" class="sitemap-list-link">Neukaledonien</a>
        </li>
      </ul>
    </div>
  </nav>
</footer>

Das ist der HTML-Code für ein Footer-Sitemap-Menü. Es enthält verschiedene Abschnitte mit Links zu verschiedenen Bereichen der Website, darunter Kontaktinformationen, verschiedene Reiseziele und Dienstleistungen. Jeder Abschnitt hat einen Titel und eine Liste von Links.

// assets/style.css

footer {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 2rem auto 0;
  height: 100%;
  background-color: #0d0d0d;
  color: white;
  bottom: 0;
  padding: 1rem;
}

.footer-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1248px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.sitemap {
  width: 100%;
}

.sitemap-title {
  position: relative;
  border-top: 0.0625rem solid #eee;
  cursor: pointer;
  display: block;
  font-size: 1.125rem;
  padding: 0.625rem 0;
}
.sitemap-title:after {
  content: ">";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  display: inline-block;
  font-family: symbole;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  margin-right: 0.2em;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  width: 1em;
  position: absolute;
  right: 0;
  top: 0.625rem;
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.text-white {
  color: white;
}

.sitemap-list {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.35s;
  transition: max-height 0.35s;
  list-style: none;
}

.sitemap-title-active + .sitemap-list {
  max-height: 37.5rem;
}

.sitemap-list-item:last-child {
  margin-bottom: 0.625rem;
}

.sitemap-list-link {
  display: block;
  padding: 0.3125rem 0;
  -webkit-transition: color 0.35s;
  transition: color 0.35s;
  color: white;
}

.sitemap-list-link:after {
  content: ">";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  margin-right: 0.2em;
  position: relative;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  width: 1em;
  top: 0.0625rem;
  opacity: 0;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: transform 0.35s, opacity 0.35s;
}

.sitemap-list-link:hover,
.sitemap-list-link.active,
.sitemap-list-link.nav-link.is-active {
  color: #009fe3;
}

.sitemap-list-link:hover:after {
  opacity: 1;
  -webkit-transform: translateX(0.3125rem);
  transform: translateX(0.3125rem);
}

Dieser CSS-Code definiert das Styling für das Footer-Sitemap-Menü. Hier sind einige der wichtigsten Stileigenschaften:

- Der Footer wird am unteren Rand der Seite positioniert und hat eine Hintergrundfarbe von #0d0d0d sowie weißen Text.
- Das Sitemap-Menü ist in eine Wrapper-Div namens ".footer-wrap" eingebettet, die eine maximale Breite hat und zentriert ist.
- Jeder Sitemap-Titel hat einen hover-Effekt, der ein ">"-Symbol am Ende des Titels anzeigt.
- Die Sitemap-Liste ist standardmäßig ausgeblendet und wird beim Klicken auf den entsprechenden Sitemap-Titel angezeigt.
- Die Sitemap-Liste enthält Links zu verschiedenen Seiten oder Abschnitten der Website.
- Die Links haben einen hover-Effekt, der ihre Farbe ändert und ein ">"-Symbol am Ende des Links anzeigt.

interaktives Sitemap-Menü

Dieser CSS-Code sorgt für ein ansprechendes und interaktives Sitemap-Menü im Footer der Website. Der code ist mobile first, das heisst wir müssen den code noch um ein Mediaquery für den Desktop erstellen.

// assets/style.css

@media (min-width: 1248px) {
  .sitemap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .sitemap-item {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    margin-bottom: 1.25rem;
    page-break-inside: avoid;
    width: 100%;
  }

  .sitemap-title {
    border: 0;
    cursor: default;
    margin-bottom: 0.625rem;
    padding: 0;
    border-bottom: 0.0625rem solid #eee;
    font-size: 1rem;
    padding-bottom: 0.9375rem;
  }
  .sitemap-title:after {
    display: none;
  }
  .sitemap-list {
    display: block;
    max-height: 100%;
    overflow: visible;
  }
  .sitemap-title-active + .sitemap-list {
    max-height: 100%;
  }
}

Dieser CSS-Code definiert das Styling für das Footer-Sitemap-Menü bei Bildschirmbreiten von mindestens 1248px. Hier sind die wichtigsten Anpassungen:

- Das Sitemap-Menü wird als Flexbox angezeigt und die einzelnen Sitemap-Elemente werden zwischen den verfügbaren horizontalen Platz gleichmäßig verteilt.
- Die Sitemap-Elemente werden so gestaltet, dass sie nicht innerhalb einer Spalte umbrochen werden, und haben einen Abstand von 1.25rem zwischen den Elementen.
- Die Sitemap-Titel haben keine Unterstrichene und keine hover-Effekte mehr, sondern haben einen einheitlichen Stil.
- Das ">"-Symbol nach den Sitemap-Titeln wird ausgeblendet.
- Die Sitemap-Listen haben keine maximale Höhe mehr und werden bei Bedarf erweitert.

Diese Anpassungen sorgen dafür, dass das Footer-Sitemap-Menü auf größeren Bildschirmen übersichtlich und benutzerfreundlich bleibt.

Mobile Javascript code

Mobile kann noch nicht genutzt werden, das ändern wir jetzt mit einem JavaScript code.

// assets/scripts.js

// Definiere die Funktion Sitemap
var Sitemap = function () {
  // Wähle alle Elemente mit der Klasse ".sitemap-title" aus und füge jedem ein Klickereignis hinzu
  [].forEach.call(
    document.querySelectorAll(".sitemap-title"),
    function (titleElement) {
      titleElement.addEventListener("click", function (event) {
        // Verhindere das Standardverhalten des Klicks
        event.preventDefault();
        // Das Ziel des Klicks ist das angeklickte Element
        var targetElement = event.target;
        // Überprüfe, ob das angeklickte Element bereits die Klasse "sitemap-title-active" hat
        if (targetElement.classList.contains("sitemap-title-active")) {
          // Wenn ja, entferne die Klasse
          targetElement.classList.remove("sitemap-title-active");
        } else {
          // Wenn nicht, füge die Klasse hinzu
          targetElement.classList.add("sitemap-title-active");
        }
      });
    }
  );

  // Wähle erneut alle Elemente mit der Klasse ".sitemap-title" aus und speichere sie in der Variablen "titles"
  var titles = document.querySelectorAll(".sitemap-title");

  // Füge dem Fenster ein Resize-Ereignis hinzu
  window.addEventListener("resize", function () {
    // Iteriere über alle Elemente in "titles"
    for (var i = 0; i < titles.length; i++) {
      // Entferne die Klasse "sitemap-title-active" von jedem Element
      titles[i].classList.remove("sitemap-title-active");
    }
  });
};

// Rufe die Funktion Sitemap auf
Sitemap();

Dieser JavaScript-Code definiert eine Funktion namens "Sitemap", die das Verhalten des Footer-Sitemap-Menüs steuert. Hier sind die Hauptfunktionen:

- Die Funktion verwendet `document.querySelectorAll`, um alle Elemente mit der Klasse "sitemap-title" zu finden, die die Sitemap-Titel repräsentieren.
- Ein Klickereignis wird jedem dieser Elemente hinzugefügt. Beim Klicken wird überprüft, ob das Element bereits die Klasse "sitemap-title-active" hat. Wenn ja, wird sie entfernt, andernfalls wird sie hinzugefügt. Dies steuert, ob die zugehörige Sitemap-Liste angezeigt oder verborgen wird.
- Ein weiteres Ereignis wird hinzugefügt, das auf das Fenster-Resize-Ereignis reagiert. Wenn das Fenster neu dimensioniert wird, werden alle Sitemap-Titel deaktiviert, um sicherzustellen, dass keine Sitemap-Liste offen bleibt.

Insgesamt sorgt dieser JavaScript-Code dafür, dass das Footer-Sitemap-Menü interaktiv und benutzerfreundlich ist, indem es die Sitemap-Liste bei Bedarf anzeigt oder ausblendet und sicherstellt, dass alle Listen geschlossen sind, wenn das Fenster neu dimensioniert wird.

1.mp4 16.9 MB

Meld dich an und schreibe ein Kommentar