Bootstrap 4: Klickbare Dropdown-Menüs

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!

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

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.