Der Webdesign Workshop geht weiter und besch\u00e4ftigt sich in diesem Artikel mit der Dropdown Navigation in zwei Varianten. Es wird sowohl der Klick-Dropdown als auch der Hover-Dropdown vorgestellt\u2026<\/p>\n\n\n\n\n\n\n\n
Der Klick-Dropdown:<\/strong><\/p>\n\n\n\n Per Mausklick soll sich ein Dropdown-Men\u00fc \u00f6ffnen \u2013 das ist die Idee hinter dieser ersten Variante des Dropdowns. Die HTML Grundlage ist eine einfache verschachtelte Liste. Der Trick ist dabei absolut einfach, denn die verschachtelte Liste wird einfach nur auf der Seite eingef\u00fcgt, die den Dropdown erhalten soll.<\/p>\n\n\n\n <ul><\/p>\n\n\n\n <li><a href=\u201cindex.html\u201c>Startseite<\/a><\/li><\/p>\n\n\n\n <li><a href=\u201cfotos.html\u201c>Fotos<\/a><\/p>\n\n\n\n <ul><\/p>\n\n\n\n <li><a href=\u201c2014.html\u201c>2014<\/a><\/li><\/p>\n\n\n\n <li><a href=\u201c2013.html\u201c>2013<\/a><\/li><\/p>\n\n\n\n <li><a href=\u201c2012.html\u201c>2012<\/a><\/li><\/p>\n\n\n\n <li><a href=\u201c2011.html\u201c>2011<\/a><\/li><\/p>\n\n\n\n <\/ul><\/p>\n\n\n\n <\/li><\/p>\n\n\n\n <li><a href=\u201clinks.html\u201c>Links<\/a><\/li><\/p>\n\n\n\n <li><a href=\u201cmail.html\u201c>E-Mail<\/a><\/li><\/p>\n\n\n\n <li><a href=\u201chinweis.html\u201c>Hinweis<\/a><\/li><\/p>\n\n\n\n <\/ul><\/p>\n\n\n\n In diesem Beispiel bekommt die Webseite \u201cfotos.html\u201c den Dropdown als Klick-Dropdown.<\/p>\n\n\n\n Anpassungen der CSS-Dateien sind hier nicht unbedingt notwendig.<\/p>\n\n\n\n Der Hover-Dropdown:<\/strong><\/p>\n\n\n\n F\u00fcr den Hover-Dropdown wird die verschachtelte Liste auf jeder Webseite eingef\u00fcgt und bekommt eine Spezialbehandlung per CSS.<\/p>\n\n\n\n Die CSS Anpassungen werden in der Datei \u201c06_navibereich.css\u201c vorgenommen. Wer sich f\u00fcr andere Dateinamen entschieden hat, der w\u00e4hlt nat\u00fcrlich seinen entsprechenden Dateinamen.<\/p>\n\n\n\n nav li ul {<\/p>\n\n\n\n position: absolute;<\/p>\n\n\n\n left: -9999px;<\/p>\n\n\n\n top: -9999px;<\/p>\n\n\n\n }<\/p>\n\n\n\n nav li:hover ul {<\/p>\n\n\n\n left: 10px;<\/p>\n\n\n\n top: auto;<\/p>\n\n\n\n display: block;<\/p>\n\n\n\n width: 210px;<\/p>\n\n\n\n height: auto;<\/p>\n\n\n\n }<\/p>\n\n\n\n Mit einem kleinen Kommentar versehen k\u00f6nnen diese CSS Anweisungen am Ende der Datei und vor dem Ende von @media eingef\u00fcgt werden.<\/p>\n\n\n\n Die beiden Anweisungsbl\u00f6cke machen folgendes: Zuerst wird das verschachtelte Listenelement ganz weit aus dem Sichtfeld des Webbrowsers verschoben. Dies geschieht durch absolute Positionierung und diesen extremen Negativwerten von -9999 Pixel.<\/p>\n\n\n\n Der zweite CSS Anweisungsblock gestaltet jetzt den eigentlichen Hover-Effekt. Das war auch schon das Geheimnis der Dropdown Navigation.<\/p>\n","protected":false},"excerpt":{"rendered":" Der Webdesign Workshop geht weiter und besch\u00e4ftigt sich in diesem Artikel mit der Dropdown Navigation in zwei Varianten. Es wird sowohl der Klick-Dropdown als auch der Hover-Dropdown vorgestellt\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/272\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/272\/revisions\/273"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}