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

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

thumb

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 Web Designern bei ihren alltäglichen Problemen zu helfen. Neben diesem Blog bieten wir noch weitere Trainings-Möglichkeiten wie Schulungen, Bücher oder Video-Trainings an. Detaillierte Informationen findet ihr hier.

Feedback & Ergänzungen – 6 Kommentare

  1. 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
  2. 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
  3. 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
  4. 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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: