Expression® Web Design
Creating a Navigation
Tuesday, January 20, 2009
FrontPage offered a fairly easy way to create a navigation (or menu) to implement on your website. And to be honest, I played with them once, but decided they were not for me. I think it was also hover buttons that used Java that I used for awhile, until there were just too many browser compatibility issues.
I started then using just regular hyperlinks, and using the Page Properties to change the colors of the hyperlinks from the default blue color to another color. I also used this feature to change the active and hover colors. Unfortunately, these colors were applied to all the hyperlinks on that web page. Of course, this code needed to be added to every page that I created. FrontPage added something like:
<body link="#000080" vlink="#000080" alink="#FF0000">
I have not ever got into the background (color / image) or the font information. Let's just stick to the navigation today.
Using Lists to Create Your Navigation
That's right, you can use lists to create your navigation. By applying styles to the list, you can make the list appear horizontally / vertically and without the little dot in front of it. For example, on one of my sites, I use this list:
<ul id="navlist"> <li><a href="/default.asp">Home</a></li> <li><a href="/help.asp">Help</a></li> <li><a href="/forums.asp">Message Boards</a></li> <li><a href="/contact.asp">Contact Me</a></li> </ul>
I left some of the links out, but you get the idea. There is no dot preceding the hyperlinks. I also use server side includes so if I need to change / add / delete something, all I need to do is change one page. I also use an external style sheet to help manage / maintain the colors, layout, etc. Once again, all I need to do is change one page (the styles.css) to apply the changes to the entire website that the style sheet is attached to.
For some information on styles, you can check out How to Create a Style Sheet, Apply a Style Sheet, and Managing Your Style Sheet.
CSS Examples for Your Navigation
Once you are ready for this, there are a number of examples out there for you to choose from. The first that usually comes to mind is the Suckerfish Dropdown from Alistapart. They provide the code and easy instructions.
Another
menu is called
Accessible Drop Down Menu from James Edwards. They offer a free 15-day
free trial to test the menu. Right now, the cost of the product is $29.95.
Another page to view examples of using lists as a navigation tool is Listamatic. As far as I could tell, all the options from this website are free. There are horizontal and vertical menus on this page, make sure to review them all. CSSPlay has a page for using lists as menus. On this web page, you will see many options, for example: Basic Text, Tabbed, Button, Curved Border, Sliding, and Multilevel (FlyOut, Dropline, Fly line, Dropdown).
Comments
