Implementation
Creating Menus
Vertical Navigation
Why use a List?
At its most basic level, site navigation is simply a list of links to other pages in the site. So, a standard HTML list is the ideal starting point.
<ul id="navigation">
<li>Home </li>
<li>About </li>
<li>Services</li>
<li>Staff</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
Styling the List
To style the list, you will need to use selectors that target the <ul>, <li>, and <a> elements. To make sure you do not target every instance of these elements on the page, you will need to include the unique identifier, navigation, within each selector. Here are the selectors you will use for this lesson.
ul#navigation {...}
ul#navigation a {...}
ul#navigation a:hover {...}
ul#navigation li {...}
Styling the <ul> element
Most browsers display HTML lists with left indention. To set this indentation, some browsers use padding and others use margins. To remove the left indention consistently across all browsers, set both padding-left and margin-left to 0 on the <ul> element.
ul#navigation { margin-left: 0;
padding-left: 0;}
To remove the list bullets, set the list-style-type to none.
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;}
Styling the <a> Element
Text links are generally only active when you mouse over the actual text area. You can increase this active area by applying display: block; to the <a> element. This will change it from inline to block level and the active area will extend to the full width of the list item.
To remove the underlines from the links, use text-decoration: none; .
ul#navigation a { display: block;
text-decoration: none;}
To set the background color you can use the shorthand rule background: #036; . This color can be changed to set your needs.
ul#navigation a { display: block;
text-decoration: none;
background: #036;}
To set a padding for an <a> element you can use a shorthand declaration. For example if we want a .2 em top padding and .5em bottom padding. This will give the user a bigger area in which to select the link. You can use:
ul#navigation a { display: block;
text-decoration: none;
background: #036;
padding: .2em .5em;}
Setting Border
To provide some space in between the list items, you can add a border on the bottom of each list item you can use:
border-bottom: 1px solid #fff
This color of #fff will help distinguish the different links.
ul#navigation a { display: block;
text-decoration: none;
background: #036;
padding: .2em .5em;
border-bottom: 1px solid #fff;}
You can set the width of the <a> element by adding width: 6em to your code. Ofcourse this width can be chainged to suit your needs.
ul#navigation a { display: block;
text-decoration: none;
background: #036;
padding: .2em .5em;
border-bottom: 1px solid #fff;
width: 6em;}
Adding A Hover Effect
To this set the background to #69C and the color to #000 to
ul#navigation a:hover {...}
ul#navigation a:hover { background: #69C;
color: #000;}
Styling the <li> element
You might notice there are some slight gaps between the list items in some versions of IE or Opera . This can be overcome by setting the <li> element to display: inline.
Going Horizontal
We will use the same code we have been using and change the code in order to make it horizontal.
ul#navigation {...}
ul#navigation a {...}
ul#navigation a:hover {...}
ul#navigation li {...}
<ul id="navigation">
<li>Home </li>
<li>About </li>
<li>Services</li>
<li>Staff</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
To remove indentation you can use:
ul#navigation { margin-left: 0;
padding-left: 0;}
To remove the list bullets, set the list-style-type to none.
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;}
Add a background:
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;
background: #036;}
To float the <ul>, use float: left. You will also need to set a width. In this case, we will use 100% becuase we want the list to spreadacross the full width of the page.
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;
background: #036;
float: left;
width: 100%}
Styling The <li> Element
To make sure the list items are displayed in a single line, the <li> element must be set to display: inline; .
ul#navigation li { display: inline; }
Styling the <a> Element
You can increse the active area of text links by applying display: block; to the <a> element. This will change it from inline to block level and allow you apply padding to all sides of the element.
Set the <a> element to display: block; so that padding can be applied to all sides. This will give the element additional width and height, increasing the clickablae area.
The <a> element should then floated, so that each list item moves into a sing line butting againg the previous item.
ul#navigation a { display: block;
float: left;}
Next add some padding using the padding delcaration. You can use .2em for top and bottom padding and 1em for left and right padding.
ul#navigation a { display: block;
float: left;
padding: .2em .9em;}
To seperate each list item , a white line divider will be added to the end of each item This is done by adding a white border to the right side of each list item, using border-right: 1px solid #fff; .
ul#navigation a { display: block;
float: left;
padding: .2em .9em;
border-right: 1px solid #fff;}
Adding A Hover Effect
To this set the background to #69C and the color to #000 to
ul#navigation a:hover {...}
ul#navigation a:hover { background: #69C;
color: #000;}
