Getting Started

The Sothink DHTMLMenu site has a tutorial for beginners, and we suggest that you use that tutorial to get started. To view the tutorial, click here.

Here are some suggestions based on our use of the program:

1) Make use of the Global Settings>Web Path for Script Path, Image Path and Link Prefix. If you want to preview your pages locally during site development, set the paths as local paths (i.e., C:/mysite/menu/) but, before publishing the menu, we suggest using absolute paths (i.e., http://mydomain.com/mysite/menu/). Also, set the Link Prefix to your site's URL (i.e., http://mydomain.com/mysite/).

We also like to use a floating menu. In Global Settings>Menu Type select "Float", specify the X and Y coordinates for the menu, and check "Auto-scroll" for the Y coordinate. One of the arguments for the use of frames is that site navigation is always available. The use of a floating menu keeps site navigation in view without the use of frames.

Here are the Global Settings we used for this site:

2) In Global Settings>Highlight select the link to "Auto highlight current item" and select the desired highlighting settings.

3) If any of the site pages include Flash movies or form elements that might hide a portion of your menu, follow the instructions here.

4) Don't include the menu code in the individual pages of your site. Instead, place the menu code in an external JavaScript file. This will improve the operation of your site and make it easy to update the menu. When you make changes to the menu, just update the JavaScript file and upload the single file to the server. When you publish your menu, select the following option:

5) Place the menu files (stm31.js, the JavaScript file with your menu specifications, and any graphics used by the menu) in a separate directory (folder). For this site, we placed the menu files in a subdirectory named "menu".

6) Place a link to the main JavaScript file (stm31.js) in the <head> of your pages and a link to your menu specification JavaScript file (we named our file "menu.js") in the <body> of your pages. If you use a floating menu and specified X and Y coordinates in Global Settings>Menu Type, you can place the link anywhere in the <body> of your page. Otherwise, place the link at the location in the page where you want the menu to appear (i.e., within the div or table cell). We used a Dreamweaver template to generate the pages for this site, and we placed the following code in between the <head> and </head> tags in the template:

<script type="text/javascript" language="JavaScript1.2" src="http://pittwebs.com/sothink/menu/stm31.js"></script>

This site uses a floating menu, so we placed the following code in the template immediately after the opening <body> tag:

<script type="text/javascript" language="JavaScript1.2" src="http://pittwebs.com/sothink/menu/menu.js"></script>

7) Important! I recently read a statistic that approximately 10% of Web browsers have JavaScript turned off, and the rate is even higher with some businesses. It is very important, therefore, that you provide an alternative to a DHTML menu. Go to "Advanced>Generate Site Map..." , generate a site map, and place links to the site map in visible locations on each page. On this site, we placed one link in the nav div, where it will be visible if JavaScript is disabled, and another link in the page footer. The site map and links will make the site friendly to search engines and accessible to browsers that have JavaScript disabled.