How to add simple drop down menu into template?

Q: My question was to learn if there is a central point where this menu drop down will function through an entire site (menu drop down menu) and if/when the menu needs to be changed it will automatically propagate through the site or if you are required to change the menu on each page manually.

For example, I have used MenuMachine in the past and it had the capability of including code within an html file that pointed to a central menu folder. Thus, you would only be changing the menu in one location and upload that folder only to the server.

A: 1. Use "Publish" function and save your menu. You can enter any name you like, for example enter "menu". So you'll have menu.html file and "menu_files" folder with all menu files.

2. Start Dreamweaver and open your website. Lets create the template for the website which we'll use on all pages. Delete all unnecessary code from this page.

3. Now you should add a menu drop down in your template page. Switch to the Design view mode. Decide where you would like the drop down menu to appear in your page. Click in the spot you want the code to appear in and type the phrase: your code here

4. Open the generated in CSS3Menu menu.html page in any text editor. Copy the following code:

<link rel="stylesheet" href="menu_files/css3menu1/style.css" type="text/css" />
<ul id="css3menu" class="topmenu">
        <li class="topfirst"><a href="#" title="Item 0">Item 0</a></li>
        ...
</ul>



5. Go to the "Edit Menu" with Dreamweaver and select the "Paste" option to paste the menu code that we copied to the clipboard earlier. Since the phrase we typed was highlighted, it will be replaced when we paste the code in.

6. To display menu correctly you should change "menu_files/" to "templates/menu-files/".
Find the following code:

<link rel="stylesheet" href="templates/menu_files/css3menu1/style.css" type="text/css" />


Notice that if your website has a complex structure with many folders and subfolders, the best way is using of absolute links.
For example:

<link rel="stylesheet" href="http://domain.com/templates/menu_files/css3menu1/style.css" type="text/css" />



Absolute paths will be the same for all folders.

7. Switch to the Design view mode. Now you should select regions that will be editable. For example lets create three editable regions: two titles and the main content area. Right click the selected area, choose the templates, and make the template become new editable region. You can enter any name you like, for example enter "content".

8. Save this file as a template. So, the file will store in the assets of the files.

9. Your template will be saved in the "templates" folder. Now you should copy the "menu_files" folder into the same folder with your main_template.dwt page ("templates" folder).

Related