 |
 |
A Simple Demo:
This first demo will only contain a table at the top of the page with 3 menu items in it. This is the simplest possible page, so we can use this to see the basic method for these menus.
The right way to start would be to plan it all out first. But since most people tend to just jump into a page and then think about the menus later, that's the way I will build this demo page. You will see the thought process behind figuring out what to add to make it work.
First I go into Photoshop and create my menu buttons. For this page I need 3 of them. While I'm there I make variations of those 3 images to use as rollovers. I also make 3 submenu buttons and their rollover images. For this demo I will keep everything simple by making the submenus be the same width as the menu buttons. The only other image we will need for this page is a 1 pixel by 1 pixel transparent GIF to use as a spacer. I always have one of those in my web site's images folder, so no need to make a new one.
Next I place a table on the page. I highlight the table by clicking outside the table and dragging across it. Then I click the centering button in the top toolbar to center the table. Next I set the table to 1 row by 3 columns and add the 3 menu images to the table. Then I select the table and set it to Auto width, 0 border, 0 cellpadding, and 0 cellspacing. I have already set the page for a yellow background and zero margins, so the table now looks like this:
Now if we preview this page in a browser, as we change the width of the browser we see the menu change position so that it stays in the center of the page. When the browser gets down to the width of the 3 buttons, then they take up the whole width of the browser. As we continue to go smaller we get a horizontal scroll bar.
Now if we think about this for a minute, we realize that when the page is that small, we wouldn't have any room for the detection areas on the left and right of the submenus. Since the submenus require those when the page is larger, they also need to exist when the page is at it's smallest. So I will decide that I want a 100 pixel area on either side of the submenu where we can detect the mouse leaving the submenu. Since the main page has to mirror the elements used in the submenu, then we will need to add 2 more cells to our table and put our transparent GIF in them to make sure the main page always keeps that same amount of space. Now our table looks like this:
