Posted By Doteasy

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.


 
1 Comment(s):
apix said...
it's so nice..To create web free
May 23, 2009 10:12:44
 


 
Google

Recent Entries
 
Category
 
Latest Comments
 
Archives
 
Free Tools and Applications
 
Doteasy Knowledge Base
 
 
Links
 
Doteasy Reviews
 
Visitors

You have 2084762 hits.

 
$0 Web Hosting

$0 Web Hosting
 
 

Add to Technorati Favorites



Add to Google Reader or Homepage

Add to My AOL

Add to netvibes

Subscribe in Bloglines

Powered by FeedBurner