Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 1 - Untermenü

1. Die Abschnitte

2. Die Links

Da es in Schottland Schlösser und Burgen wie Sand am Meer gibt, wollen wir eine Unterteilung unternehmen, um eine gewisse Ordnung in das Chaos zu bringen. Wir untergliedern also in die Schlösser, die ich besucht habe, und die, wo ich nicht gewesen bin. Dafür benutzen wir eine ungeordnete, verschachtelte Liste. Tragt jetzt in der urquhart.htm in das subnavi-Element Folgendes ein. 


<ul>
  <li>
    <a href="#">Besuchte Castles</a>
    <ul>
      <li><a href="#">Braemar Castle</a></li>
      <li><a href="#">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>

3. Listenformatierung

So nun wollen wir mal die Liste formatieren. Da wir zu diesem Zeitpunkt noch nicht wissen, ob auch Listen an anderer Stelle verwendet werden, gehen wir genauso vor wie bei den Links im Hauptmenü. Wir definieren in der styles.css folgende Selektoren. 


.subnavi ul
{

}
.subnavi li
{

}
.subnavi li li
{

}

Als erstes fällt auf, dass die Liste je nach Browser einen anderen Abstand nach oben hat. Das korrigieren wir hiermit. 


.subnavi ul
{
  margin-top: 0px;
}

Danach möchten wir die Aufzählungszeichen loswerden. 


.subnavi ul
{
  margin-top: 0px;
  list-style-type: none;
}

Nun kümmern wir uns um dieses verfluchte Einrücken der Liste und ergänzen .subnavi li um folgendes: 


margin-left: -40px;

Leider gibt es jetzt keine optische Unterscheidung mehr zwischen den Hauptpunkten und deren Unterpunkte. Dieses Manko kann man folgendermaßen beseitigen. 


.subnavi li li
{
  margin-left: -30px;
}

Jetzt werdet ihr sicher auch die Bedeutung des Selektors .subnavi li li verstehen. Die Eigenschaft bezieht sich nur auf zusätzlich verschachtelte Listenelemente.

4. Linkformatierung

Jetzt kümmern wir uns um die Links, analog zu dem, was wir beim Hauptmenü gemacht haben. Dafür definieren wir folgendes Element. 


.subnavi a
{

}

Da das Wetter in Schottland meistens sehr bescheiden ist, wählen wir einen grauen Hintergrund mit schwarzer Schrift aus. Gleichzeitig legen wir einen akzeptablen Innenabstand fest. 


.subnavi a
{
  background-color: #eee;
  color: #000;
  padding: 5px 10px 5px 20px;
}

Und nun ... na? schaut euch doch mal dieses Durcheinander an. Da fehlt doch noch was, Stichwort Elementtypen. Genaaaaaau, wir müssen das a-Tag in ein Block-Element umwandeln. 


display: block;

Zur besseren optischen Trennung weisen wir dem .subnavi a noch einen unteren Rahmen zu. 


border-bottom: 1px solid #fff;

Wagen wir uns jetzt an den RollOver-Effekt, diesmal aber mit einer kleinen Besonderheit, wir wollen ein kleines Bildchen, sozusagen einen Marker einbauen. Zuerst erledigen wir das Leichte, die Farbänderung, diesmal nur für den Hintergrund. 


.subnavi a:hover
{
  background-color: #DDE8F3;
}

So nun bauen wir das Bild ein, unterbinden das Kacheln und setzen eine Position fest. 


background-image: url(pics/menue/marker.gif);
background-repeat: no-repeat;
background-position: 6px 6px;

Hübsch, nicht? Wem es nicht gefällt, dem sei gesagt, ich bin Programmierer und kein Designer. Für so was habe ich normalerweise meine Leute. Zum Schluss legen wir wie im Hauptmenü noch eine Klasse für den aktiven Button fest, also subnavi a:hover kopieren, einfügen, umbenennen, 


.subnavi .aktiv
{
  background-color: #DDE8F3;
  background-image: url(pics/menue/marker.gif);
  background-repeat: no-repeat;
  background-position: 6px 6px;
}

und dem Link zum aktuellen Castle zuweisen. 


<a href="#" class="aktiv">Urquhart Castle</a>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt