Home Community Submit Tutorials Downloads Gallery Links Contact FAQ's / Help
  Home
  Submit Tutorials
  Community
  Tutorials
  Fonts
  Templates
  Affiliates
  Photography Corner
  Site Map
  Contact Us
 
Affiliates
  Pixel Apex
  Trick Digest
  Racuda
  Free-Brushes
  Pixel2life
  Photoshopstar
  Tutorialized
  Deviantart
  Majesticlicks
 
Tutorial Categories
3D Studio Max
Adobe Photoshop
Adobe Fireworks
Adobe Flash
Adobe Flex
Adobe Illustrator Adobe Illustrator
Articles Articles
ASP.NET
Corel Draw Corel Draw
Dreamweaver
eCommerce
Gimp
JavaScript
Maya
Microsoft Frontpage
PHP Coding
Swift 3D Swift 3D
Windows Operation
Wordpress
 
Tutorial
Name:
Chemistry Flask
Author:
Vforvectors
Tutorial
Name:
PHP Login Script
Author:
Pixel Digest
 
Search:
Search Example: Orb, Oman3d, Adobe Photoshop or Picture Editing
 
 
Hide/Show Layers  - Learn how to create this effect using behaviors.
Introduction: In this tutorial I will explain how to create the show/hide menu shown. If you would like to see a live demonstration click here. To create this tutorial I used Dreamweaver 8, and added the show/hide behavior which is built into Dreamweaver. It is a simple process that gives you a nice effect.
 

  

Click here to see a live example.

Part1: Setting up Dreamweaver.
Open Dreamweaver, create a new page, Basic page Html. Copy the code below and paste it into Dreamweaver. This is the code for the table, you don't necessarily need the table but its good because it organize it a little.

With the code pasted into Dreamweaver Code view you should have the table shown below.

 

Next add the numbers 1 and 2 into the two small square boxes as shown below.

Double click on the number "1" text to highlight it, when you do that the properties panel should show up at the bottom of the window. You should see the Link bar shown below, type in the # symbol. Repeat this for the second number. 

   

Click outside the table, Next click on Insert Layout Objects Layers

 

When you do that the layer below will come up.

 

With the layer selected, change the Layer ID to "layer1"

 

Next change the layer Vis to Hidden

Next position the layer as shown below.

 

With the layer selected, Type something into the layer as shown below.

Repeat this step for the second number 2

Double click on the number "2" text to highlight it, when you do that the properties panel should show up at the bottom of the window. You should see the Link bar shown below, type in the # symbol. Repeat this for the second number. 

 

Click outside the table, Next click on Insert Layout Objects Layers

 

When you do that the layer below will come up.

With the layer selected, change the Layer ID to "layer2"

Next change the layer Vis to Hidden

Next position the layer as shown below.

With the layer selected, Type something into the layer as shown below.

Next click on Windows   behaviors, the behaviors tab have to be checked. With that the behaviors tab should come.

 

Click on the number "1" to select it.  Click on the (plus +) icon and click on Show-Hide Layers with that hide and show the layers as shown below.

Click on the number "2" to select it.  Click on the (plus +) icon and click on Show-Hide Layers with that hide and show the layers as shown below.

Finished:
Well that is it. Hope it is what you expected. If you have, any questions or comments feel free to e-mail me or leave a message on the forum. If you are having a hard time with the tutorial email me and I will try to help.

This Tutorial was Created By Mark
© 2007 pixeldigest.com. All Rights Reserved.

 
 
Help Support Us
 
 
 
News Updates
PHP Login Script Tutorial
In this tutorial I will explain how to create a php login script using adobe dreamweaver. Its a simple process just follow along and anyone can recreate this example.If you have any problems email us..
 
   

CSS mouse over Table

In this tutorial I will teach you how to create a CSS mouse over Table effect to change the background color of a table using Dreamweaver.
... Read more

 
 
News Update [10/16/07]
Yesterday on the 15th of October my gallery went down for some unknown reason. I was able to get the backup of the images, i just lost all the users. The gallery was not that active but i am sill pissed about what happened. I am in the process of reloading the gallery. Just give me some time and it should be up and running. Yesterday on the 15th of October my gallery went down for some unknown reason. I was able to get the backup of the images, i just lost all the users. The gallery was not that active but i am sill pissed about what happened. I am in the process of reloading the gallery. Just give me some time and it should be up and running.  
... Read More
 
Bookmark This Page
 
 
Untitled Document
Latest Gallery Image
 
Sponsors
Custom Shapes
Custom Shapes
Custom Shapes
 
 

Home | Submit | Tutorials | Forums | Gallery | Fonts | Downloads | Privacy Policy | Affiliates | Sitemap | Contact | FAQ's / Help

© 2005 - 2011 pixeldigest.com