Navigation bars or menus present a list of choice to the visitor. For example,
- Home
- Services
- Products
- Support
- About
- Contact
Often these choices will have nested options. For example, under About, you might find:
- Company History
- Staff
- Press Releases
Menus as Lists
We’ll start by marking up the first list shown above as HTML and giving the list an id of “mainmenu”.
<ul id=”mainmenu”>
<li><a href=”home.html”>Home</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”support.html”>Support</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
With no CSS, this menu will display as follows:
Over the next few weeks, we will show you how to turn the list into a stylish navigation menu:
- horizontal menu
- vertical menu
- drop-down menu
- pop-out menu
Resources:
- Website-Tutorial.net – CSS Positioning
- Listamatic – one list many options
- A List Apart – Suckerfish Dropdowns
- Matthew James Taylor – Beautifully Horizontally Centered Menus
- PixoPoint – Multi-level Navigation CSS Generator
*CSS is supported on all Doteasy web hosting plan, including $0 Hosting. All you need is a simple text editor, ie. Notepad.
For more information on the basics of CSS, Website-Tutorial.net is a good place to start.