Jquery Cascading Menu by Deluxe-Menu.com
Jquery Cascading Menu

Menu Screenshots

Jquery Cascading Menu Popup Menu Javascript Tutorial

Features

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
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
Shell Menu Script Jquery Cascading Menu
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
Easy Setup
  • De Luxe Tuner. GUI interface to create your jquery cascading menu 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 jquery cascading menu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Sub menus dropdown over all the objects on the page (select, applet, flash, object, embed). If for some reasons (old browser) a submenu can't go over an object, the object will be hidden for a time when the submenu is shown.
  • Design personal styles for any submenu and item. Use individual styles to rich killer visual effects!
  • These effects will make your menu neat and chic. You can set transparency, cast a shadow on the menu and submenus. Among available special visual effects there are random dissolve, fade, mix, mosaic slide out and many many others.

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: I have tried changing every menu variable I can see to make the actual iconbackground a different color than the menu items background with no success.Is this possible?

I would like the icon background to change with the alternating colors byrow .. and I know how to do this. but when I do it .. all the menus andsubmenus also change and I would like their background to stay white.

A: Yes, it's possible.
You should use an individual style for icon item, please see

deluxe-menu.com/individual-styles-sample.html
deluxe-menu.com/individual-submenu-styles-info.html



Q: I am having a problem creating a submenu. I did not get any js errors but nothing happens.

What I have found is that even when I have dynamic=1;
I was getting an error saying object expected so I added the dmenu_dyn.js manually (i.e. <scripttype="text/javascript"src="../../Javascript/menu/dmenu_dyn.js"></script>) but now get no errors but no submenu is created.

Do I have to add all the js files in the menu folder manually as I thought it was just
<scripttype="text/javascript"src="../../Javascript/menu/dmenu.js"></script>
that was needed.

All, I am trying to add a submenu under the challenge topmenu.

function addChallengeItems(){

dm_ext_createSubmenu(0, 0, 3, ['Buy Deluxe Menu Now!', "order-deluxe-menu-purchase.html", "", "", "Buy Deluxe Menu Now!", "_blank"]);

}

And then a href that calls addChallengeItems()
<ahref="javascript:addChallengeItems();">add</a>


A: There is no need to add all engine files into your menu folder.
You can add only
dmenu.js
dmenu_dyn.js

More info about Description of Files you can find here:
http://deluxe-menu.com/description-of-files-info.html

Please delete also the following line from your code
<script type="text/javascript"src="../../Javascript/menu/dmenu_dyn.js"></script>

Try that.


Q: The problem that I am still experiencing (Im sure I have missed something obvious!) - is that all the pages open when you click on the relevant links but they always open with the "About Us" tab showing and then as soon as you click on a different tab you see it highlight for a second and then it just reverts back to the About Us tab even though the page has changed. As the site opens I obviously want the first tab to be highlighted as opposed to the 2nd one and the each page highlights and holds as you go through the menu.


A: See, you set
  var bselectedItem=2;

That is why "About us" tab is selected.
You should change the selected tab depending on the page you are now.

This Tabs menu can save pressed item automatically within1 page only. If you open another page, the menu can't remember presseditem. You should do that manually using Javascript and menu parameters(  var bselectedItem) or using any server-side script (php, asp, etc.)

Deluxe Tabs doesn't support API functions which can return theselected tab.

If your site is written on PHP you can set "bselectedItem" parameter based on your link beforeyou call tabs-kasper.js file.

For example, move "bselectedItem" parameter from tabs-kasper.js file to yourcode.

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=<?php echo $seltabs; ?>;
</script>
<SCRIPT src="tabs-kasper.js" type=text/javascript></SCRIPT>
</TD>

You should define seltabs using server side script.

You can also set on every page before you call tabs-kasper.js file(for example, for solution tab).

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=4;
</script>
<SCRIPT src="tabs-kasper.js" type=text/javascript></SCRIPT>
</TD>

Try that.