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?
- Is it easily updateable?
- Is it scalable?
- Visit the following site:
- 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
- Paste the generated CSS into the text.css file
- Save both files