{"id":398,"date":"2023-02-22T08:00:00","date_gmt":"2023-02-22T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=398"},"modified":"2024-07-24T06:09:01","modified_gmt":"2024-07-24T04:09:01","slug":"responsives-webdesign-4","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2023\/02\/22\/responsives-webdesign-4\/","title":{"rendered":"Responsives Webdesign 4"},"content":{"rendered":"\n<p>Die Navigation im header-Bereich ist noch nicht ganz vollst\u00e4ndig dokumentiert. Dieser Artikel soll das Thema nun vorerst abschlie\u00dfen\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Navigation 2 einblenden:<\/strong><\/p>\n\n\n\n<p>Die zweite Navigation wurde bereits im letzten Artikel in der Datei \u201c600.css\u201c eingeblendet.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav2{\nposition: absolute;\ntop: 10px;\nleft: 20px;\n}<\/code><\/pre>\n\n\n\n<p>F\u00fcr den Dropdown-Effekt m\u00fcssen aber nat\u00fcrlich auch die notwendigen Gestaltungen f\u00fcr den Rest der Navigation vorgenommen werden\u2026<\/p>\n\n\n\n<p><strong>Listen als Blockelement:<\/strong><\/p>\n\n\n\n<p>Die Listenpunkte der zweiten Navigation m\u00fcssen als Block-Element festgelegt werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav2 li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}<\/code><\/pre>\n\n\n\n<p><strong>Verschachtelte Liste ausblenden:<\/strong><\/p>\n\n\n\n<p>F\u00fcr den Dropdown-Effekt m\u00fcssen die verschachtelten Listen wieder ausgeblendet werden. Hier wieder mit einem Negativwert von -9999 Pixel.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav2 li ul {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}<\/code><\/pre>\n\n\n\n<p><strong>Hover-Effekt gestalten:<\/strong><\/p>\n\n\n\n<p>Nun wird der Hover-Effekt gestaltet\u2026<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav2 li:hover ul {\nleft: 10px;\ntop: auto;\ndisplay: block;\nwidth: 210px;\nheight: auto;\n}<\/code><\/pre>\n\n\n\n<p><strong>Hyperlinks gestalten:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav2 a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav2 a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Die Navigation im header-Bereich ist noch nicht ganz vollst\u00e4ndig dokumentiert. Dieser Artikel soll das Thema nun vorerst abschlie\u00dfen\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-398","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\/398","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=398"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":1643,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/398\/revisions\/1643"}],"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=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}