Ades Design - High Quality Website Templates, Free Website Templates, Tutorials: Photoshop, Dreamweaver, Flash, CSS and PHP


Javascript Pop-Up Menu
Home » Tutorials » Dreamweaver


Note: This tutorial is done by Macromedia Dreamweaver MX.
Save this image to your PC, or if you want to use any other image of your own, please go ahead.

Create a new page and save it as menu.html. Place the image you have downloaded above inside your menu.html Then go to Window > Behaviors (Shift+F3) to open the Behaviors panel. (If it is not open).

Now select your image and click on the + sign on the Behaviors panel. From the popup menu choose Show Pop-Up Menu

Now type the first menu item in the Text field, I entered Company. Then enter the destination url for the menu item. This is the url where user will be redirected when he chooses this menu item. I have entered as company.html

Then click + to enter another menu item

 

Add more menu items as shown below. We need more menu items to put them under the sub-category

Now as you see Web Design & Web Hosting could be placed under Services.

Select the Web Design from the menu and click on the Indent Item to put it under Services

Now put Web Hosting under Services too.

Now go to next step by selecting Appearance. Choose the FONT, FONT SIZE, and MENU COLORS as you like fo your menu.

Click on Advanced if you want to customize your menu more. For example I have set a fixed cell width, which is 150pixels. And also the Cell Padding to 4, as well as Text Indent to 5.

Finally Choose Position for the positioning of the menu. I have selected the second one which will display the menu under the image. You can explicitly define the position by entering X: and Y: values directly in their fields. And tick the Hide Menu on onMouseOut Event, otherwise your menu will stay after you remove your mouse from the menu.

Click on OK, and save your menu.html. View it in your browser (F12 for IE).

Related Dreamweaver Tutorials
  How to backup Dreamweaver New
Backup your templates, extensions, behaviors...etc
  Creating CSS in Dreamweaver MX 2004
Learn how to create and apply CSS in Dreamweaver
  Create Rollover/MouseOver effect
Rollover effect made easy with Dreamweaver
  Opening a Fixed Size Window
Learn how to open a window in a fixed size
  Redirection based on Browser Type
Learn how to make redirection script with Dreamweaver
     

Color Picker for your AdSense job more info
 



Web2.0 Bookmarks - Social bookmarking is good, but old skool way of hand-picking sites is better!
That's what we do best, collecting the coolest WEB2.0 sites. click here

 


Advertise | AdesBlog New | Free Templates | Premium Templates | Products | Services | Portfolio | Contact

2002 - 2007 Ades Design. All Rights Reserved. http://www.adesdesign.net

 









Logo Design, Web Design, Graphic Design (Cartoons, Caricatures etc.)
Software Development Company 
Search Engine Optimization by Design
Logo Design
 
Advertise Here