{"id":1002,"date":"2015-04-07T11:33:13","date_gmt":"2015-04-07T09:33:13","guid":{"rendered":"https:\/\/vielhuber.de\/?p=1002"},"modified":"2016-06-06T00:13:07","modified_gmt":"2016-06-05T22:13:07","slug":"usability-in-dropdown-menues","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/","title":{"rendered":"Usability in Dropdown-Men\u00fcs"},"content":{"rendered":"<p>Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcnschte Untermen\u00fc versehentlich geschlossen wird. Dieser <a href=\"http:\/\/static.tumblr.com\/9hgswys\/iU1mj8c6y\/bootstrap-bug.gif\" target=\"_blank\">Effekt<\/a> tritt auf, wenn der Mauszeiger bei der Navigation zu einem bereits ausgeklapptem Untermen\u00fc das entsprechende Men\u00fc auf oberer Ebene verl\u00e4sst.<\/p>\n<p><!--more--><\/p>\n<p>Zur L\u00f6sung des Problems kann man zum einen mit Hilfe von JavaScript leicht eine bewusste Verz\u00f6gerung des Men\u00fcs einbauen:<\/p>\n<p data-height=\"510\" data-theme-id=\"light\" data-slug-hash=\"VYOQQo\" data-default-tab=\"result\" data-user=\"vielhuber\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/vielhuber\/pen\/VYOQQo\/\">Pastejacking #2<\/a> by David Vielhuber (<a href=\"http:\/\/codepen.io\/vielhuber\">@vielhuber<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>Zum anderen kann man zu ausgereiften Plugins wie <a href=\"https:\/\/github.com\/kamens\/jQuery-menu-aim\" target=\"_blank\">jQuery-menu-aim<\/a> greifen, die sogar die Mauszeigerbewegungsrichtung auswerten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcnschte Untermen\u00fc versehentlich geschlossen wird. Dieser Effekt tritt auf, wenn der Mauszeiger bei der Navigation zu einem bereits ausgeklapptem Untermen\u00fc das entsprechende Men\u00fc auf oberer Ebene verl\u00e4sst.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-1002","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Usability in Dropdown-Men\u00fcs &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcn...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usability in Dropdown-Men\u00fcs &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcnschte\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-07T09:33:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-06-05T22:13:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Usability in Dropdown-Men\u00fcs\",\"datePublished\":\"2015-04-07T09:33:13+00:00\",\"dateModified\":\"2016-06-05T22:13:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/\"},\"wordCount\":103,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/\",\"name\":\"Usability in Dropdown-Men\u00fcs &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2015-04-07T09:33:13+00:00\",\"dateModified\":\"2016-06-05T22:13:07+00:00\",\"description\":\"Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcnschte\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/usability-in-dropdown-menues\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Usability in Dropdown-Men\u00fcs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Usability in Dropdown-Men\u00fcs &#060; Vielhuber David","description":"Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcn...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/","og_locale":"de_DE","og_type":"article","og_title":"Usability in Dropdown-Men\u00fcs &#060; Vielhuber David","og_description":"Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcnschte","og_url":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/","og_site_name":"Vielhuber David","article_published_time":"2015-04-07T09:33:13+00:00","article_modified_time":"2016-06-05T22:13:07+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Usability in Dropdown-Men\u00fcs","datePublished":"2015-04-07T09:33:13+00:00","dateModified":"2016-06-05T22:13:07+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/"},"wordCount":103,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/","url":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/","name":"Usability in Dropdown-Men\u00fcs &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2015-04-07T09:33:13+00:00","dateModified":"2016-06-05T22:13:07+00:00","description":"Bei der Arbeit mit mehrdimensionalen Dropdown-Men\u00fcs st\u00f6\u00dft man oft auf das Problem, dass falsche Untermen\u00fcs versehentlich ge\u00f6ffnet oder das gew\u00fcnschte","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/usability-in-dropdown-menues\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Usability in Dropdown-Men\u00fcs"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts\/1002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/comments?post=1002"}],"version-history":[{"count":3,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts\/1002\/revisions"}],"predecessor-version":[{"id":1951,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/posts\/1002\/revisions\/1951"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/media?parent=1002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/categories?post=1002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/zu\/wp-json\/wp\/v2\/tags?post=1002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}