HTML Sidebar Navigation
By dfager
Body of HTML Page
To add a simple sidebar menu type of navigation to your web site, cut and past the following HTML and CSS onto a blank Notepad page. Some knowledge of HTML is required to customize the settings and apply your own links. I don't cover how to link pages is this article. Simply substitue your own links in the unordered list.
Beginning with the body of the HTML page:
Create a navigation div by opening a DIV tag and give it name, in this instance the name is navigation. After DIV write id=”navigation”. Use an unordered list to make the contents of the side navigation bar. A table can also be used. In the list items insert the link to web addresses or location anchor if you want to move within the same page.
After the unordered list is complete, remember to close the DIV tag. The DIV tag and the unordered list within in will go between the BODY tags. This is an example:
<body>
<div id="navigation">
<h2>Contents</h2>
<ul>
<li><a href="#link 1">Introduction</a></li>
<li><a href="#link 2">Good</a></li>
<li><a href="#link 3">Bad</a></li>
<li><a href="#link 4">Ugly</a></li>
<li><a href="#link 5">Sources</a></li>
<li><a href="#link 6">Links</a></li>
</ul>
</div>
</body>
</head>
</html>
HTML and CSS
 | Amazon Price: $0.99 |
 | Amazon Price: $15.11 List Price: $29.99 |
 | Amazon Price: $19.95 List Price: $39.99 |
 | Amazon Price: $21.19 List Price: $39.99 |
 | Amazon Price: $5.44 List Price: $29.99 |
 | Amazon Price: $0.99 |
 | Amazon Price: $20.50 List Price: $39.99 |
 | Amazon Price: $18.00 List Price: $34.99 |
Head of HTML Page
This portion of the HTML will appear at the top of the file, above the body.
To put a CSS style sheet in your web page, insert a STYLE tag, within the tag write: type=”text/css”. The STYLE tag goes within the HEAD tags and after theTITLE tag.
Close the STYLE tag before the close of the HEAD tag. The start of the STYLE tag should look like this: <style type="text/css"> The rest is an example of the CSS code between the STYLE tags:
<html>
<head>
<title></title>
<style type=”test/css”>
#navigation {
width: 150px;
background-color: #000FFF;
color: #FFFFFF;
float: left;
margin-left: 7px;
margin-right: 6px;
}
#navigation h2, #navigation hr {
display: block
padding: 10px 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000FFF;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#navigation ul li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000FFF;
}
#navigation ul li a {
padding: 8px;
display: block;
background-color: #000FFF;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000FFF;
}
#navigation ul li a:hover {
background-color: #6495ED;
}
</style>
</head>
I reference the DIV tag in general with just #navigation. I give it a width in pixels, background color is blue, words are white. Float-left means that paragraphs in the body after the navigation will float to the side of the navigation. Margin-left refers to the space to the left before the navigation square.
The #navigation h2 and navigation hr refers to the larger bold title I gave at the top of the navigation bar and hr refers to horizontal rule. Since in my example I made the horizontal rule the same color as the background, it doesn’t show up. I left the code here so that black can be added later (000000). I have display in block, this will give the text here a block appearance.
The navigation ul refers to everything within the ul tags. The text starts at the very left edge because the padding is 0. There is no numbers or bullets because the list-style is none.
The navigation ul li refers to the list items, which are the links. If the border bottom color was black, you could see a line between each list item.
The navigation ul li a refers to how the links are displayed. They are displayed in block style with the same color background as the rest of the navigation block.
The navigation ul li a:hover refers to the background color of the link block when the mouse is over the list item. This is a lighter color blue.
Fenixfan 19 months ago
Great info. I love html and am currently designing a blog site. Maybe I can find more info from you.