Responsive / Hamburger Menü? Möglichst ohne Plugin

clark

Ich suche nach einer Lösung für ein Responsive Menü (Hamburger), so dass ich in der Mobile-Ansicht oben rechts den Hamburger sehe und dann das Menü entweder von links eingeflogen kommt oder sich nach unten hin aufklappt.
Das ganze mag ich nicht mit einem Plugin umsetzen, weil mir die Plugins wahrscheinlich nicht die Anpassungsmöglichkeit bieten und außerdem die WP-Installation aufblähen.

Lieber schreibe ich das in die header.php und lasse Javascript laden und kann in der CSS selbst tätig werden.

Welche Ideen + Vorschläge habt ihr? Gibt es Ressourcen, die hier teils fertige Codes bereitstellen, die man sich anpassen kann?

Besten Dank!!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Designer Talk

Moin...

Du könntest dich hier mal umsehen ob etwas passendes für dich dabei ist. https://www.jqueryscript.net/plus/search.ph…yword=hamburger

maxe

Du brauchst dir doch nur im Header um das Menü einen Span anlegen mit einer ID

HTML

<span id="hamburger_menu">
  <a id="hamburger_button">Hambuger Icon</a>
 <?php wp_nav_menu(...); ?>
</span>

und diese stylest du dann via CSS über MediaQueries

CSS

#hamburger_button{display:none;}
@media all and (max-width:860px){
  #hamburger_menu{
  display:block;
  position:fixed !important;
  width:100%;
  height: 50px;
  top: 0;
  left: 0;
  z-index: 999999;
  }
  #hamburger_button{
  display:block;
  padding-left:10px;
  position:relative;
  box-sizing:border-box;
  text-decoration:none;
  cursor:pointer;
  }
}

Alles anzeigen

Nur mal auf die schnelle, aber irgendwie so sollte es gehen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Responsive / Hamburger Menü? Möglichst ohne Plugin

Jetzt mitmachen!