Dhtml Collapse List by Deluxe-Menu.com
Dhtml Collapse List

Template:

Microsoft Style Template - Dhtml Cascading Menu

 









    - Transition #14 - "fade out" effect
    - Items with icons
    - Submenus go over all page objects
    - UL/LI items structure
    - Sound support!
    - Submenus dropdown on mouseover
    - 85% transparency for sub menus
    - Several menus on one page




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

Menu Screenshots

Dhtml Collapse List Effective Website Navigation

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

Features

Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed dhtml collapse list 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
Css Drop Down Horizontal Dhtml Collapse List
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!
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
Cost Effective



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

Javascript Menu. DHTML Menu.

  • Create contextual menus for your pages. For this purpose you should assign a special function for the object you want. The current coordinates of the mouse pointer or your own ones can be used for the contextual menu.
  • When the submenu is larger than the visible area of the page the submenu will be automatically decreased. To see all the submenu items you do not need to use scrollbars or something like that - just put your mouse to the bottom of a submenu and it will be automatically scrolled! You can also specify height and width for each separate submenu.
  • Build menus completely based on Cascading Style Sheets. It is possible to appoint the individual CSS styles for separate elements of the menu.
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I see that you have the demo of the menu working over a frame so that it displays over the lower frame, vertical top to bottom.
However I have played around with your demo and can't seem to replicate the same feature.
Could you please tell me what I have to set to make the easy dropdown menu float over the lower framed window?

A: To initialize the cross frame menu call dm_initFrame() function instead of standard dm_init() function within data.js file:

dm_initFrame(framesetID, mainFrameInd, subFrameInd, orientation);

framesetID - id attribute of the frameset;
mainFrameInd - index of the main frame (where the top-menu is placed), >=0;
subFrameInd - index of the subframe (where the submenus will be shown), >=0;
orientation - frame orientaion: 0 - top-to-bottom, 1 - left-to-right; 2 - bottom-to-top; 3 - right-to-left.

For example, for the following structure:

<frameset id="frmSet" rows="185,*">
<frame id="frame1" src="cross-frame-horizontal-1.htm">
<frame id="frame2" name="testlink.htm" scrolling="no">
</frameset>

the dm_initFrame() function call at the end of data.js file will look like:

dm_initFrame("frmSet", 0, 1, 0);


Q: We have two frames in a frameset, one for the menu and one for the content where the javascript menu frame expands normally without any problem. Our content frame's source is determined dynamically. The problem occurs when the content frame contains a page with another frameset in it. Unfortunately we can not avoid this for now. And when this happens our menu stops expanding.

A: Unfortunately it is really possible that you'll have problems in thatcase because the index of the content frame will be changed.

For example now you have:
<frameset id="frmSet">
<frame> //menu index=0
<frame> //content index=1
</frameset>
Your init function will be:
dm_initFrame("frmSet", 0, 1, 0);

But if you'll have frameset instead of content frame:
<frameset id="frmSet">
<frame> //menu index=0
<frameset>
<frame> // index=1
<frame> //content index=2
</frameset>
</frameset>
You should write your init function in the following way:
dm_initFrame("frmSet", 0, 2, 0);

You should change your javascript menu frame init function in that case.



Q: When my page loads up, there is a flash for about a second of all the text that is used in the java menus. This looks really bad to visitors like I am using hidden text on the page. Is there a way to prevent this flash of text?

A: I suppose that you see search engine friendly code.

<!-- Code for Deluxe Menu Items. Generated by Deluxe Tuner -->
<div id="dmlinks" style="font:undefined;color:#000000;text-decoration:none">
<a id="dmI0" href="testlink.html">Home</a>
<a id="dmI2" href="testlink.html">Features</a>
...
</div>
<!-- End of Code for Deluxe Menu Items -->

You won't see this text in most cases. We use it on our websites too.

But you can delete this code if you want.



Q: I've been using your application for about 2 years but have never been able to insert a vertical divider in dhtml menu source.


A: You should set a separator in the menuItems, for example:

  var menuItems = [
["Home","index.cfm", , , , , , , , ],
["-"],
["About Us","about.cfm", , , , , , , , ],
];

Please, see the following parameters:

//--- Separators
  var separatorImage=""; //for subitems
  var separatorWidth="100%";
  var separatorHeight="3px";
  var separatorAlignment="right";
  var separatorVImage="images/public/separator.gif"; //for the top items
  var separatorVWidth="100%";
  var separatorVHeight="2px";
  var separatorPadding="";


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