A Smarter Way To Learn HTML & CSS(2015)

69
A vertical navigation bar
part 1

Since a navigation bar presents the user with a list of choices, the usual way to make one is to code an unordered list. Here’s some code.

<div id="navbar">
<ul>
<li>Why Choose Us</li>
<li>Recent Projects</li>
<li>Our Team</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</div>

This is what it looks like so far.

It isn’t a navigation bar if it isn’t clickable. So let’s add some links.

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

Now the list items are blue and are underlined, indicating links.

Since it’s going to be a navigation bar, we don’t need the bullets. This is the code that removes them.

div#navbar ul {
list-style-type: none;
}

Now the bullets are gone.

We’ll continue with the navigation bar in the next chapter.

1. In your CSS file, code a div id for a navigation bar. Include an id. Give it a clear: both specification to prevent wrap from the div above it.

2. Style an unordered list within the div so it has no bullets.

3. In your HTML file, code the div.

4. Within the div, code an unordered list with links. Make up the links. They don’t have to work.

5. Save the files. Display the page.

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

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

All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)

If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.

© 2016-2026 All site design rights belong to S.Y.A.