<nav> innerhalb von <nav> oder doch lieber ul li ul li?

[Jochen]

Guten Morgen,

ich wollte die unten gezeigte Navigation nachbauen. Meine Idee war erst folgende:

<nav>
  <ul>
   <li>Shop</li>
   <li>Staubsauger</li>
   <li>Ventilatoren &amp; Heizlüfter
	<ul>
	  <li>Ventilatoren &amp; Heizlüfter</li>
	  <li>Ventilatoren</li>
	  <li>Heizlüfter</li>
	  <li>Luftbefeuchter</li>
	  <li>Garantieregistrierung</li>
	</ul>
   </li>
   <li>Händetrockner</li>
   <li>Leuchten</li>
   <li>Mein Konto</li>
  </ul>
</nav>

Auf dem Bild unten stehe ich, dass es ein <nav> innerhalb von <nav> gibt, was ist nun richtig um so eine Klappnavigation zu erreichen? Mir kommt es hier auf den Pfeil nach oben an, den würde ich sehr gerne integrieren.

Mein CSS dazu würde ich so aufbauen

nav {
    width: 100%;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    width: 13em;
    display: inline-block;
}

nav ul li:last-child {
    width: 9em;
}

nav ul ul {
    display: none;
}

nav ul li:hover ul {
    display: block;
    left: 27em;
    position: absolute;
    width: 13em;
}

[Matthias Apsel]

Hallo Jochen,

Auf dem Bild unten stehe ich, dass es ein <nav> innerhalb von <nav> gibt, was ist nun richtig um so eine Klappnavigation zu erreichen?

Ein richtiges „richtig“ gibts da nicht ;-) Die Spezifikation verbietet die ineinander geschachtelten nav-Elemente nicht. Meiner Meinung nach hast du eine Navigation.

nav ul ul {
    display: none;
}

display: none; verbirgt die Inhalte komplett, auch vor Screenreadern. Hier sollte man eine alternative Verbergetechnologie verwenden, aber nicht -9999px.

