Collapsible Side Menu In Javascript by Deluxe-Menu.com
Collapsible Side Menu In Javascript

Menu Screenshots

Collapsible Side Menu In Javascript Scroll Javascript Status

Features

Compatibility              
  • Full cross-browser compatibility including IE, Netscape, Mozilla, Opera, Firefox, Konqueror and Safari on Windows, Mac OS and Linux
  • Menu can be populated from a database using ASP, PHP, etc.
  • Search engine friendly
  • Support for any doctypes
  • Fits for secure sites
  • Section 508 compliant
High Performance
  • AJAX menu loading - loads web menu data from the server "on-the-fly".
  • Commonly loads quicker than other html page elements
  • UL/LI items structure
  • Runs well with an unlimited number of submenus and items
Fade Javascript Menu Collapsible Side Menu In Javascript
Easy Setup
  • De Luxe Tuner. GUI interface to create your collapsible side menu in javascript menus easily and in no time
  • Sensible menu parameters for manual editing
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed collapsible side menu in javascript samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Seamless Integration
  • Cross-frame support - menus work on frameset-based pages
  • Visible over flash, select boxes, iframes, java applets
  • Multiple menus on the same page
  • Amicable to other scripts and css styles
  • Any HTML code can be used inside menu items



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • You can set the size of the menu in pixels, percent or other units. The menu may have an absolute or relative position (it can be inserted into the table).
  • Use any necessary font of any color, size and font decoration. Create any available type, thickness and color of a menu's frame.Choose any color for backgrounds of submenus and items.
  • Specify various values for padding and spacing for the whole menu and for each separate submenu.
  • You can specify a time for delays in showing or hiding of a submenu. Use special prefixes for image paths and links to make paths absolute.
  • Create separators using your own pictures, size and alignment.

Recent Questions

Q: My top levels over the menu have no link and as such I need the cursor not to change when hovering over it – only change over the menus that drop down.

Please let me know how to fix this


A: Unfortunately, you can't change cursor type for different items.
But you can write so:

["< a href='http://deluxe-menu.com/'> Home ["Product Info","", , , , , "0", , , ],
 ["|What's New","", , , , , "0", , , ],

In all items with links you should use < a> tag.

Set this parameter:
  var itemCursor="default";


Q: Can you tell me what fields control the lines around the top level of menu items?
What fields control the lines around each sub-menu item?
I would like to test and see if the program will allow me to create a top menu that displays as follows:
Home   |   Proposal Reponses   |   Marketing Info   |

As you can see I would like no borders around the top level and a tilda (vertical line) separator between each top level menu item.

For the sub-menu items I would like there to be a thin line box around the sub-menu but no lines in between each item within the sub-menu. What fields control these paramenters?


A: Home   |   Proposal Reponses   |   Marketing Info   |

Yes, you can create such menu.

Please, use Individual styles.

Set these parameters:
  var menuBorderWidth=1;
  var menuStyles = [
["menuBorderWidth=0"], //style 0
];

["Home","testlink.html", , , , , , "0", , ], //style 0
["Product Info","", "default.files/icon1.gif", "default.files/icon1o.gif", , , , , , ],

To add lines between main items you can paste the separators.

Please, see the following parameters:

//------- Separators -------
  var separatorWidth = "10";
  var separatorHeight = "20";
  var separatorAlignment = "center";
  var separatorImage = "C";
  var separatorVWidth = "150";
  var separatorVHeight = "10%";
  var separatorVImage = "image.jpg";

You can create separators using menuItems, for example:

  var menuItems = [
["item 1"],
["-"], // this item is separator
["item 2"],
];


Q: I recently purchased DeluxeMenu for a project I'm working on and a new requirement has been submitted.
I am looking for a way to dynamically affectthe contents of menu javascripts
after it's been rendered(displayed) in the browser.
Can this be accomplished with this component?

A: 1) You can use API functions to affect items dynamically:

http://deluxe-menu.com/functions-info.html

2) Generate your menu items dynamically from database.
Unfortunately we don't have working example with ASP.

You may generate a menu from a database or XML using any server-side script, e.g., PHP, ASP, VB, etc.
However, these scripts don't work inside of Javascript .js files, so,
you should move parameters of a menu from a .js file into an html-page, e.g.:

<!-- Deluxe Menu -->
<noscript><a href="http://deluxe-menu.com">Javascript Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript">  var dmWorkPath = "menudir/";</script>
<script type="text/javascript" src="menudir/dmenu.js"></script>
<!-- (c) 2008, http://deluxe-menu.com -->

<script type="text/javascript" language="JavaScript1.2">
// and describe parameters of a menu
  var parameter1=value1;
  var parameter2=value2;
etc.

  var menuItems = [
// here you generate items using server-side scripts (php, asp, vb, etc.)
];
</script>>

The example of the menu working with PHP/MYSQL you can find here:
http://deluxe-menu.com/rq-loading-bar-MySQL-support.html



Q: I am still struggling with multiple menus on one page.
It is probably something I am doing wrong, but I cannot see it.


A: Now you have:

  var absolutePos=1;
  var posX="10";
  var posY="10";


So, both of your menus have the same absolute position.

You can use relative position and place your menu inside <table>. In this case you should write so:

  var absolutePos=0;