CSS Interface Components, or Navigation, is achieved through the styling of list elements. Similar to last week's lecture, this lecture is written in the form of a tutorial which walks you through two hands-on lessons for building a vertical and a horizontal navigation menu. You are encouraged to create the navigation menus while following the steps in these tutorials.
The tutorial in this section is an adapted version of Lesson 15 from the CSS in 10 Minutes text by Russ Weakly. The primary change I've made to his code is that I wrapped a DIV element around his styled list. The styling I have applied to the vertical menu is slightly different than the styling in his material.
While there is a bit more markup, I did this because it offers more control over the placement and styling of the navigation components within the page layout. This navigation container DIV can be positioned and styled independently from the components inside the DIV (the list/menu) and separately from other major areas of the page - the header, footer, and columns.
Step 1: Set Up the Page
- Create a new document based upon the lesson template.
- You may use either an embedded or external style sheet.
The first thing we will do is set the page padding and margins to 0. We'll set the font size and page colors as well:
body {
margin: 0;
padding: 0;
font-size: 100%;
color: #000;
background-color: #FFF;
}
Step 2: Create the List
- In the HTML document body, create a basic unordered list.
The list items can be different in number and content than what I have used in the example below. Note that I used an empty anchor (#) as the href destination. We are only concerned with creating the navigation framework for now. You will need to replace the empty anchors with functioning URLs if/when you deploy this menu in your final project or any other web page you may build using this navigation template.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
Step 3: Create the "sidebar": DIV
- Wrap the list inside a DIV element and give it an ID of "sidebar":
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Step 4: Style the "sidebar": DIV
- Apply the following styling to the sidebar DIV.
For this tutorial we will set the position property to absolute. The top and left positioning values may need to be adjusted to make room for a page header or horizontal menu such as the one we will create in the next part of the lecture. I have added a green border to the DIV element to make it easier to identify the sidebar DIV boundaries as we work through the tutorial.
div#sidebar {
position: absolute;
top: 46px;
left: 36px;
width: 6em;
border: 1px solid green;
}
At this point your list should look similar to the example below; a normal list displayed in an absolutely positioned DIV element.
layout from last week's lecture.