Hamburger-Menü-Icons (Drei-Strich-Menü-Icon / Navicon) Verschiedene Arten

Ein universelles Symbol für „Menü“ beschäftigt in letzter Zeit viele Leute. („Navicon“, verstehst du?!). Jordan Moore hat einen ausführlichen Artikel darüber für Smashing Magazine geschrieben. Jeremy Keith hat darüber geschrieben. Stuart Robson hat darüber geschrieben. Tim Kadlec hat darüber geschrieben. Wenn du mehr über das Denken hinter diesen Dingen lesen und Beispiele sehen möchtest, lies diese.

In diesem Artikel werde ich mich auf das „Drei-Strich“-Symbol konzentrieren (im Gegensatz zu Abwärtspfeilen oder anderen möglichen Navicons). Ich mag das Drei-Strich-Symbol als Symbol für Menüs sehr. Wenn wir eines auswählen müssen, bin ich ganz dafür.

Wir werden uns ansehen, wie man dieses Symbol auf verschiedene Arten erstellen kann.

Bild verwenden

Wie haben wir Symbole auf Websites eingefügt… für immer? Bilder. Daran ist nichts falsch. Dieses Bild ist so einfach, dass es nach SVG schreit. SVG bedeutet, dass es 1) eine super kleine Dateigröße hat und 2) sich gestochen scharf auf jede Größe skalieren lässt. Der HTML-Code wäre wahrscheinlich

<a href="#menu">
  <img src="menu.svg" alt="">
  Menu
</a>

Wenn du das Symbol ohne Text verwenden möchtest, achte darauf, den `alt`-Text einzufügen. Du könntest auch ein PNG oder etwas anderes verwenden, aber SVG ist perfekt für diese Art von einfacher Zeichnung.

Pseudo-Element verwenden

Es ist nichts falsch daran, ein Element zu verwenden, aber wenn wir ein Pseudo-Element und etwas Trickserei verwenden, könnten wir dieses Symbol ohne den zusätzlichen HTTP-Request erstellen, den ein Bild benötigt. (Ja, es könnte in deinem Sprite sein, aber du weißt, was ich meine).

Pseudo `box-shadow`

Nichts als semantische Markup-Elemente

<a href="#menu" class="box-shadow-menu">
  Menu
</a>

In CSS, mache etwas Platz links vom Link mit etwas `padding-left`. Setze den Positionierungskontext mit relativer Positionierung. Dann erstelle eine einzelne schwarze Linie, die absolut in diesem Bereich oben links positioniert ist. Dann verwende `box-shadow`, um zwei weitere Linien darunter zu erstellen.

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

Pseudo-Verlauf

Gleiches Markup wie beim obigen. Die gleiche Idee, einen Bereich für das Pseudo-Element zu schaffen. Nur dieses Mal werden Verläufe verwendet, um die drei Linien zu erstellen. Denke daran, dass Verläufe nicht unbedingt von einer Farbe zur anderen übergehen müssen, wenn du „harte Stopps“ verwendest, bei denen die Farbe an derselben Farbunterbrechung sofort in eine andere wechselt.

.gradient-menu {
  padding-left: 1.25em;
  position: relative;
}
.gradient-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.21em;
  bottom: 0.21em;
  width: 1em;
  background: linear-gradient(
    to bottom, 
    black, black 20%, 
    white 20%, white 40%, 
    black 40%, black 60%, 
    white 60%, white 80%, 
    black 80%, black 100%
  );
}

Pseudo-Rand

Credit an Mr. Robson für diese hier. Er hat sie erstellt, indem er dem Pseudo-Element einen doppelten und einen einfachen durchgehenden Rand zugewiesen hat. Er verwendete auch Pixelwerte in seiner Demo. Tim Kadlec hat sie in em umgerechnet, damit sie mit dem Text skalieren, was gut ist.

.border-menu {
  position: relative;
  padding-left: 1.25em;
}
.border-menu:before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 1em;
  height: 0.125em;
  border-top: 0.375em double #000;
  border-bottom: 0.125em solid #000;
}

Schriftarten verwenden

Es gibt ein Unicode-Symbol mit drei Strichen darin.

<a href="#menu">
  &#9776; Menu
</a>

Man könnte denken, das wäre perfekt, aber in Wirklichkeit ist es ziemlich verschwommen. Sieht auf meinem Retina-Display gut aus, aber auf nicht-Retina-Geräten ziemlich schlecht. So etwas sollte überall so scharf wie möglich sein.

Du könntest natürlich auch eine Icon-Schriftart verwenden. Entypo hat dieses Symbol in seinem kostenlosen Set. Die Linien sind abgerundet, was mir gut gefällt. Pictos hat eines mit Punkt-Strich Punkt-Strich Punkt-Strich, was auch gut ist.

Ich hatte bisher keine großen Probleme mit Icon-Schriftarten, die verschwommen sind, wie dieses Unicode-Symbol. Ich habe keine Ahnung, warum das so ist, aber so ist das Leben.

Update: Leser G S schreibt

Bezüglich des Artikels https://css-tricks.de/three-line-menu-navicon/, ein älteres Nokia-Handy mit Opera 12 kann das Unicode-Zeichen für ‘IDENTICAL TO’ (U+2261) anzeigen, aber nicht das TRIGRAM FOR HEAVEN’ (U+2630).

Es scheint, dass ein mathematischer Operator in Schriftarten eher implementiert wird als ein I Ging-Symbol.

Welches ist das Beste?

Ich würde das Unicode-Symbol wahrscheinlich vermeiden, da es nicht die korrekte semantische Bedeutung hat. Ich würde wahrscheinlich davon absehen, einen HTTP-Request für ein Bild nur dafür zu machen. Die Verlaufsoption ist gut, aber es ist ein ziemlicher Code-Block, der gepflegt werden muss.

Ich würde wahrscheinlich auf Inline-SVG setzen.