2 Dreamweaver tutorial
Layer Magic with onClick

Show and Hide new content with the click of a mouse is the focus of this Dreamweaver tutorial and includes a hidden menu that will slide out! This slide function can be obtained from the Dreamweaver Depot and installed in the Behaviors folder. Many more actions and behaviors can be added to enhance the functionality of Dreamweaver's dhtml capabilities.

1. Create your hidden content layers, the button layer that will activate the menu slide, and the menu layer with text links. Add layer-background-color, or layer-background-image url(your.gif) to the layer definition (for Netscape) by using the HTML Inspector. Position the show/hide content layers using the Layers Inspector, making sure that each layer is lined up exactly underneath the next one.


2. The content layers are positioned; all three are hidden. Add a simple navigation menu layer. Button graphics can also be used; in this example text links are used. Add a small control layer -. this example uses two diamond buttons; the same image was used and inserted twice. Give each button a unique name so that Dreamweaver will know which button to access when we later assign behaviors.

1. Assign behaviors to the show/hide layer content first. The hidden layers will be triggered with an onClick event from the links in the yellow menu shown to the left. Place the mouse on the first link, select the Behavior's Inspector , choose onClick and then show/hide layer from the Actions menu. Set Layer One to visible, and Layers Two and Three to hide. Click OK. Select the next text link Two, choose onClick from the Behaviors Inspector and show/hide layers from the Actions menu; set Layer Two to visible and Layer One and Three to hide. Click OK. Continue these same steps for any further layers. Check the page in the browser to see the effect.

2. The final task is to animate the sliding menu . This can be accomplished in Dreamweaver with the Timeline feature or with custom behaviors like the slide layer action which can be downloaded free from the Dreamweaver Depot . The yellow link menu will slide in from the left after the first diamond button is clicked. This layer is already positioned where it will stop at the end of the slide. Make a note of these coordinates that appear in the Layer Inspector. Now set a negative number in the Left position box so that the layer moves off of the page. Don't change the Top coordinates since the layer moves along a straight path.

3. Position your mouse on the first button in the yellow control layer. Go to the Behaviors Inspector, then choose slidelayer from the Actions menu. Enter the layer name in the Relative box, and Left 125 Top 50 in the coordinate boxes. . Add 4 to the steps and 4 milli seconds to delay.. Click OK.

4. Check the page in the browser to see the effect. and make any necessary changes. . To slide the layer back off of the screen, place mouse on the second diamond button. Choose onClick from Behaviors, and slidelayer from the Actions. Enter the same layer name in the Relative box and the negative coordinates Left -125 Top 50. Enter 4 in both the Step and Delay boxes. Click OK. The page is now complete. View and run the Test for 4.0 Browsers.