Hello Friends,
I need an Ajax multilevel dropdown list code, Can anyone provide me a sample coding. Please help me, as I need to have sample to understand the coding.
Thanks,
Davidscecere
AJAX menu is a multi level drop down menu, based on standard HTML unordered list. When the user rolls over a menu item that contains a sub menu, the script loads submenu "on-the-fly" from server. It saves outgoing traffic especially when using a large navigation. The AJAX loadable submenus are separate html files that contain the same UL/LI list of items. These files can be generated by the server side scripts or can be simple static html files.
Move mouse cursor over "Product Info" or "Samples" item. You'll see "Loading…" message while the submenu is loading from the server.
AJAX menu is a multi level drop-down, based on standard HTML list. When you roll over a menu item that contains a sub-menu, the script loads sub-menu from server. It saves outgoing traffic especially when using a large navigation. The AJAX load able sub-menus are separate html files containing the same UL/LI list of items.
To create AJAX menu based on UL/LI Tags:
Insert the following code into head section of browsers page:
<script type="text/javascript" src="ajax-menu.files/dmenu.js"></script>
<noscript><link type="text/css" href="ajax-menu.files/style.css"
rel="stylesheet"></noscript>
Create an unordered list of base top navigation and add this Code to body section of page:
<ul id="deluxeMenu">
<li><a href="#">Home</a></li>
<li><a href="#"><span>Product Info</span></a><a href="info.html"></a></li>
<li><a href="#"><span>Samples</span></a><a href="samples.html"></a></li>
<li><a href="#">Purchase</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- menu script init-->
<script type="text/javascript" src="ajax-menu.files/data.js"></script>
For example you want to create drop-down list for “Product Info” and “Samples” items, you will find <a> tags that call for external file for AJAX sub navigation.
Download zip-file containing menu files: ajax menu sample zip.
Copy the “ajax-menu.files” folder to the page directory.
Create external files (info.html, samples.html) for sub-navigation.
Info.html
<ul style="width:136px;">
<li><a href="#">Features</a></li>
<li><a href="#"><span>Installation</span></a>
<ul style="width:133px;">
<li><a href="#">Description of Files</a></li>
<li><a href="#">How To Setup</a></li>
</ul></li>
<li><a href="#">Parameters Info</a></li>
<li><a href="#">Dynamic Functions</a></li>
<li><a href="#"><span>Supported Browsers</span></a>
<ul style="width:117px;">
<li><a href="#">Windows OS</a></li>
<li><a href="#">Internet Explorer</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Mozilla</a></li>
<li><a href="#">Netscape</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">MAC OS</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Internet Explorer</a></li>
<li><a href="#">Unix/Linux OS</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Konqueror</a></li>
</ul></li>
</ul>
Samples.html
<ul style="width:133px;">
<li><a href="#">Sample Menu Items</a></li>
<li><a href="#">Sample 1</a></li>
<li><a href="#">Sample 2</a></li>
<li><a href="#">Sample 3</a></li>
<li><a href="#">Sample 4</a></li>
<li><a href="#">Sample 5</a></li>
<li><a href="#">Sample 6</a></li>
<li><a href="#">Sample 7</a></li>
<li><a href="#">Sample 8</a></li>
<li><a href="#">Sample 9</a></li>
</ul>
Copy these two files (info.html and samples.html) to the same page directory.
This is all you have to do to create drop-down list.
If you want change style of your menu, change data.js and style.css in “ajax-menu.files”. You will find ready-to-use templates or you can design your own.
