kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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);
});

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Johannes

    Verfasst am 17. Juni 2016 um 9: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

  2. Mirco

    Verfasst am 1. Juli 2016 um 9: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/

  3. Thomas

    Verfasst am 4. Dezember 2017 um 0: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?

    • Federer Andreas

      Verfasst am 7. Februar 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);
      }
      });

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.