Horizontal navigation bars
Where are we?
This lesson is about linking pages together. You know how to make basic links and style them. You just learned how to create a vertical navigation bar.
This page’s goals
This page is about horizontal navigation bars. By the end of this page, you should be able to:
- Create horizontal nav bars with text.
- Position horizontal nav bars.
- Create horizontal nav bars with images and hover effects.
Horizontal nav bars with text
Let’s create a navigation bar that looks like this:
Figure 1. Horizontal nav bar with text
It’s like the vertical one we made on the last page. Remember, it looked like this:
Figure 2. Vertical nav bar with text
To turn the vertical menu into a horizontal one, we only need to add one CSS property. Really! Here’s the code for the horizontal menu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav bar</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
background: #FFFFEE;
}
.horizontal_menu {
border: 1px dotted blue;
background-color: #EEFFFF;
padding: 5px;
margin: 5px;
}
.horizontal_menu li {
display: inline;
list-style: none;
margin: 5px;
}
.horizontal_menu li a {
text-decoration: none;
color: black;
}
.horizontal_menu li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul class="horizontal_menu">
<li>
<a href="dummy.html" title="Back to the home page">Home</a>
</li>
<li>
<a href="dummy.html" title="The basics of dog nutrition">The basics</a>
</li>
<li>
<a href="dummy.html" title="Articles on dog nutrition">Articles</a>
</li>
<li>
<a href="dummy.html" title="Products we recommend">Products</a>
</li>
<li>
<a href="dummy.html" title="Our bloggy nutrition updates">Blog</a>
</li>
</ul>
</body>
</html>
Figure 3. HTML and CSS for horizontal nav bar with text
You can try the horizontal text nav bar. It’s quite w00fy.
Line 19 is new. (OK, I also changed the class vertical_menu to horizontal_menu, but that’s not really new.)
Earlier, in the page Simple font tags, I explained the difference between block tags and inline tags. Here’s some HTML:
<p>I <em>really</em> love dogs.</p>
It renders likes this (though smaller and without the lines):
Figure 4. Inline and block
The <p> tag is a block tag. It creates a square block on the screen, with white space on all sides.
The <em> tag is an inline tag. It’s turned on inside a block tag, and keeps running until it gets turned off.
An inline tag might not create a rectangular area. This code:
<p>I <em>really really really really really really </em> love dogs.</p>
It might look like this, in a browser that’s zoomed in and put in a small window:
Figure 5. Inline not always a rectangle
You can’t draw a rectangle around the italicized text without including other stuff. But for a block tag, you can draw a simple rectangle that bounds the block content.
The bottom line: block tags create a rectangular area for themselves. Inline tags don’t. They’ll keep things on the same line, if they can.
<li> is normally a block tag. That is, the browser puts it in a rectangle of its own. Take this code:
...
li {
border: 1px red dotted;
}
...
<ul>
<li>
The first thing.
</li>
<li>
The second thing.
</li>
</ul>
....
Figure 6. <li> as block tag
It renders as:
Figure 7. <li> as block tag – rendered
But if I add one line, making the style:
li {
border: 1px red dotted;
display: inline;
}
Figure 8. Display inline
This is what I get:
Figure 9. <li> as inline tag – rendered
Each <li> sits in line with the others.
That’s how we get a horizontal text nav bar.
Positioning horizontal nav bars
You usually put horizontal nav bars at the top or bottom of a page. They don’t need any special positioning. Just include them in the HTML, and they naturally fall into place.
Suppose we wanted this:
Figure 10. Horizontal nav bar
Here’s some code:
...
<body>
<h1>Dog Land</h1>
<ul class="horizontal_menu">
<li>
<a href="dummy.html" title="Back to the home page">Home</a>
</li>
...
</ul>
<p>Lorem ipsum dolor sit amet, consectetur
...
Figure 11. Code for horizontal nav bar
There’s the heading (line 3), then the menu (lines 4 to 9), then the page content. This creates the display in Figure 10. No need to use the CSS float property, as we did with the vertical nav bars. You can try a page with a horizontal text nav bar.
Exercise: Styled horizontal navigation bar
Create a nav bar for Puppy Swarm that looks like this when added to a page (I shrank the image to make it fit):
The color code for the purple is 7534AA.
When the mouse cursor moves over a link, it changes to a lighter purple. Use the color code B484DA.
Upload your solution to your server. Enter the URL below.
(Log in to enter your solution to this exercise.)
Image nav bars with rollover effects
On the previous page, we created a vertical nav bar with an image rollover effect. You can try the vertical nav bar to remind yourself how it acted.
A few changes to the CSS convert it into a horizontal nav bar. Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal nav bar</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
background-color: #FDF4DE;
}
.horizontal_menu {
background-color: #F7DB94;
padding: 5px;
margin: 5px;
}
.horizontal_menu li {
display: inline;
list-style: none;
margin: 5px;
}
.horizontal_menu li a img {
border: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#home_button').hover(
function(){
//Run on mouse over.
$('#home_button').attr('src', 'button-images/home-over.png');
},
function(){
//Run on mouse out.
$('#home_button').attr('src', 'button-images/home.png');
}
);
$('#basics_button').hover(
function(){
//Run on mouse over.
$('#basics_button').attr('src', 'button-images/basics-over.png');
},
function(){
//Run on mouse out.
$('#basics_button').attr('src', 'button-images/basics.png');
}
);
$('#articles_button').hover(
function(){
//Run on mouse over.
$('#articles_button').attr('src', 'button-images/articles-over.png');
},
function(){
//Run on mouse out.
$('#articles_button').attr('src', 'button-images/articles.png');
}
);
$('#products_button').hover(
function(){
//Run on mouse over.
$('#products_button').attr('src', 'button-images/products-over.png');
},
function(){
//Run on mouse out.
$('#products_button').attr('src', 'button-images/products.png');
}
);
$('#blog_button').hover(
function(){
//Run on mouse over.
$('#blog_button').attr('src', 'button-images/blog-over.png');
},
function(){
//Run on mouse out.
$('#blog_button').attr('src', 'button-images/blog.png');
}
);
});
</script>
</head>
<body>
<ul class="horizontal_menu">
<li>
<a href="dummy.html" title="Back to the home page">
<img id="home_button" src="button-images/home.png" alt="Back to the home page">
</a>
</li>
<li>
<a href="dummy.html" title="The basics of dog nutrition">
<img id="basics_button" src="button-images/basics.png" alt="The basics of dog nutrition">
</a>
</li>
<li>
<a href="dummy.html" title="Articles on dog nutrition">
<img id="articles_button" src="button-images/articles.png" alt="Articles on dog nutrition">
</a>
</li>
<li>
<a href="dummy.html" title="Products we recommend">
<img id="products_button" src="button-images/products.png" alt="Products we recommend">
</a>
</li>
<li>
<a href="dummy.html" title="Our bloggy nutrition updates">
<img id="blog_button" src="button-images/blog.png" alt="Our bloggy nutrition updates">
</a>
</li>
</ul>
</body>
</html>
Figure 12. Horizontal nav bar with image rollover
I added line 18, to make the <li>s line up horizontally.
The vertical menu had this rule, applied to the <ul>:
...
.vertical_menu {
float: left;
width: 145px;
background-color: #F7DB94;
padding: 5px;
margin: 5px;
}
...
<ul class="vertical_menu">
...
Figure 13. Vertical code reminder
Lines 3 and 4 are gone from the horizontal version. I just let the content flow naturally. There was no need to float anything.
W00f!
The Sneaky Underline of @DOOM@
Check out this page. It has this problem:
Figure 14. Extra underline
Hey! Where did the little line come from?
Let’s look at the code:
<ul class="horizontal_menu">
<li>
<a href="dummy.html">
<img src="amd_xp.png" alt="AMD">
</a>
</li>
...
</ul>
Figure 15. Code that makes the extra line
The problem is in lines 3 to 5. This would eliminate the extra line:
<ul class="horizontal_menu">
<li>
<a href="dummy.html"><img src="amd_xp.png" alt="AMD"></a>
</li>
...
</ul>
Figure 16. The extra line – gone!
It’s the white space between <a> and </a> that causes the problem. This is one time that white space in HTML code matters.
Having the look of the page depend on formatting of the code…, well, it’s a Bad Thing. We can use CSS to make the problem go away:
.horizontal_menu li a {
text-decoration: none;
}
...
<ul class="horizontal_menu">
<li>
<a href="dummy.html">
<img src="amd_xp.png" alt="AMD">
</a>
</li>
...
</ul>
Figure 17. Using CSS to kill the extra line
The CSS rule removes the underline that <a> normally has.
Check it out. Here’s what it looks like:
Figure 18. No problem
Exercise: Horizontal navigation bar with images
Create a horizontal navigation bar with images and a hover effect for Puppy Swarm. Your page should look like this (I shrank the image to fit):
When the user moves the mouse over a button, the image should change. Make the font larger, change color, whatever you like.
You can use these images if you want.
Upload your solution to your server. Enter the URL below.
(Log in to enter your solution to this exercise.)
Summary
On this page, you learned how to:
- Create horizontal nav bars with text.
- Position horizontal nav bars.
- Create horizontal nav bars with images and hover effects.
What now?
Put your skills to work on your own site.