(c) 2016, Deluxe-Menu.com
Search  
Ctrl+F2 - enter/switch menu | Arrow keys - navigate | Esc - exit menu  
  Samples
  Functional Samples
  AJAX Menu
  Javascript API javascript dynamic menu
  Cross Frame Menu javascript dynamic menu
  Popup Menu javascript dynamic menu
  Highlighted Items javascript dynamic menu
  Smart Scrollable Submenus javascript scrolling menu
  CSS Javascript Menu javascript scrolling menu
  Objects Overlapping javascript scrolling menu
  Filters and Effects dhtml dynamic menu
  Individual Styles javascript cascade menu
  Moving Menu javascript cascade menu
  Floating Menu javascript cascade menu
  Search Support javascript menu
  Sound Support javascript vertical menu
  Multilevel Menu drop down list
  Multicolumn Menu dhtml menu script
  Ways of Showing Sub Menus javascript mouse over menu
  Image Based Navigation javascript mouse over menu
  Templates javascript mouse over menu
  Elegant Templates (v4.1+)
  Android Dark Menu horizontal menu
  Block Blue Menu menu using javascript
  Elegant Dark Menu dropdown menu using css
  Gradient Gray Menu dropdown menu with images
  Dark Menu clickable menu
  Blue Menu html menu code
  Dark Orange Menu css dhtml menu
  Grey Menu horizontal dhtml menu
  Red Menu movable menu
  Simple Dark Menu css menu dhtml
  Blue-Orange Menu orange menu - horizontal css menu
  Glossy Menu dhtml menu navigation
  Olive Menu dhtml navigation menu
  Light Menu dhtml popup menu
  Black Red Menu css menu pulldown
  Youtube Style Template 1 script drop down menu
  Youtube Style Template 2 drop down navigation menu
  Digg Style dhtml navigation menu
  Yahoo Style transparent drop down menu
  Extra Templates
  Orange Menu drop down css menu
  Blue Rounded Menu css menu dropdown
  Grey Rounded Menu pure css menu
  Dark Blue Rounded javascript menu bar
  Dark Green Rounded css dynamic menu
  Dark Red Rounded css menu script
  Horizontal Submenus horizontal dhtml menu
  Coffee Menu dropdown html menu
  Space Menu simple dropdown menu
  Rounded Nav Bar drop down navigation menu
  Orange Green Menu website drop down menu
  Green Tabs mouseover drop down menu
  Orange Tabs rollover drop down menu
  Veoh Style Menu dhtml horizontal menu
  Dark Red Menu rollover dropdown menu
  Green Menu dhtml sliding menu
  Black Rounded mouse over drop down menu
  Adobe Style sliding menu
  Amazon Style dhtml pop up menus
  Cnet Style multicolumn dhtml menu
  Dell Style horizontal dhtml menu
  Ebay Style dhtml menu bar
  Google Style dhtml pop up menu
  Microsoft Style dhtml cascading menu
  Mozilla Style dhtml pull down menu
  Myspace Style drop down menu bar
  Photobuket Style drop down navigation menu
  New iPhone Templates
  iPhone 1 cascading drop down menu
  iPhone 2 sliding dhtml menu
  iPhone 3 cross browser dhtml menu
  iPhone 4 expanding dhtml menu
  iPhone 5 cascading css menu
  iPhone 6 code css menu
  iPhone 7 collapsible css menu
  iPhone 8 collapsible drop down menu
  iPhone 9 css drop menu
  iPhone 10 css floating menu
  iPhone 11 css horizontal drop down menu
  iPhone 12 css menu bar
  iPhone 13 css menu collapse
  iPhone 14 css menu rollover
  iPhone 15 css menu slide
  iPhone 16 css navigation menu
  iPhone 17 css pop up menu
  iPhone 18 dropdown submenu
  iPhone 19 html css menu
  iPhone 20 mouseover css menu
  Vista Styles (Part 1)
  Vista Style 1 dropdown menu
  Vista Style 2 dhtml transparent menu
  Vista Style 3 html drop down menu
  Vista Style 4 javascript menu dropdown
  Vista Style 5 drop down menu html
  Vista Style 6 drop down menu script
  Vista Style 7 dhtml navigation menu
  Vista Style 8 javascript pull down menu
  Vista Styles (Part 2)
  Vista Style 1 dropdown menu script
  Vista Style 2 javascript list menu
  Vista Style 3 floating javascript menu
  Vista Style 4 dhtml menu bar
  Vista Style 5 menu drop down
  Vista Style 6 javascript select menu
  Vista Style 7 dhtml quick menu
  Vista Style 8 web drop down menu
  Vista Style 9 dhtml static menu
  Vista Style 10 pulldown menu
  Vista Style 11 simple dhtml menu
  Vista Style 12 vertical dropdown menu
  Vista Style 13 javascript ajax menu
  Vista Style 14 javascript vista menu
  Vista Style 15 mouse over drop down menu
  Vista Style 16 menu script in javascript
  Vista Style 17 javascript web menu
  Vista Styles (Part 3)
  Vista Style 1 dropdown menu html
  Vista Style 2 cascading javascript menu
  Vista Style 3 javascript window menu
  Vista Style 4 sample dhtml menu
  Vista Style 5 vertical navigation menu
  Vista Style 6 javascript navigation menu
  Vista Style 7 dhtml cross browser menu
  Vista Style 8 cascading menu
  Tab Styles
  IE7 Style dropdown menu html
  Firefox Style horizontal dropdown css menu
  Opera Style dropdown navigation menu
  Netscape Style dropdown menu bar
  Microsoft Style html dropdown menu
  Simple Tabs 1 horizontal dropdown menu
  Simple Tabs 2 mouseover dropdown menu
  Simple Tabs 3 drop down vertical menu
  Simple Tabs 4 html menu navigation
  XP Style dhtml pull down menu
  MAC Style 1 hierarchical menu
  MAC Style 2 dhtml slide menu
  MAC Style 3 cross browser dhtml menu
  XP Styles
  XP Style 1 cascading javascript menu
  XP Style 2 javascript side menu
  XP Style Taskbar javascript drop menu
  Common Styles
  Office Style 1 mouseover drop down menu
  Office Style 2 javascript pulldown menu
  Win98 Style javascript floating menu
  MAC Style cross browser menu
  Simple Style 1 javascript menu sliding
  Simple Style 2 dhtml drop menu
  Animated Icons dhtml menu scripts
  Multiple Styles dropdown list
  Image-Based Menu based menu - css dhtml menu


 

    AJAX Menu




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.

Supported browsers:
    Windows OS:  IE5+, Firefox, Google Chrome, Safari, Opera 8+, Mozilla, Netscape 7+
    MAC OS:          Firefox, Safari, IE

With other browsers or if JavaScript is disabled, the top level items are still accessible as pure css menu.

Download ZIP archive with this sample


How to create AJAX Menu based on UL/LI tags

Step 1: Download zip file with all menu files: ajax-menu-sample.zip.

Step 2: Copy 'ajax-menu.files' folder to the same directory as the page itself.

Step 3: Insert the following code into the <head> section of your page (see index.html file from
ajax-menu-sample.zip):


<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>

Step 4: Create an unordered list for your base top navigation. Add the below menu code to the <body> section of your 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>

In "Product Info" and "Samples" items you can find <a> tags that call external files for your AJAX sub menus.


<a href="info.html"></a>
<a href="samples.html"></a>
info.html and samples.html are simple html files containing the subitems in the same UL/LI structure. This code calls an external file for your AJAX sub navigation.

Step 5: Create an external files (info.html, samples.html) for your 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>

Step 6: Copy the created info.html and samples.html files to the same directory as the page itself.
Your menu is ready!

Styling the menu item

If you want to change the menu style you should change data.js and style.css files which you can find in 'ajax-menu.files' folder.

data.js: This file is used in case when javascript is turned on in your browser.
Adjust menu parameters manually or use the windows version of Deluxe Tuner to create your own menu. There are a lot of ready-to use templates.

style.css: This file is used in case when javascript is turned off in your browser.

See more info about Menu Items structure also.

Magical HTML Bootstrap Slider With Text Templates Beautiful JS Page Theme Review  |  30+ Top Innovative Software Company Website Template List  |  Perfect Responsive JS Website Templates Review  |  Splendid JS Design Maker Overview  |  How to Make a Webpage - Step by Step Tutorial  | 
Copyright (c) 2019, Deluxe-Menu.com
Home  |  Product Info  |  Samples  |  Download  |  Purchase  |  FAQ  |  Site Map  |  Terms of Use  |  Write Us
All rights reserved. Free AI Website Builder | AI Website Builder | Best AI Website Builder | Website Generator AI | AI web design generator