{"id":605,"date":"2019-11-04T10:54:28","date_gmt":"2019-11-04T09:54:28","guid":{"rendered":"https:\/\/ekiwi.de\/?p=605"},"modified":"2019-11-05T10:00:25","modified_gmt":"2019-11-05T09:00:25","slug":"bootstrap-dropdown-als-link-anklickbar","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/605\/bootstrap-dropdown-als-link-anklickbar\/","title":{"rendered":"Bootstrap &#8211; Dropdown als Link anklickbar"},"content":{"rendered":"<p>Das Dropdown in der Navbar von Bootstrap \u00f6ffnet sich beim Klick der Maus darauf.<\/p>\n<p><!--more--><\/p>\n<p>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\u00f6sung also.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/11\/bootstrap_dropdown_1.gif\" alt=\"\" width=\"432\" height=\"226\" class=\"aligncenter size-full wp-image-606\" \/><\/p>\n<p>Wir wollen das Verhalten nun \u00e4ndern. Geht der Anwender mit der Maus auf das Dropdown, soll sich das Men\u00fc \u00f6ffnen. Beim Klick auf das Dropdown der dahinterliegende Link \u00f6ffnen.<\/p>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?id=93\" target=\"_blank\" rel=\"noopener noreferrer\">Den urspr\u00fcnglichen Code finden Sie hier<\/a>.<\/p>\n<p>Aus dem Code entfernen wir folgende Attribute aus dem Dropdown-Link:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/11\/bootstrap_dropdown_2.png\" alt=\"\" width=\"773\" height=\"223\" class=\"aligncenter size-full wp-image-607\" srcset=\"\/wp-content\/uploads\/2019\/11\/bootstrap_dropdown_2.png 773w, \/wp-content\/uploads\/2019\/11\/bootstrap_dropdown_2-300x87.png 300w, \/wp-content\/uploads\/2019\/11\/bootstrap_dropdown_2-768x222.png 768w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\" \/><\/p>\n<p>Zus\u00e4tzlich bringen wir folgenden CSS-Code ein:<\/p>\n<pre>&lt;style type='text\/css'&gt;\r\n    ul.nav li.dropdown:hover ul.dropdown-menu {\r\n        display: block;\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p><a href=\"https:\/\/ekiwi.de\/tryit\/?id=94\" target=\"_blank\" rel=\"noopener noreferrer\">Der vollst\u00e4ndige Code befindet sich hier<\/a>.<\/p>\n<p>Das Ergebnis:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/11\/bootstra_dropdown_3.gif\" alt=\"\" width=\"432\" height=\"226\" class=\"aligncenter size-full wp-image-608\" \/><\/p>\n<h2>Update: Touch Support<\/h2>\n<p>Die oben gezeigte L\u00f6sung funktioniert auf dem Desktop prima, hier geht der Mauszeiger auf das Men\u00fc und es klappt auf. Auf mobilen Ger\u00e4ten mit Touch wird es schwierig, hier gibt es ja keinen Mauszeiger, welcher erkannt werden kann, wenn er sich \u00fcber einem Element befindet.<\/p>\n<p>Mit JQuery kann die Funktion so umgesetzt werden, dass das Men\u00fc auf dem Desktop-PC ausklappt, auf mobilen Ger\u00e4ten aber wie gehabt funktioniert (aufklappen durch anklicken):<\/p>\n<pre>&lt;script&gt;\r\n$(function(){\r\n    function is_touch_device() {\r\n        return 'ontouchstart' in window        \/\/ works on most browsers \r\n        || navigator.maxTouchPoints;       \/\/ works on IE10\/11 and Surface\r\n    };\r\n\r\n    if(!is_touch_device() &amp;&amp; $('.navbar-toggle:hidden')){\r\n      $('.dropdown-menu', this).css('margin-top',0);\r\n      $('.dropdown').hover(function(){ \r\n          $('.dropdown-toggle', this).trigger('click').toggleClass(&quot;disabled&quot;); \r\n      });\t\t\t\r\n    }\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Der Rest des Original-Codes kann so gelassen werden. Das <a href=\"https:\/\/ekiwi.de\/tryit\/?id=97\" rel=\"noopener noreferrer\" target=\"_blank\">gesamte Beispiel finden Sie hier<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Das Dropdown in der Navbar von Bootstrap \u00f6ffnet sich beim Klick der Maus darauf.<\/p>\n","protected":false},"author":1,"featured_media":61,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[43,22,45],"class_list":["post-605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-bootstrap","tag-css","tag-dropdown"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/61"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}