Javascript Menu Examples by Deluxe-Menu.com
Javascript Menu Examples

Menu Screenshots

Javascript Menu Examples Vertical Expanding Side Menu

Features

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
Unrivalled Features
  • Scrollable, dragable, floating, right-click menus
  • Keyboard navigation - press Ctrl+F2 to enter the menu
  • Unique Java Script API for altering menu "on-the-fly", without page reloading
  • AJAX technology - loads menu data from the server "on-fly and on-demand".
  • Search feature - add the search area in the menu and type symbols. The found words will be higlighted.
  • Sound support!
Web Page Cascading Menu Maker Javascript Menu Examples
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
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed javascript menu examples samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Easy Setup
  • De Luxe Tuner. GUI interface to create your javascript menu examples menus easily and in no time
  • Sensible menu parameters for manual editing



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: Hi, I need to know if it is possible to accomplish the following functionalities with your tree-menu library.

1. I need to have two or more trees in the same page
2. I need to have a checkBox in each node and through a JavaScript function be able to add the selected nodes into another tree.
3. I need to eliminate the nodes that has check=true
4. I need to populate on-demand the tree using AJAX
5. I need to implement drag&drop through the use of the mouse events on the tree nodes
6. How would the tree behave with 10000 nodes??
7. I need to have a tree within another element that uses scroll
such as a DIV or SPAN (fixed area). When collapsed or expanded, the area should remain its original size.


A: 1. You can add any number of the menus on the one page.
2, 3, 5. Yes, you can do it. But you should create your own server-side script (for example, php) that will do it. The menu doesn't support such a feature.
4. Unfortunately, you can't use the AJAX-like technology in the Deluxe Tree such as in Deluxe Menu.
6. It is possible that the loading speed can be lower if the menu is very large. But it doesn't take so much time.
Yes, you can notice some delay in IE, but in over browsers it works better.
Deluxe Tree works fast, but 10000 is a large value. Please, try atrial version of Deluxe Tree.
I tried to create large menus on my machine: P4 3GHz, 512RAM WinXP SP2
It takes:
- 1000 items ~ 10 sec
- 2000 items ~ 40 sec
7. You can paste Deluxe Tree into the <table> or <div>.


Q: A lot of things have come in between... Just a few more Q's before I order.

1)
At the bottom of the page you refer to below, there is a table showing the tmenuItems array, itemInd and " submenuInd ". But in the examples on the same page, the function "dtreet_ext_getItemIDByIndex" takes the arguments (menuInd, itemInd). Is the argument "menuInd" the same as "submenuInd" referred to in the javascript menu design??

2)
When I highlight an item on "onload" I need to expand that item's parent(s), right? What will happen to other, already expanded nodes when I do that? Will they still be expanded or collapsed?

A: 1) menuInd is the index of a tree menu on a page, >= 0.
First menu - menuInd=0
Second menu - menuInd=1
Third menu - menuInd=2
Fourth menu - menuInd=3
...

2) Yes, the already expanded nodes will be expanded.


Q: Hi, I was wondering if there is a way to leave a main navigation item highlighted when in that section.  For example if I clicked on "Contact Us" and when I am on the contact us page, the "Contact us" navigation would still be highlighted.  I appreciate any help you might have, thanks!


A: The menu has only two states normal and mouseover. We'll try to add the pressed state in the future.

You can set a pressed item using Javascript API:

function dm_ext_setPressedItem (menuInd, submenuInd, itemInd, recursion)

Sets a current pressed item.
menuInd - index of a menu on a page, >= 0.
submenuInd - index of a submenu, >= 0.
itemInd - index of an item, >=0.
recursion = true/false - highlight parent items.

But notice, to use dm_ext_setPressedItem() you should know ID of selected item and subitem.You can't get this ID after you reload your page. That is why you should write your own code on PHP.


Q: My site requires me to regularly update the drop down menu by inserting a new item at the top of the list.


A: Add items using the following function:

function dm_ext_addItemPos (menuInd, submenuInd, iParams, Pos)

Adds the new item to a submenu.

menuInd - index of a menu on a page, >= 0.
submenuInd - index of a submenu, >= 0.

iParams = [array] - the array of item parameters.
This parameter has the same structure as an item in menuItems array.
You can assign parameters of another existent item of the menu
(for example, when you want to create a duplicate of the existent item) or create new ones.

Structure of iParams:
[item_text, link, icon_normal, icon_over, tip, target, individual_style_index, jsFilename]
Pos - the position in the menu where you want to add new item.

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