How to make an in & out slide effect on dreamweaver

Written by max power
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make an in & out slide effect on dreamweaver
Dreamweaver enables Web designers to apply JavaScript behaviours to website elements (Comstock/Comstock/Getty Images)

Web designers use the popular Adobe Dreamweaver web development software as a tool to design websites. Dreamweaver allows Web designers to assign behaviours to website elements such as pictures. Dreamweaver uses JavaScript to implement these behaviours. One of these behaviour attributes is known as the "slide in and out" behaviour. A Web designer assigns the slide behaviour to a website element. When site users click on the element it slides up or down by a predetermined amount.

Skill level:


  1. 1

    Write the HTML code. You must wrap your element inside of a parent element. The parent element must be assigned a unique identification. This sample code places an image of a menu option inside of a parent division. The division is assigned the ID "imageWrapper."

    <div id="imageWrapper">

    <img src="menuOption.jpg">


  2. 2

    Select the container div. Use the mouse to drag your cursor over the parent element (e.g., the image Wrapper div from the previous example).

  3. 3

    Open the behaviours panel by selecting the "Window" menu option from the option bar at the top of the screen and the "Behaviors" submenu. The Behavior window should appear on the right side of your screen.

  4. 4

    Tap the "+" button at the top of the Behaviors panel. This creates a new behaviour.

  5. 5

    Select the "Slide" effect option from the new Behaviors menu.

  6. 6

    Assign properties to the new slide effect. You can cause the element to slide up or down and allow the effect to be reversed. You may also determine how high or low the element slides when clicked by the site's visitors.

Tips and warnings

  • Once your new slider effect is applied, Adobe will append a 2000-line JavaScript file to the head section of your HTML page. Do not forget to upload this JavaScript file to your server, or your slider will not work. The file is entitled SpryEffects.js.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.