Create a Database Driven DHTML Menu - Step IV

In this part of the tutorial we will add the dynamic sub menu to the Categories drop down menu.

34. Open the Bindings Panel (CTRL + F10) if it is not already open. Click the (+) sign in the Bindings Panel and select Recordset(Query). In the Recordset window, if you are not in the Simple view, click on the Simple button. Use the following settings in the Recordset window.

35. Click on the Test button in the Recordset window and you should see the following Test SQL Statement window.

36. Click OK in the Test SQL Statement window and the Recordset window.

37. In the Layers Panel, click on the catSubLayer and set the Vis to visible in the Property Inspector.

38. In the Bindings Panel, click on the (+) sign to the left of Recordset(rsCats) to expand it.

39. In the Bindings Panel, click on CategoryName and drag-and-drop it into the table cell in the catSubLayer. In the table cell, click on the data that you just binded and type javascript:; in the Link box of the Property Inspector. This is to create a null link, so that your submenu will look like a link when we preview it later.

40. Open the Server Behaviors Panel (CTRL + F9) if it is not already open. In the table cell, click on the data that you just binded. Now click on the <tr> tag to the left of the <td.menu> tag in the bottom of the Design View window. Click the (+) sign in the Server Behaviors Panel and select Repeat Region and use the settings below.

41. Click OK.

42. Dreamweaver MX has a "feature" that was carried over from UltraDev 4. That feature is that when you apply the Repeat Region to a <tr> that only contains one <td> it does not put the code in the proper place. The repeat region code should be placed outside of the <tr> and </tr> tags, but MX places it inside those tags. To correct this, it is necessary to go into Code View and cut and paste the code into the proper area. To do that click View > Code and look for something that looks similar to this:

<table width="110" border="0" cellspacing="0" cellpadding="3">
<tr>
<%
While ((Repeat1__numRows <> 0) AND (NOT rsCats.EOF))
%>
<td bgcolor="#009999" class="menu" onMouseOver="pviiW3Cbg(this, '#6699CC')" onMouseOut="pviiW3Cbg(this, '#009999')"><a href="javascript:;"><%=(rsCats.Fields.Item("CategoryName").Value)%></a></td>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
rsCats.MoveNext()
Wend
%>
</tr>
</table>

The highlighted code above is the culprit. Change it to the following, which is just moving it outside of the <tr> and </tr> tags:

<table width="110" border="0" cellspacing="0" cellpadding="3">
<%
While ((Repeat1__numRows <> 0) AND (NOT rsCats.EOF))
%>
<tr>
<td bgcolor="#009999" class="menu" onMouseOver="pviiW3Cbg(this, '#6699CC')" onMouseOut="pviiW3Cbg(this, '#009999')"><a href="javascript:;"><%=(rsCats.Fields.Item("CategoryName").Value)%></a></td>
</tr>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
rsCats.MoveNext()
Wend
%>
</table>

43. Click View > Design.

44. Click on the catSubLayer in the Layers Panel. Set the Vis to hidden in the Property Inspector.

45. Hit the F12 key to preview your work.

Get a zipped copy of the sample page here.

Congratulations! That's all there is to creating a database-driven DHTML drop down menu. Type the following in your browser of choice to view the page over your testing server:

http://localhost/tutorial/index.asp