create HTML menubar

Question

Hi,

I'm looking for some help with creating a horizontal menubar in HTML. The menubar will have menus such as File, Edit, View and when you mouseover or click on the File menu (for example), the menu will be displayed showing menu items such as New, Open, etc.

Ideally, I'd like to create the menubar and menus using pure HTML and CSS, but I also have JQuery, Prototype and Scriptaculous at my disposal if necessary. Does anyone know of any good examples/tutorials from which I could draw inspiration?

EDIT: Thanks for all the links. I should have mentioned that I'm really looking for a tutorial that explains how to do-it-yourself in HTML/CSS/JS, rather than a WYSIWYG tool that builds all the code for you.

Cheers, Don

Answer 1

Have a look at the CoffeeCup Free DHTML Menu Builder:

http://www.coffeecup.com/free-dhtml/

Sounds like it will do what you want.

Answer 2

I've found this menu tutorial on A List Apart to be helpful. If you search around on that site you can find a lot of good design tutorials and templates.

Answer 3

I think the most robust out there is this one "DHTML Menu" http://www.milonic.com/ By Milonic.

It handles theming and a whole pile of options.

Answer 4

Here is another reference you could look at: http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/

Answer 5

Get this free Windows-based CSS navigational menu creator. It is great and a good teaching aid as well.

http://www.highdots.com/css-tab-designer/

Answer 6

There's a public domain pure CSS menuing system at

http://www.grc.com/menudemo.htm

Answer 7

I highly recommend YUI menu components if you can use them. You can use an application menu (view example) built from HTML markup of from Javascript.

YUI components are very easy to use, open source, they have a great support and documentation, and seems well designed. And they are from Yahoo ;)

Answer 8

If you're french speaking there is many example of menus with HTML + CSS at http://www.alsacreations.com/