How to Create a Vertical Navigation Bar Using CSS

Creating a horizontal navigation bar will add functionality to your site and help keep it organized. It can also add value in terms of SEO. It is a simple process that can be done using CSS, or Cascading Style Sheets.

Difficulty:

Moderate

Instructions

How to Create a Vertical Navigation Bar Using CSS

1. Decide what is going into your vertical navigation bar. Which pages are most relevant, and most visited after your horizontal or main navigation items?

2. Open your web page in notepad or text editor and type in the following code where you want the list to begin: <div id="navcontainer"> <ul id="navlist">.

3. Add your first list item. This will be the first vertical navigation button on the page os it has the "id" of "current". Type <li id="active"><a href="first-nav-page-name.html" id="current">Navigation term</a></li>

4. Add the rest of the navigation items using the <li> and </li> tags, with a hyperlink. Type <li><a href="second-nav-page-name.htm">Nav term 2</a></li>, <li><a href="third-nav-page-name.html">Nav term 3</a></li>, etc.

5. After the last navigation tag, end the list with </ul> and then </div>.

6. Create CSS styles for this list by adding properties to you CSS sheet. Just open the CSS folder, and download your CSS style sheet, then add a style. For instance, if you want to add square bullets, type #navlist li { list-style-type: square; } into your style sheet, at the top. #navlist li defines the navigation bar list object.

Tips & Warnings

• Creating decorative vertical navigation lists is a skill that requires more knowledge of CSS, but simple lists with interesting styles can be found right online.

• Do not make your list too long, and always include the nav tags, as well as the <li> and </li> tags.

Resources

• Copy unique styles for vertical lists
• A more complex vertical list with drop down menu