Code Css Menu Horizontal Cascade by Deluxe-Menu.com
Code Css Menu Horizontal Cascade

Template:

Green Tabs Template - Mouseover Drop Down Menu






    - Horizontal or vertical orientation
    - Personal CSS styles for separate menu elements
    - Submenus dropdown on mouseover
    - Several menus on one page
    - Keyboard navigation - press Ctrl+F2 to enter the top menu
    - Relative/Absolute menu position
    - Status string shows item labels
    - AJAX menu loading - loads web menu data from the server "on-the-fly".




2 0 Navigation Buttons by Web-Buttons.com v3.0.0
Buy Now!   ::  Free Trial Download   ::  Blog   ::  More Info

Menu Screenshots

Code Css Menu Horizontal Cascade Dhtml Menu Sample Codes

Buy Now!   ::  Free Trial Download   ::  More Info

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
Cost Effective
Css Drop Down Horizontal Code Css Menu Horizontal Cascade
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
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 code css menu horizontal cascade menus easily and in no time
  • Sensible menu parameters for manual editing



2.0 Buttons by Web-Buttons.com v3.0.0
Buy Now!   ::  Free Trial Download   ::  More Info

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.
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: Do you plan to implement a fix in the cross browser drop down menu for the pointer - many of our users have complained that it is very un-intuitive - surely it must be possible to change the pointer to a hand if there is a link. I have tried putting <a> tags in to the menu labels, but it only changes to a hand if the actual label text is highlighted - it obviously should change whichever part of the box is highlighted? Is there no other workaround?


A: If you set the following parameter:
  var itemCursor="pointer";

You'll have the mousepointer being a hand for all itemsin the menu.

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

["<a href='http://deluxe-menu.com/'>Home</a>","", , , , , , , , ],
["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 am trying to have the selected top item in the pop up menu remain on the mouseover event after it is selected.
It seemed to be working fine when i was just testing with # as a link
but when i actually linked to different pages it returns to normal.
How do i get this to work?

A: You can find more info here:
http://www.deluxe-menu.com/highlighted-items-sample.html

Deluxe Menu has only two states normal and mouseover.

Try to do the following things:

- delete   var pressedItem=1; parameter from your data file
- set correct parameter on each page before you call data file, forexample:

<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>
<script type="text/javascript">  var pressedItem=3;</script>
...
<script type="text/javascript" src="menudir/data.js"></script>

You can also 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: I am investigating why a few things have not been working for sometime on our site.

This is the error I get in the console "The requested URL /js/menudir/dtree_ss.js was not found on this server."

I update the files awhile back and removed the dtress_ss.js as I was instructed, why is it that it that the script is still trying to reference this file?

What do I have to do to remove this error from java script tree menu?

When I updated the files a few months back the new files seem to fix a problem we were having with Chrome, but broke the drop down menu in Explorer. I have yet to resolve this. The drop down menu appears to work fine in all other browsers.

The nav menu not working in IE7 (not sure about IE6 or IE8) is a bigger issue than the error in the console, but thought maybe they were related. From our analytics, the strong majority of our customers are using IE7.

A: 1) dtree_ss.js
The current version of Deluxe Tree doesn't have dtree_ss.js at all. You should deletethe following code from your page:
<script language="JavaScript1.2" src="/js/menudir/dtree_ss.js" type="text/javascript"></script>

In the body tag you should write:
<td >
<script src="/js/menudir/data-tree.js" type="text/javascript"></script>
</td>

In the HEAD tag you should write:

<!-- Deluxe Tree -->
<noscript><a href="http://deluxe-tree.com">java script tree menu by Deluxe-Tree.com</a></noscript>
<script type="text/javascript">  var tWorkPath="/js/menudir/";</script>
<script type="text/javascript" src="/js/menudir/dtree.js"></script>
<!-- (c) 2009, http://deluxe-tree.com -->

2) Error in IE7.
You're using new engine files and old data files for the menus now.
I'm sending you the example.
Use engine files for Deluxe Menu and Deluxe Tree and data files (data.js and data-tree.js)from it.

Q: How does one go about changing the parameter or the JavaScript so
that a menu selection stays 'on' for the navigation bar script?
In other words, the menu remains selected, perhaps in a background color
that shows the user this menu choice is selected and the user is in the selected menu area.

A: To save your navigation path you should set the following parameter:

  var saveNavigationPath = 1;
The menu keeps items highlighted during menu navigation.
0 - disabled, 1 - enabled (default).

You can highlight menu items by default in two ways:

1) Set the pressed item on each page idividually using the following parameter:

  var pressedItem = -2;
The toggle mode. Sets an index of an item that will be highlighted by default.
-2 - the toggle mode is disabled;
-1 - the toggle mode is enabled, but no items highlighted by default;
0,1,2,3,... - index of highlighted item in a top-level menu.
- delete   var pressedItem=1; parameter from your data file
- set correct parameter on each page before you call data file, for example:

<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>
<script type="text/javascript">  var pressedItem=2;</script>
...
<script type="text/javascript" src="menudir/data.js"></script>

2) Set the pressed item/subitem using dm_ext_setPressedItem () function.

Please see more info here:
http://deluxe-menu.com/highlighted-items-sample.html
Buy Now!   ::  Free Trial Download   ::  More Info