Vertical navigation bars

See more about:

Where are we?

This lesson is about linking pages together. You know how to make basic links, and style them. Let’s put this together to create a vertical navigation bar.

Once you’ve finished this lesson about links, you’ll have all you need for a basic Web site.

This page’s goals

By the end of this page, you should be able to:

  • Create vertical nav bars with text.
  • Position vertical nav bars.
  • Create vertical nav bars with images.
  • Create image nav bars with hover effects.

Vertical nav bars with text

A navigation bar (nav bar) is a set of links shown together as a visual block. Each link is sometimes called a button.

The simplest nav bars are just text links. Here’s an example:

<p>
  <a href="dummy.html" title="Back to the home page">Home</a>
</p>
<p>
  <a href="dummy.html" title="The basics of dog nutrition">The basics</a>
</p>
<p>
  <a href="dummy.html" title="Articles on dog nutrition">Articles</a>
</p>
<p>
  <a href="dummy.html" title="Products we recommend">Products</a>
</p>
<p>
  <a href="dummy.html" title="Our bloggy nutrition updates">Blog</a>
</p>

Figure 1. Nav bar with paragraphs

You can try the page. (The links only go to a dummy page, as you can see from the code.)

It doesn’t look good. There’s too much space between the links, for starters.

We could style the paragraphs, or use <br> instead of <p></p>. But there’s a better way.

Unordered lists are convenient for vertical nav bars. Here’s the same menu as a list.

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

Figure 2. Nav bar as a list

You can try the page. It will look like this:

Rendered unstyled list

Figure 3. Rendered unstyled list

Exercise: Unstyled vertical navigation

Get started with a vertical nav bar for Puppy Swarm. It should look like this:

Vertical nav bar

You can just link each one to a dummy page.

(Log in to enter your solution to this exercise.)

Suppose we wanted the menu to look like this:

Rendered styled list

Figure 4. Rendered styled list

We would need to apply styles to the entire menu (like the border), as well as to the individual menu elements (like removing the underline). The

<ul>
<li></li>
</ul>

structure suits this. We can style the entire menu by styling the <ul>. We can style the individual links by styling the <li>s. There are other ways to do things, but many Webers find unordered lists convenient for vertical menus.

Let’s put Figures 3 and 4 side-by-side, and identify the differences between them:

Differences

Figure 5. Differences

The page background color is yellow. The menu has a dotted blue line around it, a blue background, and gaps between the menu and the top and left. The links have some font styling, no dot, and gaps between them and the menu borders.

Here’s some CSS that will do the job:

body {
  font-family: Verdana,  Helvetica, sans-serif;
  font-size: 14px;
  background: #FFFFEE;
}
.vertical_menu {
  border: 1px dotted blue;
  background-color: #EEFFFF;
  margin: 5px;
  padding: 5px;
}
.vertical_menu li {
  list-style: none;
  margin: 5px;
}
.vertical_menu li a {
  text-decoration: none;
  color: black;
}
.vertical_menu li a:hover {
  text-decoration: underline;
}

Figure 6. Nav bar CSS

Let’s go over it.

Lines 1 to 5 set the font face and size, and background color for the entire page. Unless overridden, everything on the page will look like this.

Lines 6 to 10 style the menu block. They add the border and background color. Lines 9 and 10 add spacing around the menu, and between the menu’s border and its contents.

Lines 12 to 14 style the <li>s. Note the selector: .vertical_menu li. This applies to <li> elements inside elements with the class vertical_menu. The rule doesn’t apply to other <li> elements on the page. list-style: none; removes the dot that usually appears to the left of list elements.

The rule in lines 16 to 19 applies to <a>s that are inside <li>s that are inside elements with the class vertical_menu. It removes the underlining, and sets the text color to black, rather than the default link color (usually blue).

The rule in lines 20 to 22 says what happens when the mouse hovers over a link in a menu. It gets underlined.

You can try the result. Much of w00f!

Exercise: Styled vertical navigation

Create a styled vertical nav bar for Puppy Swarm. It should look like this:

Vertical nav bar

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.

Hint: remember that an <li> can use the hover pseudo-class.

Upload your solution to your server, and put the URL below.

(Log in to enter your solution to this exercise.)

Positioning vertical nav bars

Vertical nav bars usually appear at the left or right of Web pages. They also are just wide enough to show their links.

Suppose we want this:

Menu on the left

Figure 7. Menu on the left

The menu is to the left of the content, and is narrow. Easy! Just make a few changes to Figure 6.

.vertical_menu {
  float: left;
  width: 90px;
...
}
...
<h1>Dog Land</h1>
<ul class="vertical_menu">
...
</ul>
<p>Lorem ipsum dolor sit... 

Figure 8. Floaty float

You can try it.

Line 2 is the key. It changes the positioning of the element.

