SmartMenus - Manual

version: 4.7.3

For IE 4+, Netscape 4+ (including 6+), Opera 5+ & Konqueror 2+

Previous versions: 24
by Vasil Dinkov from Plovdiv BULGARIA - 20 years old without job :-(

Manual contents:

	Introduction
	How to use the menus
		1. Configuring
		2. Showing/Hiding
		3. Implementing the script
	Important howtos
		1. To define the menus' content
		2. To add more menus
		3. To remove menu
		4. To define the menus' position
		5. To hide elements that are in the "menus' way"
		6. Showing/Hiding of the sub menus
		7. To add custom status bar description text for any menu item
	Important notes
		1. About "s_autoSELECTED" and "s_autoSELECTEDItemsClickable"
		2. The hierarchy of the menus
		3. Environmental pollution
	Known bugs - how to avoid them

Introduction

These are one of the most flexible, easy to use and surely the smallest (features/size) DHTML menus available out there for free (for personal use). Besides their size won't be too much for any kind of connection to the Internet. The script is fully compatible with Internet Explorer 4+, Netscape 4+ (6+), Opera 5+ (with v1.3) & Konqueror 2+ (with v4.6).

With v4.5 the script's capabilities and flexibility have been greatly improved. Now each menu can have its' own style. You can create endless number of submenu levels. Your first level menus can be permanent (always visible and absolute positioned) and in this way they can be used as toolbars (only vertical). You can have SELECTED and NOROLL items in the menus. You can show the menus at place relative to the mouse event. The script is fully compatible with all browsers in standards-compliance mode. And many other improvements. The script is written in the most economic possible way to support maximum number of browsers and looks and feels the same on all supported.

contents

How to use the menus

1. Configuring

Define all the variables in sections 1 & 2 in the Script ARRAYS file (s_arrays.js) (OPEN WITH TEXT EDITOR). Then in section 3 you should define the colors, font, border... in the CSS array(s) that will be used by the menus. If you want only one style for the menus on your page you will need only one CSS array. Everything is commented in the file so you should not have any problems in this section. Then we come to the section 4 where you should use the s_add() function to add menus for creation. This is a new way for defining the different menus. By using the s_add() function you no longer need to count and number your menus. You can easily add, remove and modify each menu without having to rearrange the menus' order again. You have to define 8 parameters when calling the function. All you need to know is well commented in the s_arrays.js file so you should not have any problems. If you need help look at the Important howtos section of this manual.
Now you've configured the s_arrays.js file and you need to look at the s_loader.js file. The values of the vars in it should be equal to the source of the ARRAYS Script s_arrays.js and the main Script s_script.js file.

2. Showing/Hiding

You can show the menus by using the s_show('NAME',event) (where NAME is the name of the menu you want to show) function. It's better to use elements with fixed width & height because if the user decides to enlarge the text size from the browser toolbar, the menus will look as if they're not on their place (if the menus are absolute positioned). That's why I'm using images in the examples. You may use the onmouseover or onclick event handler. For example the following will show the menu named "download":

<a href=javascript:; onmouseover=s_show('download',event) onmouseout=s_hide()><img src=... ></a>

As you see you have to also add onmouseout=hide() block in every element's tag that shows menu. This will hide the menu.

3. Implementing the script

Now that you've configured the script, you need to link it to your page. You have to do two things. First insert in the page header (inside the <HEAD> and </HEAD> tags) the following HTML:

<script language=JavaScript>
function s_show(){return false}
function s_hide(){return false}
if(window.event+''=='undefined')event=0
</script>

And then right after the <BODY> tag insert link to the Script LOADER (s_loader.js). Should look like this:

<script language=JavaScript1.2 src=path_to_s_loader.js></script>

IMPORTANT: Make sure the link to the Script LOADER is located right after the <BODY>! Otherwise the loader may not detect some browsers correctly.

By using a loader script you will ensure that the SmartMenus will not cause error in any unsupported or old browser.

contents

Important howtos

1. To define the menus' content

You are using the s_add() function for adding menus. The last parameter you send to this function is an array. This array contains some two-item arrays, any of which in fact is the definition for the current menu item. In the first item write the href for the menu item and in the second the text to be displayed.

NOTES :
- The links should be addresses to which the user will be navigated in the current window or in new one (change the s_target variable in section 1 of s_arrays.js).
- However you can make exceptions & override the s_target variable for any link you want. Do the following: the link should look like this '*theTarget*theActualLink'. theTarget may be self, top , newWindow or any frame name. For example:
'*self*http://www.yahoo.com' means that the Yahoo page will be loaded in the current window,
'*top*http://www.yahoo.com' means that the Yahoo page will be loaded in the top window (useful with frames),
'*newWindow*http://www.yahoo.com' means that the Yahoo page will be loaded in new window &
'*main*http://www.yahoo.com' means that the Yahoo page will be loaded in the frame named main.
- The links can call javascript functions if they look like this 'javascript:theFunctionHere()'.
- You can have SELECTED (with a special style, defined in the STYLESHEETS) and NOROLL (without rollover) menu items. To have such item simply set its' href to 'SELECTED' or 'NOROLL'. In v4.6.x of the script such item could not have link or show sub menu. Now you can add link or show sub menu by using the following syntax
'[show:NAME;]SELECTEDorNOROLL[;linkInfo]'. The parts between "[" & "]" are optional and any may be missing. For example:
'show:downloads;SELECTED;*self*downloads.html' means that the item will be SELECTED, if the mouse goes over it, the menu named "downloads" will be shown and if clicked, the "downloads.html" will be loaded in the current window.

2. To add more menus

Go to the MENU DEFINITIONS section of the s_arrays.js and copy & paste one of the added menus. After that change anything you need in the parameters (name, level, placement...) and the menu will be created. After that it can be called by another menu or if is a first level- shown with the s_show('NAME',event) function.

3. To remove menu

Go to the MENU DEFINITIONS section of the s_arrays.js and delete the menu you want.

4. To define the menus' position

In the s_add() function when adding menus you define the top and left placement of each menu. The default value of the TOP and LEFT is ' ' (empty quotes). When it's leaved untouched the menu will be shown at the place where the mouse event occurred. If you want to absolutely position any menu, set integer value (pixels) to the TOP and LEFT and don't use quotes. You can also use the mouseY and mouseX keywords for positioning the menus. For example 'mouseY+20' for TOP and 'mouseX+20' for LEFT means that the menu will pop on 20 pixels below and on the right of the mouse event. There's no difference between ' ' and 'mouseY' or 'mouseX'. You can also use a special function as a keyword, which for example may return the page middle and this way center align your menu. Use your imagination according to your needs. Example can be found in the "Samples -> Relative Position -> Non-permanent menus" folder.

NOTE: The above notes matter only for LEVEL 1 and non-permanent menus. For all menus which are not LEVEL 1 (are subs) leave the TOP and LEFT value ' '. For permanent menus you can use integer values (absolute positioning). To learn how to relatively position any permanent menu look at the "Samples -> Relative Position -> Permanent menus" folder.

5. To hide elements that are in the "menus' way"

This feature has been removed in v4.0+ of the SmartMenus script due to the small interest and the difference in the browser performance. If someone needs this let him call me. You'd better keep your menus away from form elements and embeds.

6. Showing/Hiding of the sub menus

If you want any of the items of any menu to show submenu set its' href to 'show:NAME' where NAME is the name of the menu to show. You can still add link to the item or make it SELECTED or NOROLL by using this syntax
'show:search[;SELECTEDorNOROLL][;*newWindow*http://www.yahoo.com/]'. The parts between "[" & "]" are optional and any may be missing. You have to separate the different parts with ";" (semi-colon).

7. To add custom status bar description text for any menu item

You can easily add custom status bar description text to any menu item by adding a third array item to the array, which defines the menu item. Sounds a bit confusing but here's a simple example of a menu item with custom status bar description text:
['http://www.yahoo.com/','Yahoo!'[,'Visit the Yahoo! home page']] The part between "[" & "]" is the status bar description text and is optional & may be missing. If custom status bar description text is not specified for the menu item, the link will be displayed in the status bar instead.

contents

Important notes

1. About "s_autoSELECTED" and "s_autoSELECTEDItemsClickable"

These are new variables in v4.7+. They control a new feature of the SmartMenus. If s_autoSELECTED is set true the new function will find the item which links to the current location of the window and will automatically make it SELECTED. The s_autoSELECTEDItemsClickable variable controls whether the link info should be removed from the item or it will remain clickable.

HINT: If you have an item linking to your start page, don't use your default document name (index.html, index.php, default.htm ...) as href for the item- instead use the absolute path (http://your_server/). Otherwise the function will not make the item SELECTED when the user visit your site for the first time (unless the user write the whole path http://your_server/your_default_document).

2. The hierarchy of the menus

Very important thing you should be careful with is the defining of the LEVEL (the second parameter you send to the s_add() function) for the current menu when configuring the menus. This shows the place of the menu in the hierarchy of the current tree of menus (first level, sub, subsub...). For example if you want an item from a first level menu to show sub menu, the menu you want to be shown should have LEVEL set to 2. You should also know that you can call only first level menus with the s_show() function (otherwise you'll receive an error message).

3. Environmental pollution

The SmartMenus v4.5+ is "environment friendly" . All global variables, functions, ids, names... used in the script start with the "s_" prefix so you don't have to worry that a conflict may occur between the SmartMenus script and other scripts or page elements on your pages.

contents

Known bugs - how to avoid them

1. All browsers: You are going to have problems with the current menu item if the href corresponding to this item ends with the = (equal) symbol. So if you need to define variables for server side script (ASP, PHP...) with the link try to not put the = (equal) symbol at the end of the link info when defining the items.
2. All browsers: If you define a global stylesheet for any of the DIV, TABLE, TR, TD, FONT elements in the stylesheets on your pages, you may have troubles with the style of the menus. Example: <style>table{...}td{...}div{...}</style> Instead of using global stylesheets for your page elements use style classes. Example: <style>table.classname{...}td.classname{...}div.classname{...}</style>
3. Netscape 4: If you are using icons or images as items, always define their width and height (in the <img> tag). Otherwise Netscape loads the menu very slowly (even doesn't ever load it and stops responding)- at least I have this problem with NS4.03 on Win2k.
4. Netscape 4: Netscape 4 has problems with the css font size values on Windows (as well with fonts globally on all other platforms). That's why <FONT> elements are used for defining the font size in the old browser. You will have to reconcile to this old manner of font size definition.
5. Netscape 4: This strange browser experiences another difficulty. If you want to use HTML tags in the text for any item (like SPAN, FONT...) don't specify any style attribute in the tag. This crashes the browser and it doesn't succeed in loading the page. Instead write a CSS class and link it in the tag with the class=className.
6. Netscape 6.0 on Linux: Strange visual effect may appear. The menu border may be thinner between some items. I think this appears with certain fonts.
7. Opera 5.0 on Linux: Incorrect functionality. The menus are getting hidden when moving outside the item's text.
8. Konqueror: If switching too fast between different menu trees, the browser may look as if it has lost focus on the page for 1-2 seconds. I think this is a browser bug. Anyway, it is not a serious problem.
9. Konqueror 2.2.2: The cross-frame support is buggy.

Report a bug

contents