ranjan
August 13th, 2004, 07:04 AM
There are several different ways a DHTML Drop Down Menus can be deployed. Some scripts create the submenus on-the-fly i.e. the submenus are not present on the page as HTML elements but are usually written by "document.write" statements. Since search engines cannot read javascripts, such submenus are not spidered by search engines and screen readers. The solution is to build your own DHTML Menus making sure that the submenus are proper HTML elements within your document and they are only shown and hidden by main menu triggers. Dreamweaver MX 2004 provides us with the necessary tools to build such menus.
See An Example (http://ranjan.ws/tutorials/popem/popemfinal.htm)
Work Files
To start the tutorial, download the zip file at the end of this tutorial. After downloading the files:
Create a new folder in a defined Dreamweaver site and name it PopEm
Unzip the PopEm.zip archive and place its contents in the PopEm folder you created in the previous step
Open the file popem.htm
Creating the Drop Downs
The file popem.htm is a basic HTML document with the following divs:
#header
#menu
#content
#footer
The div #menu consists of three buttons. In this tutorial we will create a drop down for Button 2. Switch to code view and position your cursor at the end of menu #div and start of #content div. Insert a layer as shown below
257
Switch back to design view.Open the Layers Panel (F2) and change the name of the layer from "Layer1" to "SubMenu2" as shown below. With the layer selected, modify the Left(L), Top(T) and Width(W) as shown below. Make sure H is empty.
258
259
Inside the newly created Layer type out your submenu links as shown below. Make sure that there are no separating <br> tags between the submenu links.
260
Your code should look like this
<div id="SubMenu2" style="position:absolute; width:200px; z-index:2; left: 120px; top: 100px; visibility: hidden;" class="subs">
<a href="#">Sub Menu Link 1Sub Menu Link 2 Sub Menu Link 3Sub Menu Link 4Sub Menu Link 5
</div>
Open the css file stylesraw.css and add the following code
.subs {
font-size: 80%;
background-color: #454578;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.subs a {
color: #FFFFFF;
text-decoration: none;
display: block;
width: 190px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 10px;
}
We are using a defined class subs so that additional submenu layers can share the same class. Save and css file and close it.
261
Select the div #SubMenu2 in your Dreamweaver status bar and set its class to subs as shown above. Switchback to code view and position your cursor just before </body> and insert another layer. Change its name to closer and drag it below SubMenu2 in your layers panel and change its properties as shown below
262
263
The closer layer will hide the submenu onMouseOver. Insert a transparent 1x1 px shim image and resize it as shown below.
264
Select the image button2.gif and insert a null link by typing "javascript:;" as shown below
265
Open the Behaviors Panel (Shift + F4). Click the + Button and Choose "Show_Hide Layers" Behavior
267
Select each layer and click "Show" Button
295
Make sure onMouseOver is selected as the event
272
Select the transparent image within the closer layer and create a null link
268
Apply the Show-Hide Behavior to this layer this time selecting hide as shown below
296
Make sure onMouseOver event is selected.
Similarly Convert Buttons 1 and 2 into null links and Apply Show-Hide Layer to Button 1 and Button 2, selecting to hide the layers onMouseOver.
Hide the two layers by clicking below the eye icon, till you see a closed eye as shown below. This changes the visibility of the layers to hidden.
266
Your Drop Down Menu is now ready and you can test it on your browser (F12).
Notes :
1. You could add the hide layer behavior to the div #header. To do so make sure Events for version 5 browser is selected. This will activate Show-Hide Layer to be applied directly to the header div.
269
2. You could enhance the menu to have hover states for menus and submenus.
See An Example (http://ranjan.ws/tutorials/popem/popemfinal.htm)
Work Files
To start the tutorial, download the zip file at the end of this tutorial. After downloading the files:
Create a new folder in a defined Dreamweaver site and name it PopEm
Unzip the PopEm.zip archive and place its contents in the PopEm folder you created in the previous step
Open the file popem.htm
Creating the Drop Downs
The file popem.htm is a basic HTML document with the following divs:
#header
#menu
#content
#footer
The div #menu consists of three buttons. In this tutorial we will create a drop down for Button 2. Switch to code view and position your cursor at the end of menu #div and start of #content div. Insert a layer as shown below
257
Switch back to design view.Open the Layers Panel (F2) and change the name of the layer from "Layer1" to "SubMenu2" as shown below. With the layer selected, modify the Left(L), Top(T) and Width(W) as shown below. Make sure H is empty.
258
259
Inside the newly created Layer type out your submenu links as shown below. Make sure that there are no separating <br> tags between the submenu links.
260
Your code should look like this
<div id="SubMenu2" style="position:absolute; width:200px; z-index:2; left: 120px; top: 100px; visibility: hidden;" class="subs">
<a href="#">Sub Menu Link 1Sub Menu Link 2 Sub Menu Link 3Sub Menu Link 4Sub Menu Link 5
</div>
Open the css file stylesraw.css and add the following code
.subs {
font-size: 80%;
background-color: #454578;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.subs a {
color: #FFFFFF;
text-decoration: none;
display: block;
width: 190px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 10px;
}
We are using a defined class subs so that additional submenu layers can share the same class. Save and css file and close it.
261
Select the div #SubMenu2 in your Dreamweaver status bar and set its class to subs as shown above. Switchback to code view and position your cursor just before </body> and insert another layer. Change its name to closer and drag it below SubMenu2 in your layers panel and change its properties as shown below
262
263
The closer layer will hide the submenu onMouseOver. Insert a transparent 1x1 px shim image and resize it as shown below.
264
Select the image button2.gif and insert a null link by typing "javascript:;" as shown below
265
Open the Behaviors Panel (Shift + F4). Click the + Button and Choose "Show_Hide Layers" Behavior
267
Select each layer and click "Show" Button
295
Make sure onMouseOver is selected as the event
272
Select the transparent image within the closer layer and create a null link
268
Apply the Show-Hide Behavior to this layer this time selecting hide as shown below
296
Make sure onMouseOver event is selected.
Similarly Convert Buttons 1 and 2 into null links and Apply Show-Hide Layer to Button 1 and Button 2, selecting to hide the layers onMouseOver.
Hide the two layers by clicking below the eye icon, till you see a closed eye as shown below. This changes the visibility of the layers to hidden.
266
Your Drop Down Menu is now ready and you can test it on your browser (F12).
Notes :
1. You could add the hide layer behavior to the div #header. To do so make sure Events for version 5 browser is selected. This will activate Show-Hide Layer to be applied directly to the header div.
269
2. You could enhance the menu to have hover states for menus and submenus.