Horizontal navigation bars
If the <nav> tag is used to create a navigation bar, it will appear as an unordered list, like this:
Code for the above navigation bar:
<html><head><style></style></head><body><h1>Navigation Bar Example</h1><nav><ul><li><a href="home.html">±«Óătv</a></li><li><a href="news.html">News</a></li><li><a href="weather.html">Weather</a></li><li><a href="bitesize.html">Bitesize</a></li><li><a href="sport.html">Sport</a></li></ul></nav></body></html>Adding CSS to the navigation bar can format it to be more presentable.
Most navigation bars on websites are horizontal. The navigation bar can be made horizontal by using the following CSS:
nav ul {list-style-type:none}This will remove the bullet points from the unordered list, like this:
Once the bullet points have been removed, list items can be aligned horizontally using:
nav ul {float:left}The navigation bar will now look like:
As you can see, we have a problem. The list items are presented together with no spaces between items. We can solve this by adding:
nav ul li {float:left; width:100px; text-align:center}Our navigation bar will now look like:
Now our navigation bar is almost finished! We should add boxes around each link, as most navigation bars have some area around the link. We can add the code for these boxes like so:
nav ul li a {display:block}Before we see the example webpage, we need to add colour to our clickable boxes. We will give our boxes a blue background and white text
This background and text colour will be controlled with a setting hover, hover is a setting that manages what occurs when the mouse hovers over an element. In this case, our navigation bar buttons!
nav ul li a:hover {background-color:blue;color:white}Our navigation bar will now look like:
As shown in the example, our ±«Óătv hyperlink button has a blue background and white text when the mouse hovers over it.
The code for the above navigation bar is below:
<html><head><style>nav ul {list-style-type:none;}nav ul li {float:left; width:100px; text-align:center}nav ul li a {display:block}nav ul li a:hover {background-color:blue;color:white}</style></head><body><h1>Navigation Bar Example</h1><nav><ul><li><a href="home.html">±«Óătv</a></li><li><a href="news.html">News</a></li><li><a href="weather.html">Weather</a></li><li><a href="bitesize.html">Bitesize</a></li><li><a href="sport.html">Sport</a></li></ul></nav></body></html>