{"id":1850,"date":"2018-02-21T15:15:04","date_gmt":"2018-02-21T15:15:04","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/?p=1850"},"modified":"2018-02-21T15:16:04","modified_gmt":"2018-02-21T15:16:04","slug":"html-css-navigation-menu","status":"publish","type":"post","link":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/2018\/02\/21\/html-css-navigation-menu\/","title":{"rendered":"HTML\/CSS Navigation Menu"},"content":{"rendered":"<p>I wasn&#8217;t overly happy with the way that this was shown on W3Schools. The <a href=\"https:\/\/www.w3schools.com\/css\/css_navbar.asp\">navigation bar<\/a> and <a href=\"https:\/\/www.w3schools.com\/css\/css_dropdowns.asp\">dropdowns<\/a>\u00a0were on different pages and it wasn&#8217;t till you got to the end that you saw <a href=\"https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_dropdown_navbar\">how it worked<\/a>. Even then the sub page links were not held in a sub list they were displayed in a div.<\/p>\n<p>I found <a href=\"https:\/\/css-tricks.com\/targetting-menu-elements-submenus-navigation-bar\/\">this article<\/a>, which gives a good explination (along with samples) of how you could create a multilevel naviational bar that uses lists. The code is quite complicated and it relies on <a href=\"https:\/\/www.w3schools.com\/cssref\/sel_element_element.asp\">element element selector<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"ttfmake-embed-wrapper aligncenter\" style=\"max-width: 960px;\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"X6U6mP5mp2\"><p><a href=\"https:\/\/css-tricks.com\/targetting-menu-elements-submenus-navigation-bar\/\">Targeting Menu Elements with Submenus in a Navigation Bar<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/css-tricks.com\/targetting-menu-elements-submenus-navigation-bar\/embed\/#?secret=X6U6mP5mp2\" data-secret=\"X6U6mP5mp2\" width=\"600\" height=\"338\" title=\"&#8220;Targeting Menu Elements with Submenus in a Navigation Bar&#8221; &#8212; CSS-Tricks\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>I wasn&#8217;t overly happy with the way that this was shown on W3Schools. The navigation bar and dropdowns\u00a0were on different pages and it wasn&#8217;t till you got to the end that you saw how it worked. Even then the sub page links were not held in a sub list they were displayed in a div. &hellip;<\/p>\n","protected":false},"author":32,"featured_media":1725,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17939],"tags":[],"class_list":["post-1850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding"],"jetpack_featured_media_url":"https:\/\/blogs.glowscotland.org.uk\/nl\/public\/ColtnessHS-ComputingScience\/uploads\/sites\/12638\/2017\/06\/css.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/1850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/comments?post=1850"}],"version-history":[{"count":2,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/1850\/revisions"}],"predecessor-version":[{"id":1852,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/1850\/revisions\/1852"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/media\/1725"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/media?parent=1850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/categories?post=1850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/tags?post=1850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}