Lange mussten wir auf den ersten Beta-Release des beliebten (S)CSS-Frameworks warten. Auch hier gibt es allerdings wieder die bekannte Problematik der nicht-klickbaren Dropdown-Menü Links.
Das Problem
Ich habe ein Dropdown-Menü in meiner Navbar und möchte den übergeordneten Link auch anklicken – und anschließend auch dem entsprechenden Link folgen.
Das geht aber nicht. Hier gibt es eine Demo dazu!
//jsfiddle.net/cdLgyL6a/8/embed/result,html/
Hier kann der Über uns-Link, der auf auf http://example.org/about-us verweist nicht angeklickt werden.
Die Lösung
Lösungen dazu kursieren zuhauf bei StackOverflow und Konsorten. Die meisten sind aber für Bootstrap 3. Hier ist mein Ansatz dazu.
CSS:
@media(min-width: 768px) {
// Dropdown ab Desktop per Hover ausklappen
.dropdown:hover .dropdown-menu {
display: block;
}
// Dafür sorgen, dass man mit der
// Maus das Dropdown betreten kann
// ohne dass es frühzeitig schliesst.
.dropdown-menu {
margin-top: 0 !important;
}
}
Nachtrag vom 12.09.2017:
Der JavaScript-Code wurde dahingehend geändert, dass er die zuvor gesetzte CSS Eigenschaft überprüft. Damit ist das alles auch responsiver.
JavaScript:
function clickDropdown() {
if ($('.navbar-toggler').css("display") === "none") {
$('.dropdown-toggle').click(function () {
window.location.href = $(this).attr('href');
return false;
});
}
}
$(document).ready(function () {
clickDropdown();
$(window).resize(function () {
clickDropdown();
});
});
Demo der Lösung
Hier geht es zur Demo – am besten auf einem Desktop ansehen!
Die Dropdowns öffnen sich auf größeren Bildschirmen per Mouseover (Hover) und sind klickbar. Auf kleineren Bildschirmen bleibt das Verhalten normal.
Schreibe einen Kommentar