In diesem Artikel wird aus der Basis-Navigation ein Klick-Dropdown horizontal…
Der Weg zumKlick Dropdown horizontal:
Der Klick-Dropdown horizontal verbaut den Navigationsbereich wieder in den header-Bereich.
<header> <!-- Anfang vom header-Element -->
<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 -->
</header> <!-- Ende vom header-Element -->HTML Quelltext für die Startseite:
<!DOCTYPE html>
<html>
<head>
<title>Flex2 Klick Dropdown horizontal</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
<meta charset="UTF-8">
<meta name="author" content="Torsten Büscher">
<meta name="description" content="Webdesign Workshop">
<meta name="keywords" content="Webdesign, Weiterbildung, Selbststudium">
</head>
<body>
<div id="wrapper"> <!-- Anfang vom wrapper-Bereich -->
<header> <!-- Anfang vom header-Element -->
</header> <!-- Ende vom header-Element -->
<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 -->
<aside>
<article>
Spalte 1
</article>
</aside>
<main>
<article>
<h1>Überschrift des Artikels:</h1>
<p>
Dies ist das Flex2 Layout mit Klick Dropdown horizontal.
</p>
</article>
<br />
</main> <!-- Ende vom main-Element -->
<footer> <!-- Anfang vom footer-Element -->
</footer> <!-- Ende vom footer-Element -->
</div> <!-- Ende vom wrapper-Bereich -->
</body>
</html>HTML Quelltext für die Archivseite:
<!DOCTYPE html>
<html>
<head>
<title>Flex2 Klick Dropdown vertikal</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
<meta charset="UTF-8">
<meta name="author" content="Torsten Büscher">
<meta name="description" content="Webdesign Workshop">
<meta name="keywords" content="Webdesign, Weiterbildung, Selbststudium">
</head>
<body>
<div id="wrapper"> <!-- Anfang vom wrapper-Bereich -->
<header> <!-- Anfang vom header-Element -->
</header> <!-- Ende vom header-Element -->
<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 -->
<aside>
<article>
Spalte 1
</article>
</aside>
<main>