We all know the value of making it easy for visitors to navigate a website. In general, your visitors are unlikely to search every single page of your site just to get the information they want. If they cannot easily get to the information they are looking for, they'll just leave the site.
There are many ways to improve the navigation on your site. One method is to put a drop-down navigation menu on your website, which is the subject of this article.
For the curious, some of the other ways of improving your navigation include putting a site search engine and adding a what's new section.
Important: if you are looking for a button menu like that seen on the side of thesitewizard.com, you should use the CSS Menu Button Wizard instead of the method given here.
A drop-down menu typically contains a list of pages on your site that your visitors can select from a drop down list. When he selects the page, he is automatically transported to the appropriate page. An example of such a drop down menu can be found below. Note that this example menu is just a dummy menu: it does not actually work — it's here to show you what the menu looks like.
The first thing you need for the drop down navigation menu is to put the following JavaScript function somewhere in your web page, before the actual menu itself. For example, you can put it in the <head> section of your document, or if you prefer, immediately before the drop down menu itself (see later).
The function takes a single argument — the form object. It then proceeds to extract the selected value from the object and load the page from that URL.
Please change the "baseurl" given above to the domain name of your site. I did not terminate the URL with a slash because all my filenames in the menu below start with the slash. If you terminate your URL here with a slash, do not start your filenames below with a slash.
If your site is designed with frames, you will need to use "top.location.href" instead of "location.href" if you want the new document to replace your all your frames. You can leave it as it is if you want the document to appear in the current frame. Alternatively, if you want it to be in another frame (sibling of the one in which the menu appears), just replace "location.href" with "parent.your_frame.location.href" where "your_frame" is the frame named "your_frame".
Now for the menu itself. Since the exact URLs for your menu and the names of the pages will differ for your site, you should modify the code given below for your situation.
Please note the following about the menu code above:
This menu code goes into the portion of your web page where you want your menu to appear.
The action attribute for the <form> tag is required under HTML. Since our form never uses it, you can place some dummy value there, as I have done above.
It is helpful to put something like "Select a Page" as the first item in the menu so that visitors looking at the drop down box will know that it is a menu. I have set the "selected" attribute as well for that item to ensure that it is shown as the default selection when the page loads.
The "Miscellaneous" menu item illustrates the use of subtitles or separators in the menu. They serve as organising tools to help visitors see the various sections in the menu. Many modern browsers will recognise the "disabled" attribute and not allow visitors to select that item. However, if you want to be sure, you can set the value of such item to your main page or your site index.
You will, of course, have to change the filenames in each of the option "value" tags as well as the description of those files.
Trivial isn't it? However, changing your pages is not so trivial if your site has numerous pages. Worse, if you have the intention of including every page on your website in that menu, each time you add a new page, you have to go through all your pages to modify the menu. Sooner or later, the menu will cease to be a novelty.
I faced this problem when I decided to convert all of thefreecountry.com's pages (which numbered around 150 at that time) to include a drop down menu. For those of you familiar with this site, you will probably know that I add new pages (with new articles or with other categories of free stuff) rather regularly. Not only would the conversion be a pain, the maintenance would be a nightmare. [Update: thefreecountry.com no longer uses such a menu. It now uses the same type of button menus generated by my Navigation Menu Wizard.]
To minimize your maintenance nightmare, you might want to consider one of the following options.
Put your site in frames, and place the menu in one of the frames that is loaded for every page. That way, you only have to modify one page. The disadvantages of this method include: visitors who do not arrive at your site through your frameset page would not get to see the menu (happens more often than you think!); many people strongly dislike frames; some older browsers cannot handle frames; and unless you take special action, search engines do not index a site with frames particularly well.
Put your menu in a separate file, and include it on every page using server side includes (SSI). Once again, each time you add to the menu, you only need to modify one file. The disadvantage here is that some web hosts require files using SSI to have a ".shtml" extension for all your pages, so if your pages do not already have this extension, it means that you have to rename all your pages. This is however a short-term problem. Once you complete that renaming, you have solved it. You should of course set up some sort of redirection so that people going to your old .html pages will be redirected to the renamed versions.
Put your menu in a separate file, but prior to uploading, run a script on your own machine that inserts it into every page. Then upload the modified pages to your site. The disadvantage of this method is that everytime you modify your menu, you have to re-upload every single page that uses that menu.
Having a drop down navigation menu improves your site navigation, and hopefully allows your visitors to locate the information they need on your site. The JavaScript menu described here is one way in which such a menu can be implemented.
Copyright 2000-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Drop Down Navigation Menu JavaScript
