Websites with very good navigation system allows readers to gain more access to site’s content without the hassle that is usually associated with it. Realizing this, majority of distinguished websites have incorporated effective navigation system.
In case you are wondering how people make effective navigation systems, you might want to consider reading this article completely.
This article is a portion of Rachel Andrew’s discussion on how to make navigation system at sitepoint.com. The images are also reproduced so readers can easily understand the discussion and the codes as they rendered. All images and codes are credited to her.
A navigation system is simply a list of places that users can visit on the site. Therefore, an unordered list is the ideal way to mark up your navigation. The navigation in Figure 1 is marked up as a list, and styled using CSS, as you can see.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Lists as navigation
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”listnav1.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
Step by Step
Step 1
To create navigation based on an unordered list, first create your list, placing each navigation link inside a li element:
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
Next, wrap the list in a div with an appropriate ID:
div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
As Figure 2 shows, this markup looks fairly ordinary with the browser’s default styles applied.
The first thing we need to do is style the container in which the navigation sits — in this case, #navigation:
#navigation {
width: 200px;
}
I’ve given #navigation a width. If this navigation system were part of a CSS page layout, I’d probably add some positioning information to this ID as well.
Next, we style the list:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
As Figure 3 illustrates, the above rule removes list bullets and the indented margin that browsers apply, by default, when displaying a list.
The next step is to style the li elements within #navigation, to give them a bottom border:
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
Finally, we style the link itself:
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
Most of the work is done here, creating CSS rules to add left and right borders, remove the underline, and so on. The first property declaration in this rule sets the display property to block. This causes the link to display as a block element, meaning that the whole area of each navigation “button” is active when you move the cursor over it — the same effect you’d see if you used an image for the navigation.
Can I use CSS and lists to create a navigation system with subnavigation?
Sometimes, more than one navigation level is necessary — but is it possible to create multi-leveled navigation using styled lists in CSS?
Solution
The perfect way to display subnavigation within a navigation system is to create a sublist within a list. The two levels of navigation will be easy to understand when they’re marked up in this way — even in browsers that don’t support CSS.
To produce multi-level navigation, we create a nested list and style the colors, borders, and link properties of the new list’s items:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”listnav_sub.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a>
<ul>
<li><a href=”#”>Starters</a></li>
<li><a href=”#”>Main Courses</a></li>
<li><a href=”#”>Desserts</a></li>
</ul>
</li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
The result of these additions is shown in Figure 4.
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Leave a reply