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!
//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.


Beitrag veröffentlicht

in

, ,

von

Schlagwörter:

Kommentare

6 Antworten zu „Bootstrap 4: Klickbare Dropdown-Menüs“

  1. Avatar von NanoPolymer
    NanoPolymer

    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.

    1. Avatar von Pascale Beier

      Ich weiß genau was du meinst.. für dich wäre smartmenus wahrscheinlich das Richtige.
      In der Agentur nutzen wir das oder legen eine Unterseite an die auf die jeweilige Elternseite zeigt.
      Schau zb Mal bei http://hertener-loewen.de, dort ist Bootstrap smartmenus drin

  2. Avatar von Melwin
    Melwin

    Hallo,

    zur Zeit bin ich auch an einem Projekt, wo sich leider ein sehr langes Mobiles Menü ergibt. Welche Möglichkeiten ergeben sich bei Nutzung von DIVI ?

    Mobil darf es keine Ellen lange liste sein 🙁

    freue mich auf Hilfe.

    1. Avatar von Pascale Beier

      Frag vielleicht mal im WordPress-Forum, da bin ich leider auch raus.

  3. Avatar von Melwin

    Ich habe nun eine Lösung gefunden und möchte diese gerne Teilen:

    https://www.youtube.com/watch?v=8yEpfJzJHq8

    In diesem Video inkl. Blog habe ich einige Erkenntnisse gewonnen mit guten Resultaten. (Mobiles Menü als Dropdown klickbar mit kleinen Kreisen und Pfeilen)

    Bitte beachtet, dass ich für die Links usw. keine Haftung übernehme.

    1. Avatar von Pascale Beier

      Danke für den Tipp!

Schreibe einen Kommentar

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