You give HTML to a browser, and it renders it. Normally, the browser makes content flow down the page from top to bottom, in the order it appears in the HTML. So if you have:

<p id="para1">I am evil!</p>
<p id="para2">I like donuts!</p>

The user will see para1 on the screen, and below that, para2, like this:

Evil donuts

Figure 9. Evil donuts

This is called static positioning, and is the browser default. The order of each element on the page matches its order in the HTML.

If I remove the float line from Figure 8, this is what I get:

Floatless

Figure 10. Floatless

You can try it. You’ll see the usual static flow.

float – and other positioning rules – let you change that. float takes an element out of flow, draws it, and then resumes drawing the other elements around it. float: left; moves an element to the left of the browser window. float: right; moves an element to the right.

Put the earlier figures one under the other, and you can easily see the difference:

Floatless

Menu on the left

Figure 11. The menus

In the normal flow, the menu appears between the header (Dog Land) and the main content (Lorem ipsum). When the menu is floated, it gets “pinned” to the edge of the window. The element below the menu moves up, and wraps around it.

Time for a w00f.

W00f!

Exercise: Floated styled vertical navigation

Float the Puppy Swarm nav bar:

Floated nav bar

Upload you solution to your server, and enter the URL below.

(Log in to enter your solution to this exercise.)

Lots o’ content

But there’s a problem. Suppose I add lots of content to the page in Figure 8. It would look like this:

Lots of content

Figure 12. Lots of content

The content wraps around the nav bar. Sometimes this is what you want. But you might want this:

Content does not wrap

Figure 13. Content does not wrap

In Figure 13, the nav bar takes its own column on the page.

How to do this? The easiest way is to wrap the main content in its own <div>, and give the <div> a margin.

.vertical_menu {
  float: left;
  width: 90px;
...
}
...
#main_content {
  margin-left: 120px;
}
...
<h1>Dog Land</h1>
<ul class="vertical_menu">
...
</ul>
<div id="main_content">
  <p>Lorem ipsum dolor sit... 
  ...
</div>

Figure 14. Floaty float nav bar in its own column

This pushes the content to the left, relative to its container. The <div>’s container is the <body>. So each element in the <div> (e.g., each <p> in the <div>) has the same left indent, regardless of whether there is nav bar stuff to the left of it or not. You can try it.

Exercise: Fixing your vertical nav bar

You created a vertical nav bar in the previous exercise. Copy your solution to another page. Then adds lots of content to it. Verify that the content wraps around the nav bar, like this:

Wrappy content

Fix it so that the main content of the page does not wrap around the nav bar. It should look something like this:

Wrapless content

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Vertical nav bars with images

Sometimes you want to use images instead of text. Let’s make a menu like this:

Vertical nav bar with images

Figure 15. Vertical nav bar with images

Once you understand how to make a text nav bar, making one with images is fairly easy.

First, you need to get the images for the buttons. Then you can put them into a menu.

Where to get button images?

You can make them your yourself, or you can have a program generate them for you. Let’s use the latter option.

ButtonGenerator.Com is a useful site. You select an image, enter some text, and it will create some nice buttons. That’s what I did to make the images in Figure 15.

The HTML

As a reminder, here’s a link from a text nav bar:

<a href="dummy.html" title="Back to the home page">Home</a>

Replace the text with an image:

<a href="dummy.html" title="Back to the home page"><img src="button-images/home.png" alt="Back to the home page"></a>

Don’t forget the alt, for visually impaired users with screen reading software. Also, Google uses the alt attribute when it lists your image in its search engine. Google’s search software can’t figure out the meaning of picture from their contents. Not even Google’s computers are that smart. Yet. So instead, Google’s software uses the alt text to decide what the image is showing.

Images that are in links have a border by default:

Button with an evil border

Figure 16. Button with a border

Use border:none; in your CSS to suppress the border.

Here’s the code so far:

<!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>Vertical nav bar</title>
    <style type="text/css">
      body {
        font-family: Verdana,  Helvetica, sans-serif;
        font-size: 14px;
        background-color: #FDF4DE; 
      }
      .vertical_menu {
        float: left;
        width: 145px;
        background-color: #F7DB94;
        padding: 5px;
        margin: 5px;
      }
      .vertical_menu li {
        list-style: none;
        margin: 5px;
      }
      .vertical_menu li a img {
        border: none;
      }
    </style>
  </head>
  <body>
    <ul class="vertical_menu">
      <li>
        <a href="dummy.html" title="Back to the home page">
          <img 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 src="button-images/basics.png" alt="The basics of dog nutrition">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Articles on dog nutrition">
          <img src="button-images/articles.png" alt="Articles on dog nutrition">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Products we recommend">
          <img src="button-images/products.png" alt="Products we recommend">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Our bloggy nutrition updates">
          <img src="button-images/blog.png" alt="Our bloggy nutrition updates">
        </a>
      </li>
    </ul>
  </body>
