Styling Page Navigation (Lists)
There are numerous ways to style the unordered lists that we use for page navigation on our sites. In this exercise, we will look at an online resource that will simplify this process and at the same time give us some creative input. Some students have asked me about using images for navigation elements. While I won't tell you you can't use them, I will say that using text-based navigation is more accessible and easier to maintain. You are not required to use these styles for the navigation elements on your page.
When deciding on what approach to use for you navigation there are several criteria you should evaluate before implementing the technique.
- Is it cross-browser compatible?
- If it uses Javascript for animation purposes, does it still function with Javascript disabled? (Graceful Degradation)
- Is it easily updateable?
- Is it scalable?
List-o-matic
- Visit the following site:
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/ - Follow the instructions to create the navigation.
- Open the index.html file located in the Personal Web site Directory
- Paste the generated html in the navigation <div>
<div id="navigation">Paste HTML Here</div>
- Open the text.css file located in
Personal Website/assets/style - Paste the generated CSS into the text.css file
- Save both files
More Examples
- http://users.tpg.com.au/j_birch/plugins/superfish/#sample1
- http://kailoon.com/css-sliding-door-using-only-1-image/
- http://www.htmldog.com/articles/suckerfish/dropdowns/
- http://articles.sitepoint.com/article/navigation-using-css
- http://css.maxdesign.com.au/listamatic/index.htm
- http://css.maxdesign.com.au/listamatic2/index.htm
