Simple CSS Vertical Navigation using a list
Haven’t posted much on web design or CSS for a while, so I thought I’d jot down something that (a) readers will find useful and (b) something I can refer to in the future. A nice way to create a navigation piece in a web page is to use the good old HTML list tag. Coupled with some fairly basic CSS you can achieve excellent results (see above).
Step 1: Download (right-click|save as) nav.html and save it to your desktop (or folder of your choice). We’ll edit this file throughout the tutorial until we get to the finished navigation. I’ve started by including a universal css class (indicated by *), which resets padding and margins to zero on all elements within the HTML document. If you open nav.html in your browser of choice (mine is Firefox), you should see something like the following image. Naturally, you won’t see the CSS information - I’ve only included the code to help explain each step of the tutorial.
Step 2: Add the following code to nav.html (underneath the universal css class mentioned in Step 1). This sets the default font-size, adds 20 pixels of padding (so the navigation doesn’t hug the top and side of the browser window), changes the background color to a light gray and the body font to a darker gray. We’ll style the hyperlinks in a later step. Refresh your browser window (F5) and you should see the following:
Step 3: Now we create a unique id sidenav to house the list. Setting the width to 200 pixels naturally restrains the width of the navigation block to (yes, you’ve guessed it) 200 pixels! Add the code and refresh your browser. The only change you should see is the words “Navigation” and “header” now wrap onto 2 lines because they’re trying to fit inside the 200 pixel block.
Step 4: Next up we apply a simple style to the level one heading (i.e. the words “Navigation heading”). We change the font to Trebuchet, make it bold and switch the color to a neutral blue. As a final touch we add a 10 pixel margin underneath the heading. Looking better already isn’t it? Don’t forget to F5 once you’ve added the code.
Step 5: Now we style the unordered list itself. We remove the default bullets to the left of the hyperlinks by declaring list-style: none, add a dashed line as a background image (which appears at the top of the list) and add a 20 pixel bottom margin to keep other elements away from the navigation. Add the code, refresh the browser….
Step 6: To give each individual list within the unordered list a little breathing space, we add a 250% line height in the font class. This time we add a gray dashed line as a background image which helps distinguish one link from another. Add the code and refresh.
Step 7: Next step is to style the hyperlinks within the list. 19 pixels of padding indents the navigation nicely. The default underline is removed with text-decoration: none and we change the color of the link to a dark gray.
Step 8: The final touch is to add back some interactivity for the user. When a link is moused-over, I’d like to see a color change and the underline return (text-decoration: underline). Add the code, refresh your browser one last time and you’re done.
Hopefully you were able to follow along, and the tutorial has given you some ideas to create your own CSS navigation. Just take it one step at a time and gradually build on each previous style sheet change. This way mistakes can be fixed as they happen and you’ll cut down on troubleshooting time. Good luck!
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
