Drop Down Navigation Menu JavaScript

Improve the navigation on your site with a drop-down menu. Free JavaScript


Drop Down Navigation Menu JavaScript

by Christopher Heng, thesitewizard.com
 

Improving Your Site Navigation

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.

Using a JavaScript Drop Down Menu

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 simplest way to get such a menu for your website is to use the thesitewizard's Navigation Menu Wizard to create a customized menu for your site according to your specifications. Alternatively, you can read this article which describes how such a menu is constructed.

Constructing Your Drop-Down Menu

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:

  1. This menu code goes into the portion of your web page where you want your menu to appear.

  2. 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.

  3. 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.

  4. 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.

  5. You will, of course, have to change the filenames in each of the option "value" tags as well as the description of those files.

Changing Your Pages

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.

To minimize your maintenance nightmare, you might want to consider one of the following options.

  1. Use the JavaScript menu code generated by thesitewizard's Navigation Menu Wizard. Be sure to select the "Pure JavaScript version" when generating the code. The Wizard generates code where all the menu items are contained in an external JavaScript file. Everytime you need to add a page, simply change that external JavaScript file, and the menu on all your pages will automatically be updated, instantaneously. Using this code has an additional advantage — if your visitor does not have JavaScript, your menu will not appear on the page at all. This is good since the menu will not function without JavaScript anyway, and having it appear on your page but not working tends to make visitors lose confidence in your website.

  2. 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.

  3. 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.

  4. 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.

Conclusion

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 http://www.thesitewizard.com/

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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 http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Drop Down Navigation Menu JavaScript





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.