A Smarter Way To Learn HTML & CSS(2015)

75
A horizontal navigation bar part 2

Let’s add two more features to the navigation bar. When the user hovers over a selection, the blue color block turns light blue.

In order to do this, we need to create special class for the li elements. We start by removing a line we’ve already coded.

div#navbar ul li {
background-color: blue;
text-align: center;
display: inline;
width: 19%;
float: left;
margin-right: .5em;
}

Then we create the special li class.

li.changeBackground {

We start by coding a normal color for the class.

li.changeBackground {
background-color: blue;
}

Then we code the hover state.

li.changeBackground:hover {
background-color: lightBlue;
}

We can also code a color for the active state.

li.changeBackground:active {
background-color: darkBlue;
}

When the user clicks a selection, the color block turns dark blue.

This is the HTML.

<div id="navbar">
<ul>
<li class="changeBackground"><a href="why-choose-us.html">Why Choose Us</a></li>
<li class="changeBackground"><a href="recent-projects.html">Recent Projects</a></li>
<li class="changeBackground"> a href="our-team.html">Our Team</a></li>
<li class="changeBackground"><a href="get-a-quote.html">Get a Quote</a></li>
<li class="changeBackground"><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>

Change your CSS and HTML files to create a class of list item that is one color to start with, a second color when it’s moused over, and a third color when it’s active. Save the files. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-75-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-75-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/75.html