{"id":212,"date":"2018-03-18T18:24:09","date_gmt":"2018-03-18T17:24:09","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=212"},"modified":"2018-05-02T19:33:36","modified_gmt":"2018-05-02T17:33:36","slug":"bootstrap-menu-navbar-dropdown-mit-hover","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/212\/bootstrap-menu-navbar-dropdown-mit-hover\/","title":{"rendered":"Bootstrap Menu Navbar Dropdown mit Hover"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/212\/bootstrap-menu-navbar-dropdown-mit-hover\/#Videoanleitung\" >Videoanleitung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/212\/bootstrap-menu-navbar-dropdown-mit-hover\/#Anleitung\" >Anleitung<\/a><\/li><\/ul><\/nav><\/div>\n<p>Dropdowns in Bootstrap, z.B. in einer Navbar oder auch in anderen Men\u00fc, m\u00fcssen erst angeklickt werden, damit diese aufklappen. Im Prinzip ist es Geschmacksfrage, aber ich finde es sch\u00f6ner, wenn das Men\u00fc bereits aufklappt, wenn man einfach nur mit der Maus dr\u00fcber f\u00e4hrt.<\/p>\n<p><!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/hover.gif\" alt=\"\" width=\"300\" height=\"118\" class=\"alignnone size-full wp-image-213\" \/><\/p>\n<p>Bootstrap 3 kann dies standardm\u00e4\u00dfig nicht, aber es gibt ein <a href=\"https:\/\/github.com\/CWSpear\/bootstrap-hover-dropdown\" target=\"_blank\">passendes Plugin<\/a> um diese Funktion umzusetzen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/P1S-wOmsDFU\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anleitung\"><\/span>Anleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nach dem Download findet man zwei Java-Script-Dateien im Paket:<\/p>\n<pre>\r\nbootstrap-hover-dropdown.js\r\nbootstrap-hover-dropdown.min.js\r\n<\/pre>\n<p>F\u00fcr die Produktivseite verwenden wir die Min-Version. Zuerst m\u00fcssen wir das Script in unsere Bootstrap-Seite einbinden:\t<\/p>\n<pre>\r\n&lt;script src=&quot;http:\/\/code.jquery.com\/jquery-latest.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script src=&quot;http:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/js\/bootstrap.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script src=&quot;bootstrap-hover-dropdown.min.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>F\u00fcr das Script wird JQuery ben\u00f6tigt, sowie das Bootstrap Java-Script. Diese m\u00fcssen vor dem Dropdown-Script geladen werden.<\/p>\n<p>Anschlie\u00dfend k\u00f6nnen wir die Dropdowns recht einfach &#8222;Hover&#8220; f\u00e4hig machen. Einem Dropdown f\u00fcgt man einfach ein neues Attribut hinzu:<\/p>\n<pre>data-hover=\"dropdown\"<\/pre>\n<p>Hier ein Beispiel:<\/p>\n<pre>\r\n&lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; \r\ndata-hover=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; \r\naria-expanded=&quot;false&quot;&gt;Dropdown &lt;span class=&quot;caret&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\r\n<\/pre>\n<p>Hat alles geklappt, \u00f6ffnet sich das Dropdown auch schon beim Test im Browser. Optional gibt es zwei weitere Attribute:<\/p>\n<pre>data-delay=\"1000\" data-close-others=\"false\"<\/pre>\n<p>Mit dem ersten kann man einen Timeout festlegen, nach welcher Zeit (in ms) sich das Dropdown wieder schlie\u00dft, wenn die Maus nicht mehr \u00fcber dem Dropdown ist. Das andere Attribut legt fest, ob andere ge\u00f6ffnete Dropdowns automatisch geschlossen werden, sobald ein anderes Dropdown ge\u00f6ffnet wird.<\/p>\n<p>Die Eigenschaften lassen sich auf alle Dropdown-Elemente in Bootstrap anwenden. D.h. auch auf Dropdown-Buttons und andere Elemente.\t \t<\/p>\n<p><a href=\"\/wp-content\/uploads\/2018\/03\/bootstrap_hover.zip\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Dropdowns in Bootstrap, z.B. in einer Navbar oder auch in anderen Men\u00fc, m\u00fcssen erst angeklickt werden, damit diese aufklappen. Im<\/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":[15],"tags":[43,44],"class_list":["post-212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-bootstrap","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/212","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=212"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/212\/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=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}