Ajax Switch Menu

Important: AJAX scripts must be run from a web server, to help people who are unfamiliar with AJAX who may attempt to run it locally to test, as it will not work locally from C:\. To run this script locally, setup IIS web server on your local machine and use http://localhost/ to access it.

Ajax Switch Menu is a unique AJAX navigational script with characteristics of a folding tree. It dynamically expands the chosen menu item when clicked on while contracting the rest. Ajax Switch Menu supports persistence so it remembers which menu item was last expanded and which submenu item was last selected.

Ajax Switch Menu is very easy to setup. You only need to edit 1 XML and 1 CSS file. You don't have to edit any javascript file or complexe HTML. The HTML output is automatically created by the script using the XML file.

HTML

Simply add the CSS and Javascript files with their paths, the onload event ajaxSwitchMenu('/xml/AjaxSwitchMenu.xml');
and the menu container <div id="SwitchMenu"></div> in all your HTML pages like below:

<html>
<head>
<title>Ajax Switch Menu</title>
<link rel="stylesheet" href="/css/AjaxSwitchMenu.css" type="text/css"/>
<script type="text/javascript" src="/js/AjaxSwitchMenu.js">
</script>
</head>
<body onload="ajaxSwitchMenu('/xml/AjaxSwitchMenu.xml');">

<div id="SwitchMenu"></div>

</body>
</html>

XML

Open AjaxSwitchMenu.xml to create your menus and submenus items. In the below sample, the menu Home has an url attribut because that menu don't have any submenus items:

<?xml version="1.0" encoding="utf-8"?> 
<menus>
	<menu text="Home" url="/index.html">
		<!-- This menu has no submenu -->
	</menu>
	<menu text="Products">
		<submenu text="Product 1" url="/Products/Product1.html"></submenu>
		<submenu text="Product 2" url="/Products/Product2.html"></submenu>
		<submenu text="Product 3" url="/Products/Product3.html"></submenu>
	</menu>
	<menu text="Services">
		<submenu text="Service 1" url="/Services/Service1.html"></submenu>
		<submenu text="Service 2" url="/Services/Service2.html"></submenu>
		<submenu text="Service 3" url="/Services/Service3.html"></submenu>
		<submenu text="Service 4" url="/Services/Service4.html"></submenu>
		<submenu text="Service 5" url="/Services/Service5.html"></submenu>
	</menu>
	<menu text="Support">
		<submenu text="Forums" url="/Support/Forums.html"></submenu>
		<submenu text="Knowledge Base" url="/Support/KBase.html"></submenu>
	</menu>
</menus>

CSS

Open AjaxSwitchMenu.css to modify the style of the menu:

STYLE EXPLANATIONS
.loading loading message before the menu is loaded
#SwitchMenu menu container
.menuOut menu item onMouseOut
.menuOver menu item onMouseOver
.menuSelected selected menu item
.submenu submenu container
.submenu a submenu item onMouseOut
.submenu a:hover submenu item onMouseOver
.subMenuSelected selected submenu item

Advanced (optional)

Ajax Switch Menu is using URL parameters to remember which menu item was last expanded and which submenu item was last selected. If you wish to perform that kind of action from a link outside the Ajax Switch Menu, simply use parameters mn and sm like below:

<a href="yourPage.html?mn=2&sm=2-1">click here</a>

In the above sample, the menu no.2 will be expanded and the submenu item no.1 of menu no.2 will be selected as shown in the XML below. Remember that both collections start with 0, not 1.

<?xml version="1.0" encoding="utf-8"?> 
<menus>
	<menu text="Home" url="/index.html">
		<!-- This menu has no submenu -->
	</menu>
	<menu text="Products">
		<submenu text="Product 1" url="/Products/Product1.html"></submenu>
		<submenu text="Product 2" url="/Products/Product2.html"></submenu>
		<submenu text="Product 3" url="/Products/Product3.html"></submenu>
	</menu>
	<menu text="Services">
		<submenu text="Service 1" url="/Services/Service1.html"></submenu>
		<submenu text="Service 2" url="/Services/Service2.html"></submenu>
		<submenu text="Service 3" url="/Services/Service3.html"></submenu>
		<submenu text="Service 4" url="/Services/Service4.html"></submenu>
		<submenu text="Service 5" url="/Services/Service5.html"></submenu>
	</menu>
	<menu text="Support">
		<submenu text="Forums" url="/Support/Forums.html"></submenu>
		<submenu text="Knowledge Base" url="/Support/KBase.html"></submenu>
	</menu>
</menus>

NOTE: You can also add your own parameters in the XML file:

<submenu text="Service 3" url="/Services/Service3.aspx?abc=xyz"></submenu>
Copyright 2001-2006 getElementById.com. All right reserved.