How to create sub menu in Dream weaver?

Originally Posted by candyo0

Step 01: Start up Dreamweaver.


Step 02: Make sure that you have selected "Design view" (fig. 1)


fig. 1


Step 03: Assign a title for the page (fig. 2). I have called mine "A dropdown menu", but you are free to come up with a better name for yourself.
Next, save the file somewhere you know you can find it again.


fig. 2


Step 04: In the "Objects" inspector (press "Ctrl+F2" on your keyboard or select it in the "Window" menu, if you can't find it), select the "Draw Layer" tool (fig. 3).
Use it to make a box on your page by holding the left mouse button and dragging until it forms a box. It doesn't matter what size it has, we'll change that in a bit.


fig. 3


Step 05: Now click on the edge of your newly made box to select it. Open up the "Properties" inspector by pressing "Ctrl+F3" on your keyboard (or selecting it in the "Window" menu). Adjust the values to the ones show on figure 4.


fig. 4


Step 06: Draw three (3) more layers, using the same technique as in step 04. Assign the same properties for them as you did for the first layer, with these exceptions:

Layer ID: menu2, menu3 and menu4
Left position (L): 25%, 50% and 75%


Step 07: At this point you should have four (4) gray boxes laying side by side in the top of the window. Now we'll make them easier for the user to navigate through.

Click inside the first box, and you should get a blinking line indicating that you can write in the layer. Write "menu 1".


Step 08: Use the "Properties" inspector the align the text to the center of the box (fig. 5). repeat step 07 and 08 for the last three layers also (changing the text to "menu 2" etc.)


fig. 5


Step 09: Draw yet another three (3) layers using the same technique as you learned in step 04. Assign the properties of these layers as show on figure 6.


fig. 6


Step 10: Fill out the submenu layers with the text "Sub menu 1", "Sub menu 2" and "Sub menu 3". Center all three like you did in step 08.


Step 11: Once again, draw two (2) more layers (these are the last ones, i promise!) using the same technique as you learned in step 04. Assign the properties of these layers as show on figure 7 and write "Sub sub menu 1" and "Sub sub menu 2" in them.


fig. 7


Step 12: Now it's time to get the menus working.

Open the "Behaviours" inspector (by pressing "Shift+F3" or selecting it in the "Window" menu).


Step 13: Select the gray layer with the text "menu 3" so that there is eight black boxes on its edge.
Now click on the "+" icon (fig. 8) in the "Behaviours" inspector.


fig. 8


Step 14: From the menu, select "Show-Hide Layers". Note: If you can't select "Show-Hide Layers" (it is grayed out), find the Sub-menu called "Show Events For" and select "IE 5.0" (fig. 9).

Scroll down the list until you find the "menu3sub1" layer. Select it (by clicking it) and click "show". Do the same for the last two menu3sub's.
Also, find the layer called "menu3subsub1" and hide it (click "hide" instead of "show"). Do the same for "menu3subsub2". Then click "OK".


fig. 9


Step 15: In the "Behaviours" inspector, click on the "arrow" (fig. 10) and select "onMouseOver" to make the menus appear when the mouse rolls over menus (instead of it needing to be pressed first).


fig. 10


Step 16: Press the "+" icon again (as shown in step 13) and select "Show-Hide Layers" once again. This time hide all the sub and subsub menu layers (the same once as you selected before, just now they are all going to be hidden). Then click "OK".


Step 17: Change the event for this behaviour to "onMouseOut" (the same way as you did in step 15).


Step 18: Repeat step 13-17 for the three submenu layers. Except for submenu3, they all should have the same behaviours as above.
Submenu3 distinguishes itself by having all they sub- and subsubmenus shown (step 14) in the onMouseOver-behaviour.


Step 19: On to the subsubmenus. Give them the same kind of behaviour as submenu3, that is "show" all sub- and subsubmenus on MouseOver, and hide all sub- and subsubmenus on MouseOut.


Step 20: Now you can close the "Behaviours" inspector. Select "Submenu1" and change its visibility in the "Properties" inspector to "invisible" (fig. 11).
When you deselect the layer it should disappear! But don't worry, it is still there, it's just invisible. You can reach it by clicking on one of yellow icons that is half hidden under the "menu1" layer (fig. 12).

fig. 11
fig. 12



Step 21: Repeat step 20, hiding the other sub- and subsubmenus.


Step 22: Save the file and go out for a cop of coffee......

Originally Posted by candyo0

Step 01: Start up Dreamweaver.


Step 02: Make sure that you have selected "Design view" (fig. 1)


fig. 1


Step 03: Assign a title for the page (fig. 2). I have called mine "A dropdown menu", but you are free to come up with a better name for yourself.
Next, save the file somewhere you know you can find it again.


fig. 2


Step 04: In the "Objects" inspector (press "Ctrl+F2" on your keyboard or select it in the "Window" menu, if you can't find it), select the "Draw Layer" tool (fig. 3).
Use it to make a box on your page by holding the left mouse button and dragging until it forms a box. It doesn't matter what size it has, we'll change that in a bit.


fig. 3


Step 05: Now click on the edge of your newly made box to select it. Open up the "Properties" inspector by pressing "Ctrl+F3" on your keyboard (or selecting it in the "Window" menu). Adjust the values to the ones show on figure 4.


fig. 4


Step 06: Draw three (3) more layers, using the same technique as in step 04. Assign the same properties for them as you did for the first layer, with these exceptions:

Layer ID: menu2, menu3 and menu4
Left position (L): 25%, 50% and 75%


Step 07: At this point you should have four (4) gray boxes laying side by side in the top of the window. Now we'll make them easier for the user to navigate through.

Click inside the first box, and you should get a blinking line indicating that you can write in the layer. Write "menu 1".


Step 08: Use the "Properties" inspector the align the text to the center of the box (fig. 5). repeat step 07 and 08 for the last three layers also (changing the text to "menu 2" etc.)


fig. 5


Step 09: Draw yet another three (3) layers using the same technique as you learned in step 04. Assign the properties of these layers as show on figure 6.


fig. 6


Step 10: Fill out the submenu layers with the text "Sub menu 1", "Sub menu 2" and "Sub menu 3". Center all three like you did in step 08.


Step 11: Once again, draw two (2) more layers (these are the last ones, i promise!) using the same technique as you learned in step 04. Assign the properties of these layers as show on figure 7 and write "Sub sub menu 1" and "Sub sub menu 2" in them.


fig. 7


Step 12: Now it's time to get the menus working.

Open the "Behaviours" inspector (by pressing "Shift+F3" or selecting it in the "Window" menu).


Step 13: Select the gray layer with the text "menu 3" so that there is eight black boxes on its edge.
Now click on the "+" icon (fig. 8) in the "Behaviours" inspector.


fig. 8


Step 14: From the menu, select "Show-Hide Layers". Note: If you can't select "Show-Hide Layers" (it is grayed out), find the Sub-menu called "Show Events For" and select "IE 5.0" (fig. 9).

Scroll down the list until you find the "menu3sub1" layer. Select it (by clicking it) and click "show". Do the same for the last two menu3sub's.
Also, find the layer called "menu3subsub1" and hide it (click "hide" instead of "show"). Do the same for "menu3subsub2". Then click "OK".


fig. 9


Step 15: In the "Behaviours" inspector, click on the "arrow" (fig. 10) and select "onMouseOver" to make the menus appear when the mouse rolls over menus (instead of it needing to be pressed first).


fig. 10


Step 16: Press the "+" icon again (as shown in step 13) and select "Show-Hide Layers" once again. This time hide all the sub and subsub menu layers (the same once as you selected before, just now they are all going to be hidden). Then click "OK".


Step 17: Change the event for this behaviour to "onMouseOut" (the same way as you did in step 15).


Step 18: Repeat step 13-17 for the three submenu layers. Except for submenu3, they all should have the same behaviours as above.
Submenu3 distinguishes itself by having all they sub- and subsubmenus shown (step 14) in the onMouseOver-behaviour.


Step 19: On to the subsubmenus. Give them the same kind of behaviour as submenu3, that is "show" all sub- and subsubmenus on MouseOver, and hide all sub- and subsubmenus on MouseOut.


Step 20: Now you can close the "Behaviours" inspector. Select "Submenu1" and change its visibility in the "Properties" inspector to "invisible" (fig. 11).
When you deselect the layer it should disappear! But don't worry, it is still there, it's just invisible. You can reach it by clicking on one of yellow icons that is half hidden under the "menu1" layer (fig. 12).

fig. 11
fig. 12



Step 21: Repeat step 20, hiding the other sub- and subsubmenus.


Step 22: Save the file and go out for a cop of coffee......