HTML / CSS - Praxistutorial 2 - Untermenü
1. Die Abschnitte
2. Aufbau
Der Einfachheit halber nehmen wir für unser Untermenü den Code aus dem ersten Tutorial, dass wir unterhalb des
<div class="mainnavi"> einbauen und ein wenig modifizieren (class="aktiv" beim Link
"Besuchte Schlösser"):
<div class="subnavi">
<ul>
<li>
<a href="#" class="aktiv">Besuchte Schlösser</a>
<ul>
<li><a href="#">Braemar Castle</a></li>
<li><a href="#" class="aktiv">Urquhart Castle</a></li>
<li><a href="#">Edinburgh Castle</a></li>
<li><a href="#">Eilean Donan Castle</a></li>
<li><a href="#">Inverness Castle</a></li>
<li><a href="#">Dunvegan Castle</a></li>
</ul>
</li>
<li><a href="#">Muss ich noch hin</a></li>
</ul>
</div>
3. Positionierung des Untermenüs
Das wollen wir diesmal unterhalb des hellblauen Balkens im Hauptmenü platzieren. Legt also den Außenabstand des
subnavi-Divs in der rahmen.css auf 40 Pixel fest und die Breite auf 200px.
div.subnavi
{
width: 200px;
margin-left: 40px;
}
Da wir aber rechts noch ein <div>-Element unterbringen wollen, müssen wir wie gehabt unsere
subnavi aus dem Fluss nehmen.
div.subnavi
{
width: 200px;
margin-left: 40px;
float: left;
}
4. Die Links
Diesmal werden wir an Stelle dieses komischen Bildes aus dem ersten Tutorial mit schönen dicken Rahmen arbeiten. Die
Idee dazu stammt von meiner ehemaligen Designer-Kollegin (hallo Christina). Also tragt mal folgende Anweisung in eure links.css
ein.
div.subnavi li a
{
color: #fff;
background-color: #5671b1;
font-size: 0.85em;
padding: 3px 20px 4px 20px;
display: block;
margin-top: 1px;
border-left: 20px solid #002274;
width: 120px;
}
Erläuterung
Wie schon angekündigt, arbeiten wir diesmal bei der Auszeichnung der Links mit dicken Kästen von 20 Pixeln Breite.
Daher die entsprechende Anweisung bei border-left. Das erklärt auch gleichzeitig die Abstände nach oben
(3px) und unten (4px) beim padding, natürlich nicht bei zweizeiligen Links.
Warum kein border-top?
Nun ganz einfach. Probiert es in den verschiedenen Browsern aus. Arbeitet auch ruhig mal mit einem border-top: 10px
anstelle des margin-top. Dann werdet ihr auch sehen, warum es damit Probleme gibt. Details dazu findet ihr
hier.
5. Rollover-Effekt
Da ändern wir nur die Hintergrundfarbe und bauen zusätzlich einen rechten Kasten (border) ein (links.css):
div.subnavi li a.aktiv
{
border-right: 20px solid #789bec;
background-color: #002274;
}
div.subnavi li a:hover
{
border-right: 20px solid #789bec;
background-color: #002274;
}
7. Einrücken der Unterpunkte
div.subnavi ul ul li a
{
width: 100px;
margin-left: 20px;
}
Erläuterung
Über die Angabe der Verschachtelungstiefe (ul ul li) steuern wir die Unterpunkte mit den besuchten Schlössern
an, und rücken diese um 20 Pixel nach rechts ein. Darum müssen wir auch die Breite entsprechend anpassen, da wir beim
"Hovern" ja noch zusätzlich 20 Pixel benötigen. Und das geschieht natürlich in der links.css.
Ein Hinweis
Anstelle des ul ul li a kann man auch ein ul ul a oder ein li li a nehmen. Wichtig ist nur, dass
man den Link ansteuert und nicht den Listenpunkt li. Warum? Probiert es aus.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt