{"id":968,"date":"2024-02-26T08:00:00","date_gmt":"2024-02-26T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=968"},"modified":"2023-11-01T09:05:33","modified_gmt":"2023-11-01T08:05:33","slug":"flex-2-version-4","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2024\/02\/26\/flex-2-version-4\/","title":{"rendered":"Flex 2 Version 4"},"content":{"rendered":"\n

In diesem Artikel wird aus der Basis-Navigation ein Klick-Dropdown vertikal\u2026<\/p>\n\n\n\n\n\n\n\n

Der Weg zu<\/strong>m<\/strong> Klick-Dropdown vertikal<\/strong>:<\/strong><\/p>\n\n\n\n

Der \u201cKlick Dropdown vertikal\u201c erweitert die Tab-Navigation um einen Klick Dropdown.<\/p>\n\n\n\n

Der „Trick“ dazu oder dahinter ist recht einfach: Jede Seite des Projekts bekommt eine angepasste individuelle Navigation.<\/p>\n\n\n\n

HTML Quelltext der Navigation auf der Startseite:<\/p>\n\n\n\n

<nav> <!-- Anfang vom nav-Element -->\n<ul>\n<li><a href=\"index.html\">Startseite<\/a><\/li>\n<li><a href=\"archiv.html\">Archiv<\/a><\/li>\n<li><a href=\"impressum.html\">Impressum<\/a><\/li>\n<\/ul>\n<\/nav> <!-- Ende vom nav-Element --><\/code><\/pre>\n\n\n\n
HTML Quelltext der Navigation auf der Archivseite:<\/p>\n\n\n\n
<nav> <!-- Anfang vom nav-Element -->\n<ul>\n<li><a href=\"index.html\">Startseite<\/a><\/li>\n<li><a href=\"archiv.html\">Archiv<\/a>\n<ul>\n<li><a href=\"jahr1.html\">Jahr 1<\/a><\/li>\n<li><a href=\"jahr2.html\">Jahr 2<\/a><\/li>\n<li><a href=\"jahr3.html\">Jahr 3<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"impressum.html\">Impressum<\/a><\/li>\n<\/ul>\n<\/nav> <!-- Ende vom nav-Element --><\/code><\/pre>\n\n\n\n
Die Klick Dropdown Navigation basiert also auf einer verschachtelten Liste. Auf CSS-Ebene handelt es sich um eine Tab-Navigation.<\/p>\n","protected":false},"excerpt":{"rendered":"
In diesem Artikel wird aus der Basis-Navigation ein Klick-Dropdown vertikal\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-968","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\/968","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=968"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/968\/revisions"}],"predecessor-version":[{"id":969,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/968\/revisions\/969"}],"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=968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}