HAMBURGER CSS

Hallo Zusammen,

ich möchte dem mobilen Menü per CSS ein Icon hinzufügen.
Dieses klassische Hamburger Icon mit den 3 Linien.

Wie kann ich das am besten machen?
Bisher habe ich den Hamburger mit "OPEN" und "CLOSE" bezeichnet.

Trigger

HTML-Code:

---

<a href="#mobilemenu" class="hamburger">
  <span class="mobile-nav-close">CLOSE</span>
  <span class="mobile-nav-open">OPEN</span>
</a>

---

CSS

HTML-Code:

---

.hamburger {
  border:1px solid #294389;
  display: block;
  margin-top:20px;
  margin-left: 190px;
  margin-bottom: 20px;
  font-size: 1rem;
  padding: 0.4rem;
  text-align: center;
 }


.mobile-nav-close {
  display: none;
}

.mobile-nav-open {
  display: block;
}
.mm-opened .mobile-nav-close {
  display: block;
}
.mm-opened .mobile-nav-open {
  display: none;
}

---

Beste Grüße
Tilda

Und woran genau scheiterst du?

Ich setze das Icon immer als Hintergrundgrafik um. Am besten als svg, da findest du viele im Internet.

Das triggern würde ich mit Javascript/jQuery machen. Sobald der Link angeklickt wird, änderst du einfach die Klasse und darüber kannst du die Navigation stylen.

Am besten fährst du aber eventuell, indem du fertige Scripts verwendest wie z.B. slicknav oder pushy.

Ach ich dachte, das ganze Ding wäre gar kein Bild, sondern alles CSS.
Vertue ich mich da?

Ich habe nun eine svg Datei als

Code:

---

.mobile-nav-open {
  display: block;
  background-image: url("../img/admin/menu.svg");
  background-size:25px 25px;
  }

---

Allerdings wird das Bild nur angezeigt, wenn ich im Trigger noch irgendein Zeichen eingebe.

Was kann denn da das Problem sein?

Beste Grüße
Tilda

Elemente sind so groß wie der Inhalt, sofern man keine Größe angibt.

In deinem Fall fehlt die Definition der Höhe.

Jetzt hat es geklappt - Danke schön!

Es gibt natürlich auch Möglichkeiten ohne Grafik

https://css-tricks.com/three-line-menu-navicon/

http://codepen.io/chriscoyier/pen/fzsqm

Code:

---

≡ (Sonderzeichen "identisch mit")

---

Bzw. per CSS "gezeichnet".