Creating a DHTML navigation menu
Developing navigational structures that are able to cope with the ever-increasing size and complexity of websites is one of the greatest challenges Web designers face.
This month we'll show you how to create a navigational system for your website that uses drop-down menus. Drop-down menus provide a means of compacting a website's navigational structure while allowing any part of a website to be accessed with minimal mouse-clicking.
For this tutorial, you'll need a copy of the BestAddress HTML Editor. If you don't yet have the program installed, you can download a free evaluation version from http://www.mmaus.com/bestaddress.html.
- Start the BestAddress HTML Editor, and create a new document by choosing 'New' from the 'File' menu. In the window that appears, choose the 'Blank HTML Document' option and click 'OK'.
- Position the cursor between the
<body>and</body>HTML elements; this is where your navigational menu will be created. - Open the DHTML Navigation Menu Designer window by choosing the 'DHTML Navigation Menu' option from the 'Insert' menu.
- You'll now begin the process of creating the menu structure. Menus consist of two items: captions, which are grouped as a horizontal navigational bar across the top of the webpage, and list items, which drop down from the each caption.
- Type a name for the caption in the 'Caption' box, make sure the 'New Menu Caption' option box is selected, and click the 'Add New' button (situated towards the middle of the window).
- Now create individual menu items which drop down from the caption. Type the name of the sub-item in the 'Caption' box, then type a URL (Internet address) in the 'Link' box. Ensure the 'Dropdown List Item' option box is selected, and then click the 'Add New' button.
- Repeat step 6 for each sub-menu you want to create under the current caption, and step 5 when you want to move on to the next caption.
You'll notice that the preview pane at the bottom of the DHTML Navigation Menu Designer window displays the layout of your menu. In the list, captions are aligned to the left, while menu items are indented (...) from each caption.
Clicking an item in the preview pane will allow you to modify the layout of the menu by clicking the up and down arrow buttons.
Once you've designed your drop-down menu's layout, click the 'Style' tab if you want to modify the colours and menu width, then click 'Insert'.
You can integrate your menu into your website by either including it in a website template, or, in the case of existing websites, you can use ChangeSite (http://www.mmaus.com/changesite.html) to apply the menu throughout your entire site. If you choose to do the latter, remember to make a backup copy of your entire website before you begin. You also need to run ChangeSite twice for both sections of code generated as part of the menu design.
Remember, if you require further assistance creating your menu, help is always at hand by contacting our free www.SupportBase.NET service.
