Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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 kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

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.

Website-Projekte mit kulturbanause

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

Übersicht Kompetenzen →

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.

Übersicht Schulungsthemen →