Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 1 - Die Hauptnavigation

1. Die Abschnitte

2. Weg mit dem Untermenü

Da wir uns darum erst am Ende kümmern, blenden wir das zunächst mal aus. 


header nav ul div {
  display: none;
}

3. Der Alptraum beginnt

Jetzt wollen wir unsere Hauptnavigation ein wenig "aufhübschen". In diesem Fall benutzen wir dafür das <nav>-Element. Es könnte ebenso auch das <ul> sein, das ist völlig egal. 


header nav {
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #00f;
  background: -webkit-linear-gradient(#0ff, #00f);
  background: linear-gradient(#0ff, #00f);   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#0000ff);
}

Erläuterung

Die ersten drei Zeilen brauche ich wohl kaum erläutern. Konzentrieren wir uns nur auf den Verlauf. Zunächst mal bedarf es einer Vendor-Angabe für den Chrome(*) und Safari, da die nicht mit der originären Anweisung klar kommen. Da bei linear-gradient das Standardverhalten von oben nach unten ist, benötigen wir keine weiteren Angaben, sondern geben einfach nur die Start- und die Endfarbe an.

Da der IE 9 das aber noch nicht beherrscht, muss zusätzlich diese komische filter-Angabe gemacht werden. Und ganz wichtig! Hier dürft ihr auf gar keinen Fall die Kurzschreibweise bei den Farbangaben nehmen, denn sonst rafft dieser Browser das nicht.

* Als ich den CSS-Code fertig hatte, konnte der Chrome tatsächlich nicht damit umgehen. Während des Schreibens dieses Tutorials stellte sich aber heraus, dass die aktuelle Version (28.0) es mittlerweile kann. Btw., welcher Vollhorst ist eigentlich auf diese idiotische Nummerierung gekommen?

4. Weitere Anpassungen

Das habt ihr sicher auch schon tausend Mal gemacht. Damit die Links nebeneinander stehen, werden die <li>s gefloatet. 


header nav > ul > li {
  float: left;
  margin-left: 15px;
  position: relative;
}

Erläuterung

Wer sich fragt, was die > zu bedeuten haben, der sollte sich erst mal über den Kind-Selektor schlau machen. Denn mit header nav > ul > li weisen wir die Anweisungen nur den <li>s zu, bei denen folgende Bedingungen gelten.

  • Alle <li>s müssen direkt unterhalb eines <ul> sein.
  • Dieses <ul> muss direkt unterhalb eines <nav>-Elements sein.
  • Dieses <nav> muss innerhalb eines <header>-Elements liegen.

Also sind von der Anweisung nur die <li>s der Hauptnavigation betroffen, nicht die in den Untermenüs. Wer es nicht glaubt, soll Letztere ruhig mal wieder einblenden.

position: relative

Diese Angabe benötigen wir erst später. Ich hab sie hier deswegen eingebaut, weil ich sie sonst später sicher vergesse. Im Moment spielt sie noch keine Rolle.

Sieht häßlich aus

Stimmt, denn das erste <li> steht viel zu weit rechts. Um das zu korrigieren, reicht folgende Anweisung aus. 


header nav > ul > li:first-child {
  margin-left: 0;
}

Und warum nicht anders herum?

Stimmt, man könnte auch mit einem margin-right und mit last-child arbeiten. Wohl wahr, aber was ist mit dem IE 8? Gut dazu komme ich im nächsten Tutorial, aber das hier ist schon mal ein Hinweis. Wenn man etwas so umsetzen kann, dass es auch der IE 8 versteht, so sollte man das immer machen.

Floaten aufheben

Habt ihr ja auch schon kennengelernt. 


header nav:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

5. Die Links

Hier gibt es bei den folgenden Anweisungen eigentlich nur drei interessante Dinge, auf die ich eingehen werde. 


header nav ul a {    
  margin-left: 23px;
  color: #0ff;
  padding: 5px 10px;
  background: #00f;
  text-align: center;
  width: 80px;
  box-shadow: 0 0 0 1px #003fff, 0 0 0 2px #00a1ff, 0 0 0 3px #0ff;
}

Erläuterung

header nav ul a

Jepp, diesmal arbeiten wir ohne Kind-Selektor, denn die Links in den Untermenüs sollen genau so aussehen.

margin-left: 23px;

Was das soll, werdet ihr erfahren, wenn es um die Ausklappmenüs geht. Denn da wartet ein kleines Schmankerl auf euch. Bis dahin in Geduld ihr euch übt, junge Padawans.

box-shadow

Auch wenn man es nicht so genau erkennen kann, aber hier haben wir einen abgestuften, 3 Pixel dicken Schatten erzeugt. Und zwar einmal komplett herum ohne Unschärfe. Warum? Sag ich gleich.

Und was ist

... mit dem Blockelement? Geduld, kommt später.

Der Hover-Effekt


header nav li a:hover {
  color: #00f;
  background: #0ff;
  box-shadow: 0 0 0 1px #0ff, 0 0 0 2px #00a1ff, 0 0 0 3px #003fff;
}

Und jetzt wichtig

Zoomt mal ruhig in die Seite hinein und achtet genau darauf, wann das :hover greift. Na, gesehen? Erst wenn der Mauszeiger über den Schatten hinaus in den Link kommt. Also merken. box-shadow liegt immer außerhalb(!) eines Elements. Selbst mit einem box-sizing: border-box lässt sich dieses Verhalten nicht beeinflussen. Und das wird uns später beim Ausklappmenü noch ein wenig beschäftigen.

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