 |
 |
Adding Submenus:
Now that the main table in the page has our menu buttons, we will add the submenus. We start by adding a Floating Box to the page. It is important that when you add FBs, that you be aware of where the cursor is on the page. The code for the FB ends up in the page wherever the cursor is when you add it. This page doesn't have an outer table, so we can just click to the left of our menu table and add the FB.
Once you add the FB, select the visible rectangle (not the gold icon, but the rectangle that represents the visible part of the FB). Then in the inspector set the Top and Left positions to zero, and set the width to 100%. Don't worry about the height. Set the Depth to 10. It really doesn't matter what depth it has for these types of menus, but you do need to give it a depth of some kind. Give the FB a name that will make it obvious what it is for, like "menu1". Do not use spaces or underscores in the name.
Next we will place a table inside the FB. We will want this table to mirror the table in the main page. But before placing it, lets stop and think about it so we don't have to edit it like we did the one on the main page. We know we need a cell that is going to contain the submenu. We also know that we need a cell to hold the transparent GIF on the left of the menu. But do we need to make cells that mirror the other cells in our main menu table? No. We just need to place a cell to the right of the submenu that will contain a transparent GIF wide enough to take up the same amount of space as those other cells in the main menu table. We are also going to want a cell under the submenu in case the user moves their mouse off of the submenu in that direction. We also need to decide if we want to make this table have a row for every submenu button, or do we nest another table into the cell of this one for the submenu. That really doesn't matter. It will work either way.
So we place out table in the FB. We center the table by dragging across it and using the centering button. I decided for this one to use a single table, with rows for each submenu button. So we need 3 rows for those and a 4th row for the cell under the submenu. We also want a cell that covers the main menu button. So I make the table be 5 rows by 3 columns. To save us from having to place a lot of small transparent gaffs in each cell, I will combine (span) some of the cells. One rule of tables, to make them work as you expect, is to have at least one row that contains every column, and at least one column that contains every row. When you span cells, only the original cell exists. The others that are spanned do not exist in the code so they can't be counted when trying to meet the table rule I mentioned above. If I were to combine all of the cells in the bottom row, then only the first column would contain that row. Since I also want to combine the rest of the cells in the first column into a single cell, that violates the table rule, since no column will contain all rows. So instead I will combine all of the cells in the first column, right to the bottom, into one cell. Then I combine the cells in the last column into one cell. This table meets the table rule because the top row contains a cell in all columns, and the center column contains a cell in all rows.
After placing the submenu buttons in their cells, and the rollover image for the main menu button above the submenu buttons, I place a transparent GIF in the remaining three cells. Since I want 100 pixels below the submenu, I make that one be the same width as the submenu images, but 100 pixels high. Next I make the one in the left cell be 100 pixels wide, and it needs to be high enough to fill the cell exactly. That height is the total of all the cells in the middle column (the one covering the main menu button, the 3 submenu buttons, and the 100 pixel tall one in the bottom).
Finally we get to the one in the right column. We know it needs to be the same height as the one in the first column, but how wide should it be? If we make it 100 pixels wide, then we get the 100 pixel border we want for detecting when the mouse leaves the menu, but we are not matching the width of the table in the main menu. And that is the most important thing we need to do. So we calculate how wide to make it. It has to cover the second and third menus, plus have the extra 100 pixels. So we look at the table in the main menu and add the width of the two right buttons and the 100 pixel spacer. That total tells us how wide to make it.
Finally we select the table and set it's width to Auto, and it's border, cellpadding, and cellspacing all to zero.
But something is not right when we look at the page. The submenu doesn't line up vertically with the main menu. This is because the little gold icon from the FB is sitting on top of the main menu, pushing it down. Go to the Edit menu and select "Hide Invisible Items". Now the gold icon is hidden, and the main menu is back up at the top. And our submenu now is exactly lined up with the main menu. Our menu so far looks like this:
Now select the FB and uncheck the "Visible" checkbox to hide this FB. Now click the mouse to the left of the main menu table and add another FB. We go through the same steps for this one as the last one, except the transparent GIFs on the left and right side are not the same size as before. This time we want the center column to line up with the middle menu on the main menu table. So instead of the left transparent GIF being 100 pixels wide, we need to make it wide enough to include the first menu. So we add the width of the first menu button to our 100 pixels and that tells us the width to make the left transparent GIF. The right transparent GIF also needs to be a different size. Last time it was wide enough to cover the 2 menus on the right, plus 100 pixels more. This time it only needs to cover the right most menu, plus 100 pixels. So in this case the left and right GIFs are the same size (assuming all 3 menu buttons are the same width. The result is this:
Now we go through this all again for the third menu, with a third FB. This one again changes the left and right GIF widths to match the menu we are covering. The left GIF is 100 pixels wide plus the width of the two left most menus. The right GIF is simply 100 pixels wide. The result looks like this:
