{"id":248,"date":"2021-06-07T13:43:32","date_gmt":"2021-06-07T12:43:32","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=248"},"modified":"2021-06-07T21:58:39","modified_gmt":"2021-06-07T20:58:39","slug":"horizontal-navigation-bars","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/html\/horizontal-navigation-bars\/","title":{"rendered":"Horizontal Navigation Bars"},"content":{"rendered":"

\"\"List of Links<\/h1>\n

The HTML 5 <nav> element is used to contain website navigation links, usually as a navigation bar.<\/p>\n

The navigation bar is declared as an unordered list of hyperlinks:<\/p>\n

\r\n<nav>\r\n    <ul>\r\n        <li><a href="home.html">Home<\/a><\/li>\r\n        <li><a href="sport.html">Sport<\/a><\/li>\r\n        <li><a href="music.html">Music<\/a><\/li>\r\n        <li><a href="study.html">Study<\/a><\/li>\r\n        <li><a href="drama.html">Drama<\/a><\/li>\r\n    <\/ul>\r\n<\/nav>\r\n<\/pre>\n
CSS Formatting<\/h1>\n
Note: This topic uses CSS Descendant Selectors<\/a>.<\/p>\n
Remove the bullet points from the <li> elements<\/h2>\n
\r\nnav ul {\r\n    list-style-type:none;\r\n}\r\n<\/pre>\n
Position list items horizontally, evenly spaced out<\/h2>\n
Each list item is centred in an 80px wide box, and floated so they are displayed alongside each other<\/p>\n
\r\nnav ul li {\r\n    float:left;\r\n    width:80px;\r\n    text-align:center;\r\n}\r\n<\/pre>\n
Creating clickable boxes<\/h2>\n
In most navigation bars, clicking the area around the hyperlink also selects the link. A clickable box area around the link text is achieved by displaying the <a> element as a block. This is made visible by giving each link a border and a background colour.<\/p>\n
Padding is used to add some (vertical) space around the text for the link.<\/p>\n
The underlining can also be removed from the hyperlinks at in the same block.<\/p>\n
\r\nnav ul li a {\r\n    display:block;\r\n    padding:8px;\r\n    background-color:wheat;\r\n    border: 1px solid black;\r\n    text-decoration:none; \r\n}\r\n<\/pre>\n
Adding interactive colours<\/h2>\n
The state of the <a> element can be styled to change the background colour and text colour of each link when the mouse hovers over an <a> element:<\/p>\n
\r\nnav ul li a:hover {\r\n    background-color:#000;\r\n    color:white;\r\n}<\/pre>\n
Complete HTML and CSS<\/h2>\n
\r\n<nav>\r\n    <ul>\r\n        <li><a href="home.html">Home<\/a><\/li>\r\n        <li><a href="sport.html">Sport<\/a><\/li>\r\n        <li><a href="music.html">Music<\/a><\/li>\r\n        <li><a href="study.html">Study<\/a><\/li>\r\n        <li><a href="drama.html">Drama<\/a><\/li>\r\n    <\/ul>\r\n<\/nav>\r\n<\/pre>\n
\r\nnav ul {\r\n        list-style-type:none;\r\n}\r\n\r\nnav ul li {\r\n        float:left;\r\n\t\twidth:80px;\r\n\t\ttext-align:center;\r\n}\r\n\r\n\r\nnav ul li a {\r\n    display:block;\r\n\tpadding:8px;\r\n    background-color:wheat;\r\n\tborder: 1px solid black;\r\n\ttext-decoration:none; \r\n}\r\n\r\nnav ul li a:hover {\r\n    background-color:#000;\r\n\tcolor:white;\r\n}\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
List of Links The HTML 5 <nav> element is used to contain website navigation links, usually as a navigation bar. The navigation bar is declared as an unordered list of hyperlinks: <nav> <ul> <li><a href="home.html">Home<\/a><\/li> <li><a href="sport.html">Sport<\/a><\/li> <li><a href="music.html">Music<\/a><\/li> <li><a href="study.html">Study<\/a><\/li> <li><a href="drama.html">Drama<\/a><\/li> <\/ul> <\/nav> CSS Formatting Note: This topic uses CSS Descendant Selectors. Remove the bullet points from the <li> elements nav ul { list-style-type:none; } Position list items<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":16,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-248","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":8,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/248\/revisions"}],"predecessor-version":[{"id":290,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/248\/revisions\/290"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/16"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}