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.

2 Antworten auf „Bootstrap 4: Klickbare Dropdown-Menüs“

  1. Für den Desktop funktioniert das alles, nur für mobile Geräte bringt mir das nichts. Dort ist das Verhalten dann wie vorher. Dort muss es aber auch möglich sein an die erste Ebene zu kommen.

Schreibe einen Kommentar

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