Benutzer Diskussion:MScharwies/menüs

Hinweis:

Eine Diskussionsseite dient dazu, Änderungen am Artikel zu besprechen. Allerdings werden diese Seiten in unserem Wiki erfahrungsgemäß nur von sehr wenigen Leuten besucht.

• Deshalb sollten Diskussionen über den Artikel zum Thema „menüs“ besser im SELFHTML-Forum geführt werden.
• Unter https://forum.selfhtml.org/self/new kannst du einen entsprechenden Beitrag erstellen.
• Bitte hinterlasse einen entsprechenden Link auf dieser Diskussionsseite, wenn du einen Thread im Forum eröffnet hast.

Hervorheben der aktuellen Seite

Oft möchte man den aktuellen Menüpunkt hervorgehoben haben. Dazu gibt es von schlecht nach gut folgende Möglichkeiten

---

<nav>
  <ul>
    <li><a href="...">Seite 1</a></li>
    <li class="aktuell"><a href="...">Seite 2</a></li>
    <li><a href="...">Seite 3</a></li>
  </ul>
</nav>

Schlecht, weil auf die aktelle Seite verlinkt wird und die Klasse nicht benötigt wird.

---

<nav>
  <ul>
    <li><a href="...">Seite 1</a></li>
    <li><span>Seite 2</span></li>
    <li><a href="...">Seite 3</a></li>
  </ul>
</nav>

Schlecht wegen des Span-Elementes. Gut wegen klarer CSS-Struktur:

nav span

ist die Ansicht für das eine aktuelle Element,

nav a

ist die Ansicht für die Vielzahl der anderen Links.

---

<nav>
  <ul>
    <li><a href="...">Seite 1</a></li>
    <li><a>Seite 2</a></li>
    <li><a href="...">Seite 3</a></li>
  </ul>
</nav>

Gut aus Programmierersicht, schlecht das a ohne href ist kein Link :

nav a

ist die Ansicht für das eine aktuelle Element,

nav a[href]

ist die Ansicht für die Vielzahl der anderen Links.

---

<nav>
  <ul>
    <li><a href="...">Seite 1</a></li>
    <li>Seite 2</li>
    <li><a href="...">Seite 3</a></li>
  </ul>
</nav>

Optimaler Code, aber unintuitiv für die CSS-Angaben:

nav li

ist die Ansicht für das eine aktuelle Element,

nav a

ist die Ansicht für die Vielzahl der anderen Links.

padding

Es ist übrigens eine gute Idee, innerhalb der Konstruktion

<li>
  <a>

ein oft gewünschstes padding nicht dem li-Element, sondern dem a-Element zu geben und letzerem zusätzlich display: block.

Warum, kannst du selbst erforschen.

-- Matthias (Diskussion) 20:40, 24. Apr. 2014 (CEST) --

Spezifität der Selektoren

Selektoren sollen so spezifisch wie nötig sein.

also etwa

nav a

und nicht

nav ul li a

Ich weiß, dass das oft mühselig sein kann, aber in einem Artikel kann man ja darauf hinweisen.

-- Matthias (Diskussion) 20:43, 24. Apr. 2014 (CEST) --