CSS Vertical Nav Bar

Get Started
1

In “CSS Mastery: Advanced Web Standards” book I found a method to create a vertical navigation bar.
This is the HTML markup - is pretty simple, right? :slight_smile:

<ul> 
  <li><a href="home.htm">Home</a></li> 
  <li><a href="about.htm">About</a></li> 
  <li><a href="services.htm">Our Services</a></li> 
  <li><a href="work.htm">Our Work</a></li> 
  <li><a href="news.htm">News</a></li> 
  <li><a href="contact.htm">Contact</a></li> 
</ul>

Now, I remove the default list bullet. Also, I reset the “margin” and “padding” to 0.

ul { 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
}

I create a button-like hit are for the anchor element. To achieve this, I set the anchor element to display as a block:

ul a { 
  display: block; 
  width: 200px;
  height: 40px; 
  line-height: 40px; 
  color: #000; 
  text-decoration: none; 
}

I use a single image to set the menu state (the normal state use the left area, and the active state use the right area). This method is called: “pixy rollover”.

Now this is the complete CSS:

ul a {
      background: #94B8E9 url("pixy-rollover.gif") no-repeat left bottom;
      text-decoration: none;
      text-indent: 50px;
      line-height: 39px; /* The original size is 40px, but reduced with 1 px */
      display: block;
      height: 39px; /* The original size is 40px, but reduced with 1 px */
      width: 200px;
      color: #000;
}

li.first a {
     line-height: 40px;
     height: 40px;
}
    
a:hover, .selected a {
    background-position: right bottom;
    color: #fff;
}

If you don’t really understand my code, please download this file: verticalnav.zip

The code work fine in all browser but I need a 2px space between anchor elements.
To do this, I need to modify the CSS to something like this :

ul a {
      background: #94B8E9 url("pixy-rollover.gif") no-repeat left top;
      text-decoration: none;
      text-indent: 50px;
      line-height: 40px;
      display: block;
      height: 40px;
      width: 200px;
      color: #000;
      margin-bottom: 2px;
}

Please notice the 2px margin-bottom was added, also I set line-height and width to 40px.
My CSS code work fine in Firefox but not work in IE6. I solve the problem when I replace: “margin-bottom: 2px” with “margin: 2px” and everything works fine in IE6.

I want a space only between the anchor element, but I see “margin-bottom” is not the ideal solution. Anyone know another solution to do this? Thanks!

2

Hi,

I was bale to create the vertical nav successfully using your code for a website that I am developing. However, I want to insert text. However, the text starts after the end of vertical navbar. I am attaching the gif for reference. Can you please advice how can I get the text right next to the “Home” Navbar?

Thanks
Vinay