An drop menu is usually a vertical or horizontal list of items. Another interactive way of displaying navigation. In this tutorial I will make it simpler for you to create your own Dropdown Menu with the help of Dreamweaver CS3.

Step 1: Create a new HTML page and save it in any folder.

Step 2: From the top menu, select Insert>Spry>Spry Menu bar. Something similar to the image below:

Step 3: Select the Menu bar type, i.e. Horizontal or Vertical. I am choosing Horizontal one.

Step 4: Previous step will add a <UL> based menu box in the HTML page. In the code you will find code like this:

<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a class=”MenuBarItemSubmenu” href=”#”>Web Design</a>
<ul>
<li><a href=”http://e-vigilant.com”>Website Design</a></li>
<li><a href=”http://e-vigilant.com”>Website Redesign</a></li>
<li><a href=”http://e-vigilant.com”>Content Management System</a></li>
</ul>
</li>
<li><a href=”#”>Flash Design</a></li>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3</a>
<ul>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3.1</a>
<ul>
<li><a href=”#”>Item 3.1.1</a></li>
<li><a href=”#”>Item 3.1.2</a></li>
</ul>
</li>
<li><a href=”#”>Item 3.2</a></li>
<li><a href=”#”>Item 3.3</a></li>
</ul>
</li>
<li><a href=”#”>E-Vigilant.com</a></li>

</ul>

In the design View there will a base box with  number of menus present, initially they will be Item 1, Item 2….

Step 4: From the property bar selection, you will see three section as shown in picture below, In 1, just put the main title of menus, In 2 give sub-menu which will come under main menu. If you have more levels of dropdown then you may put it in third box. For e.g as shown in figure I have inserted Four higher level or main menu buttons, i.e Web Design, flash Design….etc and have put three more submenus under Web design list, i.e. Website design, Website Redesign…etc.

In the above image of property bar, we have:

for add or remove menus

to change order of menu buttons.

Text : use to change title

Link : add URL to provide a link to the title

Note: once you insert the menu, software will attach a script file “SpryAssets/ SpryMenuBar.js” and two Style Sheet files “SpryAssets/ SpryMenuBarHorizontal.css” and “SpryAssets/ SpryMenuBarVertical.css” itself. So if you need to move the page then you also has to move these files as well.

You may download the source code from here, click here.

Enjoy Spry Dropdown Menu

Cheers!

An accordion menu is usually a vertical list of items in which one of  the listed item is expanded into regular window. Other

links/Navigation/Menu are stacked on top or bottom of each other. Depending on the main menu, sub-menu stretched below the activated item. It is an advance and interactive way of displaying a menu. In this tutorial I will make it more simple for you to create your own  Accordion Menu with the help of Dreamweaver CS3.

Step 1: Create a new HTML page and save it in any folder.
Step 2: From the top menu, select Insert>Spry>Spry Accordion.  Something similar to the image below:

Step 3:  Previous step will add a DIV based box in the HTML page. In  the Design View, replace Label 1 with your actual Menu title and  Content 1 with the content or link/Navigation you have. I am putting  Links there. Similarly make changes to the second one.

Note: once you insert the menu, software will attach a script file  “SpryAssets/SpryAccordion.js” and a Style Sheet file “SpryAssets/SpryAccordion.css” itself. So if you need to move the page then you also have to move these two files as well.

Download the source file from here. Click here

Enjoy Accordion working.

Cheers!