Navbars

Course Content

Our aim is to produce the navigation bar similar to the one shown  in the animated gif to the right.

Formatting the horizontal navbar

Basic HTML for the navbar at the beginning is shown below:

<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>

The following steps will be required to format the navbar:

Step 1 - Removing bullet points

Now we will create a descendant selector to style only unordered lists elements that are inside a nav element so that the bullet points are removed using the list-style-type:none property.

nav ul {list-style-type:none}

Step 2 - Positioning list items horizontally

To ensure the list of hyperlinks is distributed horizontally, each <li> element is floated to the left using the float property.

nav ul li {float:left} 

Step 3 - Spacing out each item

To create space between each list item, a width is declared and the link text is centred within each width:

nav ul li {float:left;width:80px;text-align:center;}

Step 4 - Creating clickable boxes

In most navigation bars, clicking the area around the hyperlink (not just the text itself) also selects the link. Where as before you had to select the anchor text itself. A clickable box area around the link text is achieved by displaying the <a> element as a block element (as opposed to inline)

nav ul li a {display:block} 

Step 5 - Creating clickable boxes

The navbar should be grey as it was back initially but as it is a series of inline elements we need to specify the height. The vertical positioning of the link text in the navigation bar is controlled by declaring the height of the <nav> element and including padding within the <a> element:

nav {height:35px} 

nav ul li a {display:block;padding:8px} 

Step 6 - Add interactive Colours

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:

nav ul li a:hover {background-color:#000;color:White}

The final version can be seen below:

Step 7 - An optional extra

You could use the text-decoration: none; property to remove the underlines from the hyperlinks.

nav ul li a {

  text-decoration: none;

}