Touchscreen optimierte DropDown-Navigation mit jQuery

Umfangreiche Navigationen stellen insbesondere auf großen Touchscreens eine Herausforderung dar. Da Mouse-Over-Effekte nicht funktionieren, werden tiefer liegende Navigationsebenen häufig durch einen Klick auf das unverlinkte Elternelement geöffnet. Wenn ein anderes Elternelement angeklickt wird, soll das zuvor geöffnete Untermenü geschlossen und das neue Menü geöffnet werden. In diesem Beitrag archivieren wir ein Snippet, dass diese Aufgabe erledigt.

Untermenü per Klick öffnen und automatisch schließen, wenn ein anderes Untermenü geöffnet wird

Das Snippet stellt folgende Funktionalität her: Per Klick auf ein Elternelement wird das Untermenü geöffnet. Ein erneuter Klickt schliesst es wieder (Toggle-Funktion). Ist ein Untermenü geöffnet und der Anwender klickt ein weiteres Elternelement an, so schließt sich das zuvor geöffnet Untermenü zunächst. Anschließend wird das Submenu des zuletzt angeklickten Elternelements geöffnet.

Beispiel anschauen

<nav class="site-nav">
  <ul>
    <li class="menu-item-has-children">
      <a href="#">Menüpunkt</a>
      <ul class="sub-menu">
        <li><a href="#">Unterpunkt</a></li>
        <li><a href="#">Unterpunkt</a></li>
      </ul>
    </li>    <!-- weiter nach dem gleichen Muster -->
  </ul>
</nav>
* {
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}

header {
    max-width: 1200px;
    margin: 5em auto;
    transition: all .5s ease-in-out;
    text-align: center;
}

a:hover {
   opacity: .9;
}

.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav > ul {
    display: flex;
}

.site-nav > ul > li {
    position: relative;
    margin: .2em;
    flex: 1;
}

.site-nav a {
    display: block;
    padding: 1em;
    text-decoration: none;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,.5);
    background: darkcyan;
}

.sub-menu {
    display: none;
}

.sub-menu a {
    background: #333;
}
$('.site-nav > ul > .menu-item-has-children').click(function(e) {
  e.stopPropagation();
  $(this).toggleClass('sub-menu-open');
  var $el = $('ul',this);
  $('.site-nav > ul > li > .sub-menu').not($el).slideUp();
  $('.site-nav > ul > li > .sub-menu').not($el).parent().parent('li').removeClass('sub-menu-open');
  $el.stop(true, true).slideToggle(400);
});

 

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Marion
    schrieb am 07.11.2021 um 09:56 Uhr:

    Hallo, eine wirklich schöne Navigation, und barrierearm. Lässt sich das auch bei zwei Ebenen umsetzen?

    Antworten
  2. Hardy Kruger
    schrieb am 06.07.2019 um 19:02 Uhr:

    Die Navigation gefällt mir sehr gut, aber das Untermenü verschiebt den Seiteninhalt nach unten. Wie ist es zu verhindern? Mit z-index hatte ich keinen Erfolg.
    Gruß Hardy

    Antworten
    • Jonas Hellwig
      schrieb am 22.07.2019 um 14:56 Uhr:

      Hallo Hardy,
      die Sub-Menus sind im Beispiel static positioniert. Du kannst die Klasse .sub-menu absolute positionieren und dem Sub-Menu dann noch eine gewünschte Breite zuweisen. Dann überlagert das Menü den nachfolgenden Inhalt. Details zur Positionierung mit CSS findest du hier.

      Antworten
  3. Thomas
    schrieb am 04.12.2017 um 00:06 Uhr:

    Sehr schöne Navigation.
    Aber wie lässt sich bei so einer DropDown-per-KLICK-Navigation das geöffnete Submenü wieder schließen, wenn man irgendwo auf der Seite klickt, ohne dabei einen Link anklicken zu müssen?

    Antworten
    • Federer Andreas
      schrieb am 07.02.2018 um 10:47 Uhr:

      So kann man das Menu bei einem Klick ausserhalb verstecken. Diesen Code ergänzen
      $(document).on(‚click‘, function(event) {
      var target = $(event.target);
      if (target.attr(‚class‘) !== ‚menu-item-has-children‘) {
      $(‚.sub-menu‘).hide(200);
      }
      });

      Antworten
  4. Mirco
    schrieb am 01.07.2016 um 09:17 Uhr:

    Ich denke, dass das Flexnav-Plugin hier schon eine gute Lösung bietet, oder nicht?
    Sollte auch dein Problem lösen @ Johannes

    http://jasonweaver.name/lab/flexiblenavigation/

    Antworten
  5. Johannes
    schrieb am 17.06.2016 um 09:55 Uhr:

    Hallo Jonas,
    ein Nachteil dieser Variante ist aber, dass die Hauptmenüpunkte nicht verlinkt werden können. Ich habe hier schon einmal versucht rechts der Menüpunkte ein Icon einzubauen das nur dann erscheint, wenn es Unterpunkte gibt. Ein Klick auf den Menüpunkt öffent die Seite, ein Klick auf das Icon öffnet das Untermenü …
    Zudem sollte es auch noch accessible sein.
    Bin hier aber nicht weiter gekommen.
    Hast Du hier eine Idee?
    LG
    Johannes

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung