In diesem Artikel wird aus der Basis-Navigation ein Klick-Dropdown vertikal…
Der Weg zum Klick-Dropdown vertikal:
Der “Klick Dropdown vertikal“ erweitert die Tab-Navigation um einen Klick Dropdown.
Der „Trick“ dazu oder dahinter ist recht einfach: Jede Seite des Projekts bekommt eine angepasste individuelle Navigation.
HTML Quelltext der Navigation auf der Startseite:
<nav> <!-- Anfang vom nav-Element -->
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="archiv.html">Archiv</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav> <!-- Ende vom nav-Element -->HTML Quelltext der Navigation auf der Archivseite:
<nav> <!-- Anfang vom nav-Element -->
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="archiv.html">Archiv</a>
<ul>
<li><a href="jahr1.html">Jahr 1</a></li>
<li><a href="jahr2.html">Jahr 2</a></li>
<li><a href="jahr3.html">Jahr 3</a></li>
</ul>
</li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav> <!-- Ende vom nav-Element -->Die Klick Dropdown Navigation basiert also auf einer verschachtelten Liste. Auf CSS-Ebene handelt es sich um eine Tab-Navigation.