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:

example1

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:

*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.

Comments

comments