Visual Menu uses modern engineering and design techniques to offer a seamless, visual approach to creating real DHTML menus. For people familiar with pseudo DHTML menus common in the marketplace, Visual Menu may seem a little strange at first. Visual Menu has no programming interface, nor does it rely on you to supply event handlers of any kind to perform actions. Your menu can be designed completely within a wizard called Visual Menu Maker, or hand-coded using CSS and your choice of JavaScript or XML.
Unlike inline menus which require the user to store large amounts of menu data in each page of their website in nested ul or div elements, Visual Menu is modular: The menu data file, style info, and code are kept in separate files, or in other words, modules which only need to be loaded once by the browser because the browser caches them. Modular menus also make modification and upgrading a snap because all that you need to do is replace the single module that needs to be changed, rather than having to change all the inline code of every single file of your website.
Version 1.0 of Visual Menu was the first menu in the industry to introduce the concept of separation of content from presentation, by describing its look entirely with a CSS
Style Sheet. Because Visual Menu uses CSS Syle Sheets, some people confuse it with Pure CSS menus. Pure CSS menus cannot be modular because they
require inline data. They also lack scalability as they require a fixed width. Pure CSS menus are fine for personal web pages that need basic navigation capability, yet are not
adequate for industrial use.
Visual Menu offers numerous features. If there's something you need to do with a DHTML menu, Visual Menu can probably do it! If you have a
question about whether Visual Menu can accomplish a particular task or how this task can be accomplished, please don't hesitate to contact support, which is available 365 days a year.
Quick Start
When you complete the "Publish Options" step of the Visual Menu Maker wizard, it generates a bare bones web page for you that includes the Visual Menu that you designed. The web page is named visual-menu-test.htm. The most straight-forward way of configuring your web page with Visual Menu is to add your own content to visual-menu-test.htm. By default, visual-menu-test.htm looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visual Menu Test</title>
<!-- Start Visual Menu specific markup for head tag -->
<link href="vm-style.css" rel="stylesheet" type="text/css">
<script src="vm-data.js" type="text/javascript"></script>
<script src="vm-menu.js" type="text/javascript"></script>
<!-- End Visual Menu specific markup for head tag -->
</head>
<body style="background:#FFFFFF">
<!-- Start Visual Menu specific markup for body tag -->
<div id="id_vm"></div>
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
<!-- End Visual Menu specific markup for body tag -->
</body>
</html>
Note that the HTML comments generated by Visual Menu Maker are not required by Visual Menu. You may delete them. However it is strongly recommended that you keep them as it mentally helps you to keep menu code together as a unit, as it should be, and separate from other HTML elements in your page.
Including Files in Your Web Page
To display a Visual Menu in a web page, you need to include the following file types in the
<head> tag pair of your HTML document:
By default, Visual Menu Maker creates these files for you and generates the HTML code for including these files in the <head> tag pair of your HTML page
<!-- Start Visual Menu specific markup for head tag -->
<link href="vm-style.css" rel="stylesheet" type="text/css">
<script src="vm-menu.js" type="text/javascript"></script>
<script src="vm-data.js" type="text/javascript"></script>
<!-- End Visual Menu specific markup for head tag -->
The Menu Container is the <div> or <td> tag in which the Base
Menu is placed.
You must assign a unique value to the id attribute
of the Menu Container.
No other HTML elements on your web page should be assigned this id value. By default Visual Menu Maker makes the Menu Container a <div> element and assigns it the id of "id_vm". The value of the id attribute is passed to the first parameter of the Visual Menu Constructor.
In the first line of sample code below, the <div> element acts as the Menu Container and is assigned an id attribute of "id_vm". The Visual Menu Constructor is called in the next line. Notice how the first
parameter passed to the Visual Menu Constructor is also "id_vm". What this does is tell Visual Menu that it should reside in the HTML element with the id of "id_vm" assigned to it in the line above.
<div id="id_vm"></div>
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
Note that if you were to stick an HTML element in between the Menu Container and the <script> tag that requires a lot of bandwidth such as an <img> tag that loads a high resolution image like this:
<div id="id_vm"></div>
<img src="very-large-image.jpg">
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
the menu would not appear until after the image has loaded, and you might wonder why the menu took so long to load. This is why it is always a good idea to keep Visual Menu HTML code together.
Placing the Menu Container below the Visual Menu Constructor like this:
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
<div id="id_vm"></div>
will not work and will cause a JavaScript error. This is because Visual Menu is attempting to place itself inside a Menu Container that does not yet exist. Because the <div> element has been placed below the call to the Visual Menu Constructor, it doesn't exist because it hasn't yet been parsed by the browser.
You should not designate the <span> or any other tag as a Menu Container
or your menu may behave unpredictably in some browsers.
In order to be compliant with the Opera browser, in certain rare cases you will need to use a table cell <td> tag instead of a <div> tag. For example:
<table><tr> <td id="id_vm"></td> </tr></table>
It is recommended that you test your menu out on Opera to see if this is necessary.
You will need a Menu Container for each Base Menu you place
on an individual web page. Since id attributes
must be unique, each Menu Container must have a different id tag.
The following is an example of using two Menu Containers. Each Menu Container
houses a separate Base Menu.
<div id="id_menu_container_1"></div>
<div id="id_menu_container_2"></div>
For more information on configuring multiple menus, see Configuring Multiple Menus on the Same Page.
The Menu Container can have static, absolute, or fixed CSS positioning.
It is important
to follow the rules below when positioning your Menu Container,
or your menu will behave unpredictably in some browsers:
-
Relative positioning is not supported.
Do not place your menu in a relatively positioned Menu Container. The Menu Container should also not have an ancestor tag that uses relative positioning.
-
If the menu is using absolute or fixed positioning, apply
the positioning directly to the Menu Container.
For example, this is the correct way to apply absolute positioning to a Menu
Container. It is correct because the absolute positioning is applied directly to the Menu Container.
<div id="id_vm" style="position:
absolute; top: 5px; left: 5px"></div>
The following is the wrong way to
apply absolute positioning to a Menu Container. It is wrong because
The Menu Container resides in an absolutely positioned ancestor tag:
<div style="position: absolute; top:
5px; left: 5px">
<div>
<div id="id_vm"></div>
</div>
</div>
-
If the Menu Container is using static positioning, all
of its ancestor tags must be statically positioned.
Here is an example of the wrong way to apply static positioning to a Menu Container:
<div style="position: absolute; top:
5px; left: 5px">
<div>
<div id="id_vm"></div>
</div>
</div>
This is the same example of what not to do, that we used above. If you want a statically positioned Menu Container, all tags in its ancestry
must also be statically positioned. Accordingly, you must remove the absolute
positioning of the ancestor element, as follows:
<div>
<div>
<div id="id_vm"></div>
</div>
</div>
-
If the Menu Container is absolutely positioned, it should appear after all other absolutely positioned elements.
Because of an Internet Explorer quirk, Sub Menus of an absolutely positioned Menu Container do not overlap absolutely positioned elements that come after it in the HTML markup. Here is an example of markup which will not work properly in Internet Explorer. Sub Menus of the Menu Container will not appear over the
<img> element, which appears below it in the markup.
<div id="id_vm" style="position: absolute; left: 5px; top: 5px"></div>
<img src="foo.gif" alt="foo" style="position: absolute; left: 5px; top: 20px"/>
Below is an example of the correct way to place absolutely positioned elements in your markup, if the Menu Container is absolutely positioned. It is correct because the
<img> tag appears before the Menu Container in the markup:
<img src="foo.gif" alt="foo" style="position: absolute; left: 5px; top: 20px"/>
<div id="id_vm" style="position: absolute; left: 5px; top: 5px"></div>
Supplying the Menu With Data
Visual Menu needs a data source which describes the contents of the menu.
Visual Menu Maker creates a JavaScript Menu Data File called vm-data.js. By default Visual Menu Maker assigns the variable name _VM_DATA to the data, inside the JavaScript Menu Data File. Here is an example vm-data.js file:
/* Generated by Visual Menu Maker */
_VM_DATA=[
[{
"type":"horz",
"hArrowImage":"right-arrow.gif",
"hArrowImageWidth":4,
"hArrowImageHeight":7,
"vArrowImage":"down-arrow.gif",
"vArrowImageWidth":7,
"vArrowImageHeight":4
}],
[
[{"labelText":"Base Menu element 1"}],
[{"labelText":"Base Menu element 2"}]
]
];
In the visual-menu-test.htm page generated by Visual Menu Maker, the variable name is passed to the Visual Menu Constructor like this:
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
Supplying the Menu With CSS
Along with data, which describes the content of a Visual Menu, a CSS Style Sheet is also required by Visual Menu, in order to describe its look and feel.
Visual Menu Maker creates a CSS stylesheet file called vm-style.css. This file is included in the visual-menu-test.htm page generated by Visual Menu Maker, like this:
<link href="vm-style.css" rel="stylesheet" type="text/css">
Configuring Multiple Menus on the Same Page
You may have an unlimited number of separate menus residing on the same page. Visual Menu Maker allows you to integrate up to 100 menus on the same page. Any menus beyond 100 on the same page must be configured manually.
Multiple menus on the same page can share the same CSS Style Sheet, thus having the same look and feel. Here is an example.
Multiple menus on the same page can also have their own unique look and feel by using separate CSS Style Sheets. Here is an example.
These examples also reside in the examples\features\multiple-menus-single-style and examples\features\multiple-menus-multiple-style sub folders of your Visual Menu Maker installation folder.
To illustrate adding more than one menu to the same page, create a menu with all text elements, using menu1 as the project folder name, and publish it as a test menu by selecting the "Create a test menu" option in the "Publish Options" step of Visual Menu Maker. Here is the HTML markup for the test file, visual-menu-test.htm, that Visual Menu Maker generates:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visual Menu Test</title>
<!-- Start Visual Menu specific markup for head tag -->
<link href="vm-style.css" rel="stylesheet" type="text/css">
<script src="vm-data.js" type="text/javascript"></script>
<script src="vm-menu.js" type="text/javascript"></script>
<!-- End Visual Menu specific markup for head tag -->
</head>
<body style="background:#FFFFFF">
<!-- Start Visual Menu specific markup for body tag -->
<div id="id_vm"></div>
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
<!-- End Visual Menu specific markup for body tag -->
</body>
</html>
Copy the menu1 project folder and name the copy menu2. Open the menu2 project in Visual Menu Maker, and proceed to the "Menu Appearance" step. Change the background color of the Base Menu and Sub Menus. This will modify the menu's CSS
style sheet file, vm-style.css when it is published.
Proceed to the "Create Menu Content" step. Append the number "2" to the text of menu elements. This will modify the menu's JavaScript Menu Data File, vm-data.js when it is published. (Note that this is for demonstration purposes only, so that you can discern the first menu from the second. You do not actually need to do this.)
Proceed to the "Output Settings" step. Set the "CSS Prefix Number"
property to the value 2. This will instruct Visual Menu Maker to create unique CSS attributes for the menu, so that they will not be shared by other menus on the same page. Also, set the "JavaScript Data Number" to the value 2. This will instruct Visual Menu Maker to create menu data with a unique id, so that it can reside as an additional menu on the same page.
The HTML markup of the visual-menu-test.htm file which was copied directly from the menu1 project will now be different. This is what it now looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visual Menu Test</title>
<!-- Start Visual Menu specific markup for head tag -->
<link href="vm-style.css" rel="stylesheet" type="text/css">
<script src="vm-data.js" type="text/javascript"></script>
<script src="vm-menu.js" type="text/javascript"></script>
<!-- End Visual Menu specific markup for head tag -->
</head>
<body style="background:#FFFFFF">
<!-- Start Visual Menu specific markup for body tag -->
<div id="id_vm2"></div>
<script type="text/javascript">new VisualMenu("id_vm2", _VM_DATA2, "vm-base2-", "vm-sub2-")</script>
<!-- End Visual Menu specific markup for body tag -->
</body>
</html>
Let's take a close look at the highlighted portions of the markup, as compared to the markup of the visual-menu-test.htm file in the menu1 project.
The yellow highlighted portions indicate the Menu Container id used by the menu. Every menu on a page must be placed in a Menu Container with a unique id. Setting the "JavaScript Data Number" property to 2 had the effect of appending the number 2 to the default Menu Container id, which is id_vm. This is necessary when we merge the menus together on the page, so that there are no duplicate Menu Container ids.
The pink highlighted portion indicates the JavaScript variable assigned to the JavaScript Menu Data. Setting the "JavaScript Data Number" property to 2 had the effect of appending the number 2 to this value. If you open the file vm-data.js, you will see that _VM_DATA2 is assigned to the menu data instead of the default _VM_DATA, which you see in the menu1 project menu. This is necessary when we merge the menus together, so that the menus don't end up using the same data.
The orange highlighted portions indicate the Visual Menu CSS prefixes used by the menu. If you open the file vm-style.css, you will see that the Base Menu and Sub Menu CSS prefixes passed into the Visual Menu Constructor correspond to base prefixes in this file. You might wonder why there are no CSS prefixes passed to the Visual Menu Constructor in the menu1 project visual-menu-test.htm file. The reason is, by default, Visual Menu uses "vm-base-" for the Base Menu prefix and "vm-sub-" for the Sub Menu prefix. If you open up the vm-style.css file of the menu1 project menu, you will see that it contains these default prefixes.
Before merging the menus together, we need to rename the files vm-style.css and vm-data.js in the menu2 project. Otherwise there will be duplicate file names.
Create a new folder called menu-merge.
In the menu2 project folder, copy the file vm-style.css to the menu-merge folder and rename the file in the menu-merge folder to vm-style2.css.
In the menu2 project folder, copy the file vm-data.js to the menu-merge folder and rename the file, in the menu-merge folder to vm-data2.js
In the menu1 project folder, copy the following folder and files from the first menu project folder into the menu-merge folder.
vm-images
vm-menu.js
visual-menu-test.htm
vm-data.js
vm-style.css
vm-scroller.css
vm-scroller.js
The menu-merge folder should contain the following folder and files:
vm-images
vm-menu.js
visual-menu-test.htm
vm-data2.js
vm-data.js
vm-style2.css
vm-style.css
vm-scroller.css
vm-scroller.js
In the menu-merge folder, open visual-menu-test.htm in an editor. We need to include the vm-data2.js and vm-style2.css files, which define our second menu. The HTML markup to do this is as follows:
<link href="vm-style2.css" rel="stylesheet" type="text/css">
<script src="vm-data2.js" type="text/javascript"></script>
This markup should be placed in the <head> section.
We also need to add the Visual Menu specific markup for the second menu. This, we can copy and paste directly from the visual-menu-test.htm file in the menu2 folder. It looks like this:
<!-- Start Visual Menu specific markup for body tag -->
<div id="id_vm2"></div>
<script type="text/javascript">new VisualMenu("id_vm2", _VM_DATA2, "vm-base2-", "vm-sub2-")</script>
<!-- End Visual Menu specific markup for body tag -->
This markup should be placed in the <body> section.
Save the file. We're done. If you open this file in a browser, you should see both menus. Here is the modified HTML of the visual-menu-test.htm file in the menu-merge folder. The markup which specifically incorporates the menu2 project menu is highlighted.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visual Menu Test</title>
<!-- Start Visual Menu specific markup for head tag -->
<link href="vm-style.css" rel="stylesheet" type="text/css">
<script src="vm-data.js" type="text/javascript"></script>
<link href="vm-style2.css" rel="stylesheet" type="text/css">
<script src="vm-data2.js" type="text/javascript"></script>
<script src="vm-menu.js" type="text/javascript"></script>
<!-- End Visual Menu specific markup for head tag -->
</head>
<body style="background:#FFFFFF">
<!-- Start Visual Menu specific markup for body tag -->
<div id="id_vm"></div>
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
<!-- End Visual Menu specific markup for body tag -->
<!-- Start Visual Menu specific markup for body tag -->
<div id="id_vm2"></div>
<script type="text/javascript">new VisualMenu("id_vm2", _VM_DATA2, "vm-base2-", "vm-sub2-")</script>
<!-- End Visual Menu specific markup for body tag -->
</body>
</html>
To add an additional menu to the menu-merge folder, repeat the process, but this time, in the "Output Settings" step, set the "CSS Prefix Number" and "JavaScript Data Number" properties to the value 3.
Loading an XML Menu Data File
For testing purposes, it is possible to supply an XML Menu Data File as a data
source without having to first convert it into a JavaScript Menu Data File.
But in order to do so, you need to use the Design-time
Kernel instead of the Runtime Kernel. For example, assuming you included
the Design-time Kernel in the <head> section of your document instead of the Runtime Kernel as follows:
<script type="text/javascript" src="vm-menu-dt.js"></script
you could load the default XML Menu Data File generated by Visual Menu Maker — vm-data.xml like this:
<script type="text/javascript">new VisualMenu("id_vm", "vm-data.xml")</script>
Note that this only works in Internet Explorer, and is only sanctioned for testing purposes.
The image below shows what the Menu Scroller looks like:
The Menu Scroller consists of a top and bottom button that appears in Sub Menus when the height the Sub Menu exceeds the available height of the document. The user can use the Menu Scroller buttons to scroll the portion of the menu not visible into view. Menu Scrollers are necessary when you have menus with large numbers of elements.
The Menu Scroller does not come with Visual Menu by default. It is an Add-on Module. The reason for this is that the Menu Scroller takes more
bandwidth and overhead. If your menu does not contain a lot of elements, there is no need to have a Menu Scroller taking up unnecessary bandwidth and overhead. The Add-on Module is comprised of these two files:
You must include these files in the head section of your web page in order to use the Menu Scroller.
The Menu Scroller Add-on Module files are always written to the project folder of Visual Menu Maker when you publish a menu. However they are not included in the test page generated by Visual Menu Maker by default. In order to have Visual Menu Maker include the Menu Scroller Add-on Module files in its test page, you must set the "Menu Scroller" property in the "Menu Settings" step to true. This will also have the effect of enabling the properties in the "Menu Scroller" tab pane in the "Menu Appearance" step of Visual Menu Maker, which will allow you to visually modify the Menu Scroller.
Here is an example of the code generated by Visual Menu Maker to include the Menu Scroller in the head tag:
<!-- Start Optional Visual Menu Scroller Add-On Module markup for head tag -->
<link href="/visualmenu/vm-scroller.css" rel="stylesheet" type="text/css">
<script src="/visualmenu/vm-scroller.js" type="text/javascript"></script>
<!-- End Optional Visual Menu Scroller Add-On Module markup for head tag -->
Menu Scroller CSS
The Menu Scroller is described entirely by CSS in the file vm-scroller.css. The Menu Scroller specific CSS selectors are described below:
- vm-scroll-up: Describes the top Menu Scroller button during a normal state.
- vm-scroll-up-over: Describes the top Menu Scroller button during a rollover state.
- vm-scroll-up-disabled: Describes the top Menu Scroller button during a disabled state.
- vm-scroll-down: Describes the bottom Menu Scroller button during a normal state.
- vm-scroll-down-over: Describes the bottom Menu Scroller button during a rollover state.
- vm-scroll-down-disabled: Describes the bottom Menu Scroller button during a disabled state.
Note that because of a CSS quirk in Internet Explorer versions below 7.0, the Menu Scroller button's
height is not adjustable and is longer than the length it is specified to be in the
style sheet.
Customizing Scroll Speed
You can control the speed by which the menu scrolls while the mouse is over a scroller button by setting the VisualMenu.mouseOverDelay class variable. This variable specifies the amount, in milliseconds, to delay between scroll increments when the mouse is over a scroller button. The lower this value, the faster the menu will scroll. By default the mouse over delay value is 500. Here is an example of setting the mouse over delay to 400 milliseconds.
VMScroller.mouseOverDelay = 400;
You can control the speed by which the menu scrolls while the mouse is down on a scroller button by setting the VisualMenu.mouseDownDelay class variable. This variable specifies the amount, in milliseconds, to delay between scroll increments when the mouse is down on a scroller button. The lower this value, the faster the menu will scroll. By default the mouse down delay value is 50. Here is an example of setting the mouse down delay to 100 milliseconds.
VMScroller.mouseDownDelay = 100;
Fixing Page Shift Problems
Under certain conditions when the content of a web page that includes a menu does not exceed a browser window's height, web content appears to shift or jump when a scrollable Sub Menu
appears. This is because the items in the Sub Menu increase the height of the web page, causing the browser's scroll bar to appear. The web page scroll bar takes up additional width and narrows the web page, causing a shift effect.
The shift effect is isolated to the Opera browser and Mozilla family browsers such as Firefox and Netscape. You can work around this problem in Mozilla family browsers by adding the following CSS to the web page
containing the menu:
html {min-height: 100%; margin-bottom: 1px;}
This has the effect of permanently adding a scrollbar to the browser window so that the page shift will never
occur.
Unfortunately, this workaround does not work for Opera.
Menu Scroller Incompatibility
Due to a bug in some Gecko family browsers such as Firefox,
background images do not repaint themselves correctly
when scrolled. Because of this, you should avoid using the
Menu Scroller with background images. Background images
are used in all Composite Border style menus to provide
rounded corners. Standard Border style menus do not have
background images by default, although you can set them with
the "Background Image" properties of the "Menu Appearance"
step.
Visual Menu Maker provides search engine support by generating XML Sitemaps. Sitemap technology, while
relatively new, is supported by all major search engines. Sitemap.org has detailed information about Sitemaps. Basically, Sitemaps are XML files that contain an index of files on your website that you want indexed by search engines. Once you upload your Sitemap to your website, search engines use the information in the Sitemap to index pages on your website.
Unlike obsolete methods of providing DHTML Menu search engine support, which involve providing
redundant data on each web page in the form of nested li or div tags, Sitemaps do not incur additional overhead and ensure that all links referenced by the Sitemap are indexed by search engines.
Setting Up Sitemap Generation
Sitemaps are not generated by default by Visual Menu Maker. To turn Sitemap generation on, set the Generate Sitemap property in the "Output Settings" step to true. Once you've done this, the Sitemap Site URL property appears. Only menu links that have the exact base URL as the Sitemap Site URL will be included in the Sitemap generated by Visual Menu Maker. For example, if you set the Sitemap Site URL property to http://example.com/, and one of your menu links is http://example.com/example.htm, this would be included in the Sitemap. However, if one of your menu links is http://www.example.com/example.htm, this would not be included in the Sitemap because it has a www prefix which does not match the Sitemap Site URL property exactly.
Exposing Your Sitemap to Search Engines
To expose your Sitemap to search engines, place the following line in your robots.txt file on your website:
Sitemap: <sitemap_location>
Where <sitemap_location> is the URL of your Sitemap. For example:
Sitemap: http://mywebsite.com/sitemap.xml
It is strongly recommended that you explicitly register your Sitemap with Google™ and Yahoo!®. Google™ in particular provides Sitemap validation checking as well as valuable diagnostic information about your website.
Google™ Submission URL: http://www.google.com/webmasters/sitemaps
Yahoo!® Submission URL: https://siteexplorer.search.yahoo.com/submit
A Better Way to Create a Sitemap
One of the reasons why Visual Menu Maker doesn't generate a Sitemap by default is because
it is better to generate a Sitemap using a server-side program. Server-side Sitemap generators have the advantage over client-side menu sitemap generators because they have access to, and can include in the Sitemap, all files on your website, not just those referenced by your menu. There are
a plethora of server-side Sitemap Generators available, many of which are free. We use
an excellent Sitemap generator called phpSitemapNG, that also happens to be free.
When you create a Visual Menu in a web page like this:
<script type="text/javascript">new VisualMenu("id_vm", _VM_DATA)</script>
what
you are doing is instantiating, or in other words, creating a Visual Menu object from a JavaScript class called VisualMenu. Like JavaScript functions, JavaScript classes have constructors which accept parameters. The only difference between creating a JavaScript object and calling a function is that the JavaScript new keyword is placed before the call to create a JavaScript object.
This is the definition of the VisualMenu constructor. Its parameters are listed below:
VisualMenu(insertPointId, srcData, baseSelectorPrefix, subSelectorPrefix, iconOverrides)
insertPointId: String that
specifies the id attribute of the Menu Container.
(This
is a required parameter.)
srcData: String
that specifies the menu's content. If the Runtime
Kernel is
used, srcData
must specify the name of the array in a JavaScript Menu Data File. If the Design-time
Kernel is used, srcData is
the name of the array in a
JavaScript Menu Data File or the URL of an XML Menu Data File. The value of this parameter may be null. You would specify null if you wanted to dynamically load the data at a later point.
baseSelectorPrefix: String that specifies
the prefix to prepend to CSS selectors associated with the Base Menu. If this value is null or not specified, Visual Menu uses the value "vm-base-". See the Menu
Selector Prefix section
for more information.
subSelectorPrefix: String that specifies
the prefix to prepend to CSS selectors associated with the Sub Menu. If this value is null or not specified, Visual Menu uses the value "vm-sub-". See the Menu
Selector Prefix section
for more information.
iconOverrides: This parameter provides you an easy way of making buttons or bullets to indicate that a menu element is selected. It consists of a multidimensional array with three columns and an unlimited number of rows. The first column specifies the id value of the menu element of the icon to override. The id value can be set in Visual Menu Maker by setting the "ID" property in the "Create Menu Content" step. The second column specifies the URL of the normal-state icon to override. If this value is null, there will be no normal-state icon displayed. The third column specifies the URL of the rollover-state icon to override. If this value is null or not specified, the icon specified in the second column is used to display the rollover-state icon as well.
If the image URLs of the second and third column do not start with http://, https://, or the /
character, they will be relative to the imagePath value.
Here is an example of an iconOverrides array with one row, which sets the normal-state and rollover-state icons of a single menu element with the id value: "id-about". Since the third column of the array is not specified, the rollover-state icon uses the normal-state icon, specified in the second column of the array.
var iconOverrides = [
["id-about", "bullet.gif"]
];
new VisualMenu("id_vm", _VM_DATA, null, null, iconOverrides);
Here is an example of an iconOverrides array with one row, which sets the normal-state and rollover-state icons of a single menu element with the id value: "id-about":
var iconOverrides = [
["id-about", "bullet.gif", "bullet-over.gif"]
];
new VisualMenu("id_vm", _VM_DATA, null, null, iconOverrides);
Here is an example of an iconOverrides array with two rows, which sets the normal-state and rollover-state icons of the menu elements with the id values: "id-about" and "id-services":
var iconOverrides = [
["id-about", "bullet.gif", "bullet-over.gif"],
["id-services", "bullet.gif", "bullet-over.gif"]
];
new VisualMenu("id_vm", _VM_DATA, null, null, iconOverrides);
For full examples, see the examples\features\radio-buttons and examples\features\selection-icon sub folders of your Visual Menu Maker installation folder.