Now it's time to add a menu to our web site. We will put the menu on the previously created template so every page that is using it will automatically have the menu as well.
We will insert our menu above the Editable Region so it appears on top of each page. To do that click just after the <body> tag in Code View (or code part in Split View) and click the Insert button on the toolbar.
The DHTML Menu Add-in will open. There you can create a structure of the menu, choose the graphical appearance etc. To learn more about building the menu, see Building the menu section.
For our sample site we will create a menu consisting of two main items and one pop-up item.
Click the empty placeholder in DHTML Menu Add-in's Menu Structure editor and type Home. In the Menu Properties grid on the right, move to the Destination URL field and type index.htm - this is a relative URL pointing to our home page from the site main folder which is c:\MyWebsite\.
Important note
When you define a Destination URL for a menu item, make sure it points to the destination page in the right way. The simplest way to do this it to type a relative URL pointing to the page from the root/main site folder. For the items above we specified index.htm for Home page because the file resides in the root folder and hobby/movies.htm for Movies page because the movies.htm file is in the hobby subfolder.
Now click on the placeholder next to the Home item in the structure editor type Hobby and press Enter. Then move to the placeholder under the Hobby item (press down arrow key on the keyboard), type Movies and then hobby/movies.htm in the Destination URL field in the properties on the right. This menu item will point to the previously created Movies page.
We can choose some fancy Skin for our menu by clicking Choose Skin button on the Appearance tab.
Click the Done button, and provide a file name to save the menu project when prompted. It can be c:\sample.dms for example.
After a while DHTML Menu Add-in will generate the menu and it will appear on the template page. Don't be surprised if the menu doesn't look like it should. Since Microsoft Expression Web editor doesn't process JavaScript code the menu may look a little bit strange compared to the final result in the browser.
Important note
The DHTML Menu Add-in has created an additional folder called menu-files under the Web Site root. This folder contains files required for the menu to work and has to be published with the Web Site.
When you save the template file you will be asked whether to apply changes to the attached pages. When you choose to do so, the menu will appear on Home and Movies page.