{"id":139,"date":"2011-01-06T01:10:42","date_gmt":"2011-01-06T00:10:42","guid":{"rendered":"http:\/\/unckel.com\/blog\/?p=139"},"modified":"2019-12-07T22:02:34","modified_gmt":"2019-12-07T21:02:34","slug":"einfache-dropdown-navigation-mit-css-und-javascript","status":"publish","type":"post","link":"https:\/\/unckel.de\/blog\/einfache-dropdown-navigation-mit-css-und-javascript\/","title":{"rendered":"Einfache Dropdown-Navigation mit CSS und JavaScript"},"content":{"rendered":"

Ein typisches Aufklappmen\u00fc, umgesetzt mit reinem CSS. Internet Explorer bis Version 7 ben\u00f6tigt etwas Hilfe per JavaScript. Dazu habe ich die jQuery- Bibliothek eingesetzt (was zwar etwas \u00fcbertrieben erscheint, ich jedoch meistens sowieso auf der Website einsetze).
\nGetestet mit IE 6-8, Firefox 3x und Google Chrome auf PC.<\/p>\n

\"\"<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" \/>\n<style type=\"text\/css\">\n\n#nav, #nav ul {\n  font-family:sans-serif;\n  list-style:none;\n  padding:0;\n  margin:0;\n}\n\n#nav a {\n  display:block;\n  color:#000;\n  text-decoration:none;\n  padding:.5em;\t\n}\n\n#nav li {\n  float:left;\n  background-color:#ddd;\n}\n\n#nav li ul {\n  position:absolute;\n  width:auto;\n  left:-999em;\n  padding:0;\n}\n\n#nav li ul li {\n  clear:both;\n}\n\n#nav li:hover {\n  background-color:#eee;\n}\n\n\/* no support IE 6,7 see JavaScript *\/\n#nav li:hover ul,  \n#nav li.iehover ul {\n  left:auto;\n}\n\n<\/style>\n<\/head>\n<body>\n\n<ul id=\"nav\">\n  <li><a href=\"#\">Parent 1<\/a><\/li>\n  <li><a href=\"#\">Parent 2<\/a>\n    <ul>\n      <li><a href=\"#\">Child 2.1<\/a><\/li>\n      <li><a href=\"#\">Child 2.2<\/a><\/li>\n      <li><a href=\"#\">Child 2.3<\/a><\/li>\n    <\/ul>\n  <\/li>\n  <li><a href=\"#\">Parent 3<\/a>\n    <ul>\n      <li><a href=\"#\">Child 3.1<\/a><\/li>\n      <li><a href=\"#\">Child 3.2<\/a><\/li>\n      <li><a href=\"#\">Child 3.3<\/a><\/li>\n      <li><a href=\"#\">Child 3.4<\/a><\/li>\n    <\/ul>\t\t\t\n  <\/li>\n  <li><a href=\"#\">Parent 4<\/a><\/li>\n<\/ul>\n\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"><\/script>\n<!-- Single-level Dropdowns: http:\/\/htmldog.com\/articles\/suckerfish\/dropdowns\/ -->\n<!--[if lte IE 7]>\n<script>\n$(function() {\n  $(\"#nav li\").hover(\n    function() { $(this).addClass(\"iehover\"); },\n    function() { $(this).removeClass(\"iehover\"); }\n  );\n});\n<\/script>\n<![endif]-->\n\n<\/body>\n<\/html><\/pre>\n
Quelle und ausf\u00fchrliche Beschreibung:\u00a0http:\/\/htmldog.com\/articles\/suckerfish\/dropdowns\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Ein typisches Aufklappmen\u00fc, umgesetzt mit reinem CSS. Internet Explorer bis Version 7 ben\u00f6tigt etwas Hilfe per JavaScript. Dazu habe ich die jQuery- Bibliothek eingesetzt (was zwar etwas \u00fcbertrieben erscheint, ich jedoch meistens sowieso auf der Website einsetze). Getestet mit IE 6-8, Firefox 3x und Google Chrome auf PC. <!DOCTYPE html> <html lang=“en“> <head> <meta charset=“utf-8″ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-139","post","type-post","status-publish","format-standard","hentry","category-webdesign"],"_links":{"self":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":1,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":780,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions\/780"}],"wp:attachment":[{"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unckel.de\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}