Bei einer Maximalbreite von 600 Pixeln soll der Textbereich die gesamte Breite des Bildschirms/Viewports ausfüllen und die Navigation soll per Dropdown eingeblendet werden…
Navigation x 2:
Bereits im vorherigen Webdesign-Artikel wurden die Grundlagen gelegt. Auf der Webseite werden jetzt einfach zwei Navigationsbereiche eingebaut und an der richtigen Stelle ausgeblendet und eingeblendet.
<header> <!-- Anfang vom header-Element -->
<nav2> <!-- Anfang vom nav-Element -->
<ul>
<li><a href="index.html">Navigation</a>
<ul>
<li><a href="001.html">Seite 1</a></li>
<li><a href="002.html">Seite 2</a></li>
<li><a href="003.html">Seite 3</a></li>
<li><a href="004.html">Seite 4</a></li>
</ul>
</li>
</ul>
</nav2> <!-- Ende vom nav-Element -->
</header> <!-- Ende vom header-Element -->
<nav> <!-- Anfang vom nav-Element -->
<ul>
<li><a href="index.html">Startseite 1</a></li>
<li><a href="index.html">Startseite 2</a></li>
</ul>
</nav> <!-- Ende vom nav-Element -->
<main>
Der zweite Navigationsbereich sitzt hier also im header-Bereich. Nun müssen wir die beiden Navigationen an der richtigen Stelle ausblenden…
Navigation 1 ausblenden:
Die erste Navigation soll ja nur bei der Maximalbreite von 600 Pixel ausgeblendet werden. Es macht also Sinn diese CSS Anweisungen in die Datei “600.css“ zu packen…
nav {
position: absolute;
left: -9999px;
top: -9999px;
…
}Navigation 2 ausblenden:
Die zweite Navigation (die im header) wird in der Datei “06_navibereich.css“ ausgeblendet.
nav2 {
position: absolute;
left: -9999px;
top: -9999px;
}Navigation 2 einblenden:
Die zweite Navigation wird nun in der Datei “600.css“ eingeblendet.
nav2{
position: absolute;
top: 10px;
left: 20px;
}Die Pixelwerte sind natürlich bei Bedarf anzupassen. Allerdings fehlt noch etwas, doch das gibt es erst im nächsten Webdesign-Artikel…