Bootstrap – Dropdown als Link anklickbar

Das Dropdown in der Navbar von Bootstrap öffnet sich beim Klick der Maus darauf.

Man kann und sollte zwar einen Link angeben, dieser kommt aber nur zum Tragen, falls Java-Script deaktiviert ist und das Dropdown dadurch nicht funktioniert. Eine klassische Fallback-Lösung also.

Wir wollen das Verhalten nun ändern. Geht der Anwender mit der Maus auf das Dropdown, soll sich das Menü öffnen. Beim Klick auf das Dropdown der dahinterliegende Link öffnen.

Den ursprünglichen Code finden Sie hier.

Aus dem Code entfernen wir folgende Attribute aus dem Dropdown-Link:

Zusätzlich bringen wir folgenden CSS-Code ein:

<style type='text/css'>
    ul.nav li.dropdown:hover ul.dropdown-menu {
        display: block;
    }
</style>

Der vollständige Code befindet sich hier.

Das Ergebnis:

Update: Touch Support

Die oben gezeigte Lösung funktioniert auf dem Desktop prima, hier geht der Mauszeiger auf das Menü und es klappt auf. Auf mobilen Geräten mit Touch wird es schwierig, hier gibt es ja keinen Mauszeiger, welcher erkannt werden kann, wenn er sich über einem Element befindet.

Mit JQuery kann die Funktion so umgesetzt werden, dass das Menü auf dem Desktop-PC ausklappt, auf mobilen Geräten aber wie gehabt funktioniert (aufklappen durch anklicken):

<script>
$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
</script>

Der Rest des Original-Codes kann so gelassen werden. Das gesamte Beispiel finden Sie hier.