Effective navigation for your website:
JavaScript multilevel menu

By Dr Alex

Providing your visitors with an easy way to navigate your site is of major importance: if people cannot easily find what they are looking for - and fast - they will leave.

As the very minimum, effective navigation needs to fulfill the following:

No pages should be more than 3 mouse clicks away.
No major pages should be more than 2 clicks away.
Visitors must be able to clearly identify the links. Using images for navigation or changing the links with style sheets is fine as long as your visitors have no doubt that they are indeed links.
Consistency is important. For example, if the left bar is the main way of navigating the site, do not delegate this job to the right bar or the top strip on subsequent pages. Also, make sure your links are represented in the same way throughout your site.
Navigation must be well-organized. This means that pages should be logically grouped together.

An easy and straight-forward way to provide effective navigation is to use menus. There are several important advantages to this approach:

People are familiar with menus and know how to use them.
Menus allow you to easily organize your pages into groups.
No matter how well you organize your pages, some pages will always belong into more than one group. Menus make it easy to place the same link under different categories.
Using clear, concise words in your menu items is better than using images, which may mean different things to different people.
Menus placed on top of your page or on the left bar provide consistency throughout your site.
Websites grow over time. Menus work well even for most complex navigation needs.

Unfortunately, HTML does not provide you with an easy way to add menus to your web pages. Coding your menus from scratch is a major undertaking.

The fastest and cleanest way is to combine JavaScript and cascading style sheet (CSS). Your JavaScript CSS rollover drop down menu is small, efficient, and supported by different browsers and operating systems.

If you search for a free JavaScript menu generator you might be discouraged by the time and effort needed to find anything of value. And if you ever tried to create DHTML FrontPage drop down menu layers you'll know how hard it is. Yet, there is a way to get a free JavaScript menu bar:

Click here to download Antechinus® JavaScript Editor, and

Use its visual menu designer, which makes the complex task of creating and maintaining your menus a breeze - no experience with JavaScript needed.

JavaScript Editor will stop working after 30 days if you do not register it, but to design your menu you only need minutes, and you can keep it after the program has expired. No other free DHTML menu software can generate tiny 10Kb menus to serve the needs of your entire website.

How does it work? Everything is done visually - no coding required - so when you open your web page click on Visual Web Designer. To add a menu, select Insert / Add Menu.

Depending on your needs, select between the JavaScript horizontal menu creator (top menu), and the vertical (left side menu).

This creates a default menu, which you can easily modify.

It is important to know that there is just one copy of the menu, with your web pages linking to it. This solution is best because:

Adding or changing a menu item is automatically reflected on all of your pages. Have you ever tried to add a new link to 50+ web pages? This is a HUGE job if done conventionally by modifying every page. With JavaScript Editor you only make a change in one single place.

Your site grows in complexity over time. With JavaScript Editor’s visual menu editing you are fully in control, and you have an important added advantage of making the loading of your pages much faster. Why? Because web browsers automatically cache the file with your menu and use it with all of your pages. Loading your pages becomes much, much faster.

Here are some JavaScript menu bar samples:

JavaScript mouseover drop down menu - vertical

JavaScript mouseover drop down horizontal menu

The Add Menu command creates your menu, and places the reference to it to display it as part of your web page. After that, maintaining your menus us easily done with the help of 2 tools:

1. Use Menu Colors to select the color scheme for your menu (and refine it if needed), and

2. Click on Edit Menu to add new menu items, and change or delete the existing ones.

 

It does not get simpler than that. When you put lots of effort in providing good navigation you do not want to waste time in a constant struggle to keep up with the changes. The visual menu designer does everything for you.

Navigation technologies often work on only some browsers or some operating systems. Menus you design with Antechinus® JavaScript Editor are multi-platform, multi-browser.

Note that a JavaScript text menu has important advantages over free menu scripts Java language supports:

Java requires Java Virtual Machine in place. JavaScript does not.
For security reasons people often disable Java in their browsers. JavaScript cannot access the file system on the client machine and is therefore harmless.
JavaScript menu bar is only 10Kb - impossible to achieve with Java.

It is worth noting that JavaScript menu bar is not limited to web pages: you can easily use it in your HTML Applications (HTA). Here is a sample horizontal rollover JavaScript menu inside the HTA:

If you are not familiar with HTA's, they are stand-alone HTML applications powered by JavaScript. They have the extension .hta and run when you double-click them, just like any other executable.

To generate a HTA in seconds in JavaScript Editor, type hta and press Ctrl+space: this opens the application template for you to fill in.

HTA's work on Windows, can read and write files, and are absolutely great for rapid design of various utilities.

Putting it all together

Using menus as the main way of navigating your web site has many advantages, both for your visitors, and for you as a developer. You can easily design your menus with JavaScript Editor’s visual menu designer, and save plenty of time and effort in on-going maintenance.

...

Visually create your menus in no time with Antechinus® JavaScript Editor