nav ul li:hover ul {

Hier auch an die Tastaturbedienung denken und testen, wie es auf dem Smartphone geht. Aktuelle Betriebssystem simulieren hover bei einem Tap.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

display: none; verbirgt die Inhalte komplett, auch vor Screenreadern. Hier sollte man eine alternative Verbergetechnologie verwenden

Oder ARIA-Attribute richtig setzen.

Aktuelle Betriebssystem simulieren hover bei einem Tap.

Du meinst: manche Betriebssysteme?

iOS 8 tut das nicht. Ist aber auch nicht mehr ganz aktuell. Aber wohl immer noch relevant.

Tut iOS 9 das?

Ich hab immer noch keine Antwort darauf gefunden, ob ich ein iPhone 4S auf iOS 9 upgraden sollte oder nicht …

LLAP 🖖

[Gunnar Bittersmann]

@@Jochen

   <li>Ventilatoren &amp; Heizlüfter
	<ul>
	  <li>Ventilatoren &amp; Heizlüfter</li>
	  <li>Ventilatoren</li>
	  <li>Heizlüfter</li>

Sollten im Menü nicht Links sein?

Und welchen Sinn macht ein Menüpunkt „Ventilatoren & Heizlüfter“ unterhalb eines Menüpunkts „Ventilatoren & Heizlüfter“?

Auf dem Bild unten stehe ich, dass es ein <nav> innerhalb von <nav> gibt, was ist nun richtig um so eine Klappnavigation zu erreichen?

So wie du es hast mit der verschachtelten Liste. nav innerhalb von nav halte ich für Unsinn. Es ist ja ein Navigationsmenü.

Mir kommt es hier auf den Pfeil nach oben an, den würde ich sehr gerne integrieren.

Fürs Aussehen ist es nicht von Belang, welche Elementtypen im Markup verwendet werden.

nav ul li {

Der Selektor ist überspezifiziert. Verwende nav li!

Bist du sicher, dass du alle li innerhalb des Menüs selektieren willst und nicht nur die der 1. Hierarchieebene? nav > ul > li?

nav ul ul {
    display: none;
}

nav ul li:hover ul {
    display: block;

Wie navigieren denn eigentlich Nutzer mit Geräten, die gar kein Hover kennen? Was (je nach Zielgruppe) viele bis die meisten Nutzer betrifft.

LLAP 🖖

[Jochen]

Hallo,

Und welchen Sinn macht ein Menüpunkt „Ventilatoren & Heizlüfter“ unterhalb eines Menüpunkts „Ventilatoren & Heizlüfter“?

Kann ich dir nicht sagen. Bin durch einen Nachrichtenbeitrag auf die Webseiten aufmerksam geworden. Der Entwickler / die Verantwortlichen werden sich dabei schon etwas gedacht haben.

So wie du es hast mit der verschachtelten Liste. nav innerhalb von nav halte ich für Unsinn. Es ist ja ein Navigationsmenü.

Ok, dann kann ich mein HTML so lassen

Fürs Aussehen ist es nicht von Belang, welche Elementtypen im Markup verwendet werden.

Kannst du mir vielleicht ein Tipp geben wie ich den Pfeil hinbekomme? Vielleicht ein DIV mit 50x50px und dieses etwas drehen?

nav ul li {

Der Selektor ist überspezifiziert. Verwende nav li!

Heißt es nicht immer eine Webseite so robust wie möglich zu gestalten?

Bist du sicher, dass du alle li innerhalb des Menüs selektieren willst und nicht nur die der 1. Hierarchieebene? nav > ul > li?

Doch, danke für den Hinweis.

Wie navigieren denn eigentlich Nutzer mit Geräten, die gar kein Hover kennen? Was (je nach Zielgruppe) viele bis die meisten Nutzer betrifft.

Darüber habe ich mir noch keine Gedanken gemacht. Wenn wir schon dabei sind, wie sollte ich es umsetzten, dass auch User die mit einem Gerät kommen die kein Hover verstehen die Navigation aufgeklappt bekommen?

[MrMurphy1]

Hallo

Wenn wir schon dabei sind, wie sollte ich es umsetzten, dass auch User die mit einem Gerät kommen die kein Hover verstehen die Navigation aufgeklappt bekommen?

Die benutzerfreundlichste Lösung ist überhaupt kein Aufklappmenü zu verwenden, egal für welchen Bildschirm. Dem steht in der Regel aber die Selbstgefälligkeit des Webseitenerstellers gegenüber, der Aufklappmenüs für eine (seine) Pflicht hält.

So gibt es erstaunlich viele Besucher die Aufklappmenüs überhaupt nicht erkennen. Und zwar unabhängig davon, ob der Webseitenersteller behauptet, dass Aufklappmenüs Allgemeinwissen sind und davon nur "eine Minderheit" betroffen sei.

Dazu kommen noch die Besucher, welche aus technischen Gründen die zumeist fehlerhaften Aufklappmenüs überhaupt nicht verwenden können.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Jochen

Und welchen Sinn macht ein Menüpunkt „Ventilatoren & Heizlüfter“ unterhalb eines Menüpunkts „Ventilatoren & Heizlüfter“?

Der Entwickler / die Verantwortlichen werden sich dabei schon etwas gedacht haben.

Da hege ich Zweifel.

Kannst du mir vielleicht ein Tipp geben wie ich den Pfeil hinbekomme? Vielleicht ein DIV mit 50x50px und dieses etwas drehen?

Kein, kein div, ein Pseudoelement (::before oder ::after). Wegen der Darstellung das Markup mit unsinnigen Elementen vollzumüllen ist keine so gute Idee.

Der Selektor ist überspezifiziert. Verwende nav li!

Heißt es nicht immer eine Webseite so robust wie möglich zu gestalten?

Eben. Deshalb Selektoren nur spezifisch wie nötig und so unspezifisch wie möglich.

Darüber habe ich mir noch keine Gedanken gemacht.

Mobile last ist heutzutage nicht unbedingt ein gutes Konzept.

Wenn wir schon dabei sind, wie sollte ich es umsetzten, dass auch User die mit einem Gerät kommen die kein Hover verstehen die Navigation aufgeklappt bekommen?

Die erste Überlegung wäre, ob die Navigation denn überhaupt zum Ausklappen sein muss.

LLAP 🖖

[Jochen]

Hallo,

Die erste Überlegung wäre, ob die Navigation denn überhaupt zum Ausklappen sein muss.

dieses wurde vom Grafiker so vorgegeben. Da lässt sich auf die Schnelle auch nichts ändern, da der Grafiker bis Januar 2016 nicht mehr zur Verfügung steht und die Seite am 24.12.2015 um 22:00 Uhr online geht.

[marctrix]

Hej Jochen,

Die erste Überlegung wäre, ob die Navigation denn überhaupt zum Ausklappen sein muss.

dieses wurde vom Grafiker so vorgegeben. Da lässt sich auf die Schnelle auch nichts ändern, da der Grafiker bis Januar 2016 nicht mehr zur Verfügung steht und die Seite am 24.12.2015 um 22:00 Uhr online geht.

Wir versuchen hier ja die Vor- und Nachteile diverser Lösungen aufzuzeigen und die technischen Grundlagen zu vermitteln, damit du solche Entscheidungen in Zukunft selber treffen kannst. Für ein konkretes Projekt baue ich persönlich aber selber keine Menüs mehr zusammen. Dass Menüs auf allen Handys, mit Tastatur usw bedienbar werden, bedeutet doch einen erheblichen Aufwand. Dafür würde ich auf fertige Lösungen wie flexnav zurückgreifen.

Das würde ich Dir auch empfehlen, dann können wir uns um den Aspekt der Gestaltung kümmern.

Ein Dreieck lässt sich übrigens sehr aus Rahmen zusammenbauen, die man einem mittels ::before oder ::after erstellten Pseudo-Element mitgibt, Grafiken sind dazu nicht nötig.

Marc

[MrMurphy1]

Hallo

Kannst du mir vielleicht ein Tipp geben wie ich den Pfeil hinbekomme? Vielleicht ein DIV mit 50x50px und dieses etwas drehen?

Welches Element du verwendest ist egal. Du kannst also dein div nehmen, ich habe mal ein Beispiel mit einem h3-Element erstellt.

HTML

<h3 class="bubble">Container mit Pfeil nach oben</h3>

und das CSS

      .bubble {
         background: #fff101;
         display: inline-block;
         position: relative;
         padding: 10px;
         border: 4px solid #F200FF;
         border-radius: 5px;
      }
      .bubble::after,
      .bubble::before {
         bottom: 100%;
         left: 50%;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         border: solid transparent;
      }
      .bubble::after {
         border-bottom-color: #fff101;
         border-width: 30px;
         margin-left: -30px;
      }
      .bubble::before {
         border-bottom-color: #F200FF;
         border-width: 36px;
         margin-left: -36px;
      }

Die Farben kannst du natürlich noch anpassen. Oder die Klasse einfach deinem div zuordnen.

Gruss

MrMurphy