Menü-HowTo

Beachte: Das Menü links besteht aus einer Liste. In jeder HTML-Datei des Projektes muss dieser Navigationsbereich als eigener Teil der HTML-Datei stehen. Vgl. hierzu den Quellcode unter <div id="nav">

Jede HTML-Datei mit einem Menü besteht aus den drei Bereichen

Navigation mit dem Menü
Inhalt (!)
Fußzeile

Menü und Fußzeile sind in allen HTML-Dateien nahezu identisch, der einzige Unterschied der HTML-Dateien besteht im Inhalt, z. B. dem Gedicht von Christian Morgenstern. Der Navigationsbereich im Quellcode:

<div id="nav">
<ul>

<li><a href="css_beispiel.html" target="_blank">CSS-Beispielseite</a>
</li>

<li><a href="css_tabellen_beispiel.html" target="_blank">CSS-Seite zu Tabellen</a>
</li>

<li><a href="vmenue_start.html">Vertikales Menü</a>
</li>

<li><a href="vmenue_css_beispiel.html">CSS-Beispielseite</a>
</li>

<li><a href="vmenue_css_tabelle.html">CSS-Seite zu Tabellen</a>
</li>

<li><a href="index.html">Home</a>
</li>

</ul>
</div>

Die Liste (→ <ul>-Tag) enthält die Links, und diese Liste finden wir in allen HTML-Dateien, die das Menü enthalten. Wichtig: Die id=nav enthält den Selektor, in der CSS-Datei style_div.css wird dann die Regel für die Navigation ausgewählt. Da wir in der Navigation Listen und Links verwenden, müssen wir in der CSS-Datei für die Navigation dann Regeln für die Verwendung von Listen & Links vereinbaren. Beispiel:

#nav ul {
    list-style: none; /* Liste OHNE Kreise */
    position: fixed; /* nav-Bereich bleibt fix! */
    top: 0;  /* Liste beginnt oben */
    margin: 0px;  /* Abstand aussen */
    padding: 2px 2px;  
    height:100%; /* nav-Bereich geht bis unten! */
    overflow: auto; 
    background-color: #333;
    color:  #000000; 
}

Beachte zur Erläuterung die Kommentare in der Regel zum nav-Selektor. (→ /* Dieser Text wird überlesen! */ ist ein Kommentar in einer CSS-Datei).