Touchscreen optimierte DropDown-Navigation mit jQuery
In diesen Beitrag findet ihr den Code um eine Dropdown-Navigation per Klick zu öffnen.

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.
<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)
;});
Hallo, eine wirklich schöne Navigation, und barrierearm. Lässt sich das auch bei zwei Ebenen umsetzen?
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
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.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?
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);
}
});
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/
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