Advanced Bulleted-List Menu - Adding CSS
(Page 4 of 7 )
Before discussing how to draw our menu, we should discuss the styles and client-side functionality that we'll be taking advantage of. Both the JavaScript and the CSS for this menu are extremely simple.
I've saved the following CSS code in a file called style.css, which isn't necessary but makes the overall code less bulky.
ul {
margin-left: 0;
padding-left: 1em;
}
li {
list-style-type: disc;
list-style-image: url(down.png);
}
li.file {
list-style-type: square;
list-style-image: url(right.png);
}
a:link,
a:active,
a:visited {
color: #000;
font-family: Verdana;
font-size: 13px;
text-decoration: none;
background-color: #FFF;
display: block;
width: 125px;
border: 1px solid #CCC;
}
a:hover {
background-color: #CCC;
}
a:link.live,
a:active.live,
a:visited.live,
a:hover.live {
border: 1px dotted #808080;
} |
In the ul definition above, we instruct our bulleted-list to un-indent a little bit. By default, the indentation is a little more than we want for a decent sized menu that contains more than one sub-tree.
The li definitions say that we want to use our own images rather than the default circles and squares. The images I am using are down.png: 
and right.png: 
However you're welcome to use your own if you like.
Next we setup how our hyperlinks should be styled, hover is separated for a nice mouseover effect. Then we style hyperlinks with the class attribute "live" which is the menu item currently activated (or the page we're currently viewing).
Stylesheets are capable of so much, as seen here they can completely change the look of a dull bulleted-list into a very pretty menu. You could even modify the code to display the menu horizontally instead of vertically. But, don't do that because we're not finished yet!
The stylesheet can be included into our page as follows.
<link rel="stylesheet" title="default" href="style.css" /> |
Next: Adding JavaScript >>
More Navigation Usability Articles
More By notepad
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