</html>

Figure 17. HTML for vertical nav bar with images

As you can see from lines 32, 37, 42, and so on, I put all the button images in their own directory, called button-images. Each image is a PNG file, named after the text on the button. So articles.png has the text “Article.” Neither browser nor server care what I call the file. But it’s easier to keep things straight if I name them consistently.

You can try out the vertical nav bar with images.

Adding hover effects

The last thing we’ll do is add a hover effect, so that when the user puts the mouse over a button, the image changes.

Here’s what we want to achieve. Move your mouse over the image below, and off again.

Home

Figure 18. Hover effect

Notice how an arrow appears when the mouse moves over the button.

More buttons

We need two versions of the button image:

  • Without the arrow – the normal button state.
  • With the arrow – shown when the mouse hovers on the button.

I had already made the first one:

Home button, no arrow

I called it home.png, as you can see on line 32 in Figure 17.

I went back to ButtonGenerator.Com to make the second image. ButtonGenerator lets you add an icon to a button. I chose the arrow. Here’s what I created:

Home button, with arrow

I called this one home-over.png.

I made an X-over.png image for every button: basics-over.png, etc. I put them in the same directory as the other button images.

How to get the X-over.png images to show? There are many ways to do it. Let’s see one way using jQuery.

jQuery over and out

Here’s what I want to do for the Home button:

  • When the mouse goes over the image, show home-over.png.

Home button, with arrow home-over.png

  • When the mouse leaves the image, show home.png.

Home button, without arrow home.png

We need to attach code to the Home button. So let’s start by giving the button an id so we can refer to it:

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

Figure 19. Adding an id

I added an id of home_button.

Now I can add an event to the img. Remember that an event is something that happens to an element. For example, click() happens when the user clicks on an element with the mouse.

jQuery has a hover() event that’s just right for the job. hover() actually captures two events. Here’s how it’s used:

$(target element).hover(
  function(){
    Code to run when the mouse goes over the target element.
  },
  function(){
    Code to run when the mouse leaves the target element.
  }
);

Figure 20. hover() event

Line 1 tells jQuery which element is having the event attached to it. The code in the first function (lines 2 to 4) runs when the mouse goes over the element. You can put as many lines of code as you want. The code in the second function (lines 5 to 7) runs when the mouse leaves the element. Again, you can put as many lines of code as you want.

I named the button home_button. So the code should do this:

For home_button:
  Over: Make home_button show home-over.png.
  Leave: Make home_button show home.png.

Figure 21. hover() event pseudocode

What now? Well, I know the name of the image that should have the event. So let me change Figure 20 to:

$("#home_button").hover(
  function(){
    Make home_button show home-over.png.
  },
  function(){
    Make home_button show home.png.
  }
);

Figure 22. Improved hover() event

Remember that $("#home_button") refers to the element with the id of home_button. Don’t forget the #.

But how can I make home_button show home-over.png? Let’s look at the HTML again – it’ll give us a clue. The HTML is:

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

Figure 19 (again). Adding an id

Line 2 shows how you tell an <img> what image to show: you set the src attribute to the path to the image file. If I changed the src attribute, <img> will show a different image.

I can change any attribute of any element with the attr() function. I tell it what attribute I want to change, and what the new value is, and jQuery will change the attribute.

For example, this:

$("#thing").attr("class", "evil");

would set the class attribute of the element thing to evil. This is a useful technique for changing the look of something on the fly.

This:

$("#tomato").attr("title", "This is a fruit");

would change the title attribute of the element tomato.

Since src is just another attribute, we could do this:

$("#home_button").attr("src", "home-over.png");

Actually, this won’t quite work, because I put the image in a subdirectory. The code should be:

$("#home_button").attr("src", "button-images/home-over.png");

This is what I end up with:

$('#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');
  }
);

Figure 23. hover() event code

Events are usually assigned in the page’s ready() event. That is, after the page is loaded (i.e., ready), that’s when the hover() code should be bound to home_button. So the script section of the page will be:

<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');
      }
    );
  });
</script>

Figure 24. hover() event – even better!

What about the rest of the buttons? Create the with-arrow images, and change the code.

$('#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');
  }
);
...
<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>

Figure 25. More hover() code

You can try the final vertical nav bar with images.

W00f!

Exercise: Vertical nav bar with images

Create a vertical nav bar for Puppy Swarm. It should look like this:

Vertical nav bar

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.

Home Home over

Services Services over

Products Products over

Puppies Puppies over

Contact Contact over

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 vertical nav bars with text.
  • Position vertical nav bars.
  • Create vertical nav bars with images.
  • Create image nav bars with hover effects.

What now?

Now let’s look at horizontal nav bars. With all the work we did on the vertical nav bars, the horizontal ones will be easy.


How to...

Lessons

User login

Log in problems? Try here


Dogs