Week 05: Drop Down Menu

This week we will design a drop down menu in Photoshop,
and add behaviours in Dreamweaver to make it interactive.

See On-Line Example

IN PHOTOSHOP ---------------------------------
Prepare the Full Drop Down Menu (with Trigger Image and Menu items).
Layers look like this:
1) up_trigger (UP STATE)
2) over_trigger (OVER STATE)
3) up_dropdownmenu (UP STATE)
4) over_dropdownmenu (OVER STATE)
5) MAIN MENU header (HEADER)
6) Background graphic (GRAPHIC)

When saving for Web, SAVE HTML & IMAGES for the up_trigger only.
All other Saves will be images only.
Be sure to change the name of the file to the layer names, as above.

You should have the following html file when completed:
up_trigger.html

View the tutorial:


IN DREAMWEAVER ---------------------------------
Create a new Site definition, and then open the file named:
up_trigger.html (created from PHOTOSHOP).

Step 1 Wrap menu in APDiv1:
From the Files Panel, double click up_trigger.html to open it in the design view.
Wrap the menu in an APDiv
-------------------------------------

Step 2 Create a new APDiv Layer for the drop down menu:
Create a Layer (APDiv2) to hold the up menu images.
Drag the images from the Files Panel to inside the Layer.
Align the Layer below the Trigger Image.
-------------------------------------

Step 3 Place APDiv2 Layer in Timeline
Select Window > Timelines, and drag the Layer from the Stage to the Timeline
In the Timeline, Select the last keyframe node and move it from frame 15 to frame 5
In the "B" Behavior Layer of the Timeline, on Frame 5, select Behavior > Show-Hide Elements.
and apply the following settings: onFrame5, Layer "APDiv2" (hide)
-------------------------------------

Step 4 Apply the following Behaviors to the Trigger Image:
Select the Trigger image for the first drop down menu.
********* NOTE: Be sure the order is the same as below **********
1) (Behaviors > Timeline) Play Timeline, ... onMouseOut
2) (Behaviors > Show-Hide Elements) Show-Hide Elements (layer "APDiv2" (show), ) ... onMouseOver
3) (Behaviors > Timeline) Go To Timeline Frame (Go to Frame 1) ... onMouseOver
4) (Behaviors > Timeline) Stop Timeline, ... onMouseOver
-------------------------------------

Step 5 Menu item Behaviors:
Select each of the drop down menu items and add behaviors to each of the images:
********* NOTE: Be sure the order is the same as below **********
1) (Behaviors > Timeline) Play Timeline, ...onMouseOut
2) (Behaviors > Timeline) Go To Timeline Frame (Go to Frame 1), ...onMouseOver
3) (Behaviors > Timeline) Stop Timeline, ...onMouseOver
-------------------------------------------

Step 6 CSS Visibility property:
In the CSS Panel, for APDiv2, set the visibility to hidden
Positioning: Visibility: hidden;
IMPORTANT NOTE: Check the code view to make sure the visibility is not set to inherit. Remove the code if it is.
-------------------------------------------

View the tutorial:



Step 7 Set Nav Bar Images:
Add the Behavior "Set Nav Bar Images" for each of the sub menu images.
Window > Behaviors, Set Nav Bar Images
For example:
Element name: upmenu08
Up image: images/up_menu_08.jpg
Over image: images/over_menu_08.jpg
-------------------------------------------

Step 8 Adding the Hyperlinks:
Select the image in the drop down menu and in the Properties Window, include a Linked URL HTML address.
-------------------------------------------

Step 9 Hide the Drop Down on Loading the Web Page
In order to have the drop down menu layer hidden on the loading of the web page, you will need to write a function to trigger this behavior. The function is written in the SCRIPT area of the code, and the function is called in the BODY area of the code.

1. Start with the name:
function init(){
}

2. The script lines can be cut and pasted from parts already existing in the HTML:
You will need two already written function calls MM_preloadImages and MM_showHideLayers.
The function that is doing the work of hiding the APDiv is MM_showHideLayers.
Cut the following lines from the existing html:
MM_preloadImages('images/over_menu_08.jpg','images/over_menu_13.jpg','images/over_trigger_03.jpg','images/over_trigger_04.jpg','images/over_trigger_05.jpg');
MM_showHideLayers('apDiv2','','hide');

3. The function when completed looks like this:
function init(){
MM_preloadImages('images/over_menu_08.jpg','images/over_menu_13.jpg','images/over_trigger_03.jpg','images/over_trigger_04.jpg','images/over_trigger_05.jpg');
MM_showHideLayers('apDiv2','','hide');
}

4. Be sure the function is placed inside the SCRIPT area of the code. See below:
script type="text/javascript"
!--
function init(){
MM_preloadImages('images/over_menu_08.jpg','images/over_menu_13.jpg','images/over_trigger_03.jpg','images/over_trigger_04.jpg','images/over_trigger_05.jpg');
MM_showHideLayers('apDiv2','','hide');
}
//--
/script

5. The function call, is placed inside the body tag:
body onLoad="init()"

6. Look at the On-Line example code - In the Brower select VIEW > VIEW SOURCE On-Line Example . Examine the function init() and the body onLoad.

At this point the drop down menu should be working. Be sure to save the file and put it to your web site.

Have a great day.

-------------------------------------------


OTHER NOTES Setting The Timeline Delay:
1) You may change the timing in the Timeline by changing the number of frames per second.
2) You may also drag the end Keyframe to add or reduce the number of frames in the delay.