Simple SVG Hamburger Icon CSS Klasse

Ab und zu kommt es vor, dass gerade kein Icon-Set oder gar eine Icon-Font zur Hand ist. In manchen Fällen wäre dies auch einfach overkill. Zum Beispiel dann, wenn eine Website überarbeitet wird, die ursprünglich nicht responsive war und eh keine Icons beinhaltet. Oder eben wenn eine neue Website erstellt wird, die sonst keine weiteren Icons benötigt.

Dann, und immer dann stelle ich mir die Frage, wie oder woher ich nun möglichst schnell ein Hamburger Icon – das Icon, welches gern für den „Menü-anzeigen/ausblenden-Button“ verwendet wird – bekomme, welches ich anschließend in die Website einbauen kann. Ohne jetzt großartig Photoshop oder Illustrator öffnen zu müssen.

Hier gehts zur Demo.

In einer freien Minute ein wenig nachgedacht und recherchiert, kam mir die Idee, mein Anliegen mit einer wiederverwendbaren SVG-Grafik zu erfüllen. Diese könnte im Projektordner abgelegt, farblich angepasst, und später im Dokument verlinkt werden. Ist mir aber zu unflexibel. Außerdem geht ein unnötiger Server-Request fürs Heranziehen der Grafik ins Land. Eine andere Möglichkeit: Die Grafik mittels <svg> direkt ins HTML einsetzen. Ist mir auch noch zu umständlich, außerdem nicht besonders schön. Farbwerte und Größenangaben im HTML-Code, das schickt sich nicht.

Meine Lösung: Eine CSS Klasse, die mittels data:image/svg+xml;utf8 eine SVG-Grafik als background-image setzt. So gesehen ein Einzeiler. Mit etwas mehr Drumherum lässt sich das Ganze dann, ähnlich wie ein Font Awesome Icon,  bzw. wie ein Icon Font Icon, in die Website einsetzen.

<button class="btn" type="button">
	<span class="hamburger"></span>
</button>

Und so sieht das CSS für das Burger Icon aus:

.hamburger {
	display: inline-block;
	width: 1.28571429em;
	font-size: inherit;
	line-height: 1;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(0, 0, 0)"><rect y="0" width="100%" height="20%" rx="5%" ry="5%" /><rect y="40%" width="100%" height="20%" rx="5%" ry="5%" /><rect y="80%" width="100%" height="20%" rx="5%" ry="5%" /></svg>') center / 80% 80% no-repeat;
}
.hamburger:before {
	content: "\000A0";
}

Das Bisschen ist wohl zu verkraften oder?! Und das Beste ist: fill="rgb(0, 0, 0)" bestimmt die Farbe der drei angezeigten Bars. Diese Angabe kann auch in rgba() geändert werden, um halbtransparente Bars zu erzeugen. Auf die Angabe von Hex-Farbwerten sollte verzichtet werden (#CC0033), Firefox macht da Probleme, wenn die Raute nicht vorher URL-konform escaped wird. Am Besten einfach die gewünschten RGB-Farbwerte (+ Alphakanal 0.0–1) einsetzen und schon erscheint das Icon in der gewünschten Farbe.

Hier gehts zur Demo.

Das Ganze kann natürlich noch beliebig erweitert werden, bspw. um :hover und :focus Status, aber das bleibt jedem selbst überlassen. Vielleicht hat ja jemand eine Idee, wie sich die Icon Farbe automatisch an die Schriftfarbe anpassen lässt. Gern mir Bescheid geben!

Nachtrag: Gibts das nicht auch als Schriftzeichen?

Ja, das Hamburger Icon, oder auch Navicon, gibt es auch als Unicode Zeichen. Sogar in zwei Varianten.

  • &#9776;
  • &#8801;

Grundsätzlich würde ich auch die Variante &#9776; präferieren. Einfacher gehts ja quasi kaum. Leider ist das Zeichen aber noch nicht ausreichend verbreitet. Auf meinem Android Smartphone beispielsweise, gerade mal ein Jahr alt, wird lediglich ein leeres Kästchen angezeigt. So ist das nicht verwendbar. Das &#8801; oder auch &equiv; Zeichen ist weiter verbreitet, allerdings handelt es sich hier um ein mathematisches Zeichen, welches sich zudem mittels CSS nicht besonders angenehm ausrichten lässt.

Dann nehme ich vorerst lieber die SVG Variante und wir unterhalten uns in zwei Jahren noch einmal.


Kommentare

Keine Kommentare vorhanden.