Navigation Menu - ideas?!

Question

Hey there

I'm currently teaching myself to create websites - this particular site is for a that business I have. I'm using Dreamweaver CS3 to do so.

I need some help with the horizontal navigation menu I am trying to create. I have three main categories within my website, each with their own small image to represent them. I want to have all three images, side by side underneath my company logo, acting as the navigational menu.

So for example, one section is Alcohol. When the user puts their mouse over the 'alcohol' image, a menu drops down underneath to show the subsections eg spirits, beer etc.

After doing some research, I can't quite decide the best way to do this. Whilst learning Dreamweaver, I have come across Spry Menus, which I thought would do the job. But I have also now learned about pop-up menus in Fireworks CS3 (which I also have available to me).

I'm really looking for some other opinions on the matter and would appreciate any recommendations about the best route to take with this.

Thanks.

Answer 1

First, don't use snippets built in dreamweaver. They are awful.

Use JavaScript, maybe even JS framework like jQuery. It offers toggle() function for that kind of situations.

In general, you should apply JS function to mouseover of your image. That function shows or hides div (your dropdown). You can achieve that by setting css parameter display: none (hidden) or display: block (visible).

Example for showing div:

<a href="#" onmouseover="show("menu-1")" onmouseout="hide("menu-1")">My menu 1</a>

<div id="menu-1">
 <ul>
  <li>Alcohol</li>
  <li>Spirit</li>
 </ul>
</div>

And some javascript:

function show(myid)
{
 document.getElementById(myid).style.display = "block";
}

function hide(myid)
{
 document.getElementById(myid).style.display = "none";
}

I made that in a hurry so it's not perfect.

Answer 2

I would prefer learning CSS menus instead of having it generated using Dreamweaver. You can try the this one.

Answer 3

I would learn pure CSS menus, and then for more advanced functionality, use jQuery plugins like Superfish

The site I first learned CSS menus from was CSSplay. This same guy also has a newer site aimed only at CSS menus.

I would say going though the source code of some of those will teach you a lot, but ultimately I would recommend using Superfish or some other jQuery plugin for more user-friendly menus, especially for delay on mouseout. A lack of mouseout delay can render most CSS menus completely unusable.

Answer 4

I think a good menu is a menu that doesn't need javascript. You can do really a lot with CSS alone. You can even do very clean and quick rollover image effects with just CSS.

http://www.tutorio.com/tutorial/pure-css-image-rollovers

Answer 5

Give http://www.alistapart.com/ a try. Wonderful page with a lot of good tutorials. http://www.alistapart.com/articles/horizdropdowns/ for example shows you how to use a list and css to build a horizontal menu. Maybe a good starting point for you project.

Dreamweaver is really a good tool for getting fast results. But if you are interested in learning implementing websites than it is better to get your hands dirty. Take for example the tutorials from http://www.w3schools.com/ and a good editor of your choice and build your website or a fun project from the scratch. On the long run this investment will pay of.