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…