Hello! This tutorial will show you how to create a simple vertical CSS navigation which will fit nicely into a sidebar.  You will learn how to use an unordered list coupled with CSS to create an appealing nav bar for your site.

Step 1: Using HTML to structure the navigation menu.

First of all create a new DIV. Inside that DIV place an unordered list with a few list items in it.  Inside each of these list items you should place the links to your pages.

Code:

<div id=”navMain”>
<h2> Categories </h2>
<ul>
<li><a href=”#”> Home</a></li>
<li><a href=”#”> Visit our site </a></li>
<li><a href=”#”> About</a></li>
<li><a href=”#”> Newsletter</a></li>
</ul>
</div>

The menu so far:

Unordered list

Step 2: Styling the navigation menu using CSS.

No explanation required here, comments in the code should be clear enough.

Code:

#navMain {
color:#c3c3c3;
font-family:Tahoma, Geneva, sans-serif;
/* Change color and font*/


#navMain h2{
font-family:Trebuchet MS1, Helvetica, sans-serif;
} /*Change font of the title*/


#navMain ul{
padding:0;
margin:0;
margin-left:25px;
} /*Reset the default padding/margin and set it as required*/


#navMain ul li a{
text-decoration:none;
color:#c3c3c3;
} /*Change color of link text and remove underline*/


#navMain ul li a:hover{
color:#e0993e;
} /*Change color of hover text*/

The menu so far:

You might notice ive added a couple of extra links in here, but dont worry about that too much.

UL with CSS

Step 3: Finishing touches

Download the following image by right-clicking on it and pressing save-as, alternatively you can download the arrow here.


Save the arrow into the same folder as your navigation menu files.

Edit the CSS:

Add the parts in bold to your CSS.

#navMain ul{
padding:0;
margin:0;
margin-left:33px;
list-style: url(arrow.png);
} /*Reset the default padding/margin and set it as required*/

#navMain {
color:#c3c3c3;
font-family:Tahoma, Geneva, sans-serif;
background:#eff3f0;
border:thin solid #e8ece9;
width:200px;
padding:14px;
} /* Change color and font*/

#navMain h2{
font-family:Trebuchet MS1, Helvetica, sans-serif;
margin-top:0;
} /*Change font of the title*/

Download the following image by right-clicking and saving as, alternatively click here.

Nav line

Save the image into the folder with the rest of the files.

Edit the HTML to add the new image in after the categories title:

<div id=”navMain”>
<h2> Categories </h2>
<img src=”line.png”/ alt=”line” class=”navMainLine”>
<ul>

Move the image into place using CSS:

Again, add the parts in bold:

#navMain {
color:#c3c3c3;
font-family:Tahoma, Geneva, sans-serif;
background:#eff3f0;
border:thin solid #e8ece9;
width:200px;
padding:14px;
position:relative;
} /* Change color and font*/

.navMainLine {
position:absolute;
top:48px;
} /* Position the image relative to its container. In this case, 48px from the top*/

The finished menu:

Styled CSS menu


Category: CSS, CSS Navigation

About the Author

26 Year old university student living in the UK. Currently studying Web Design & development.

One Response to Create a sidebar navigation using CSS.

  1. [...] tutorial is hosted on our old site, to view it visit the following link: http://weebtutorials.com/theBlog/?p=103 Read more from Lists/Navigation Click here to cancel [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>