HAMBURGER CSS

[tilda]

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

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

CSS

.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

[dazzle89]

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.

[tilda]

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

[tilda]

Ich habe nun eine svg Datei als

.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

[dazzle89]

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

In deinem Fall fehlt die Definition der Höhe.

[tilda]

Jetzt hat es geklappt - Danke schön!

[Znrl]

Es gibt natürlich auch Möglichkeiten ohne Grafik

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

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

 ≡ (Sonderzeichen "identisch mit")

Bzw. per CSS "gezeichnet".