Flex Left Collapsible Menu Sample by Deluxe-Menu.com
Flex Left Collapsible Menu Sample

Template:

iPhone 9 Template - CSS Drop Menu






    - Search feature - add the search area in the menu and type symbols.
    - Transition #14 - "fade out" effect
    - 85% transparency for sub menus
    - Sound support!
    - Submenus go over all page objects
    - Relative/Absolute menu position
    - Horizontal or vertical orientation
    - Keyboard navigation - press Ctrl+F2 to enter the top menu




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

Menu Screenshots

Flex Left Collapsible Menu Sample Horizontal Submenus Using Javascript

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

Features

Easy Setup
  • De Luxe Tuner. GUI interface to create your flex left collapsible menu sample menus easily and in no time
  • Sensible menu parameters for manual editing
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
Dhtml Web Design Menu Flex Left Collapsible Menu Sample
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
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!



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 need to create a popup menu in javascript triggered from a flash movie button. Is this possible, and if so, do you have any documentation on this? (coding for flash button, etc)

A: Unfortunately you cannot assign OnClick or OnContextMenu event forflash file.



Q: I can't figure out how to change the names of each tab for the simple dhtml tabs!

A: You can set the name of each tab in the Deluxe Tuner.
Double click on the item name in the Items area.

Or set the name of the tab using   var bmenuItems:

  var bmenuItems = [
["Name of Tab1","content1", "", "", "", "", "1", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Name of Tab2","content2", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Name of Tab2","content3", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Contact us","content4", "", "", "", "", "2", "", "", ],
];

Q: I downloaded the trial version of deluxe-menu.
I created a four tab menu using the tab'stab menu generator; so far so good.
I read the tutorial where to past codeand ensuring all items wire in the menudir/; so far so good. The problem, you talk about two> files 'dmenu.js' & 'data.js', these files were not created bydeluxe-menu program.
Where are they, so that I can see if this thing works before buying, so far; not so good.

A: You may have another name for your data file (not data.js).

If you want to use tab menu you'll have dtabs.js engine file and data file.

1. create and save .js file with your menu parameters in Deluxe Tuner(you can use "File/Save as/HTML" function).
You can enter any name you like, for example enter "tab". So you'llhave tab.html, tab.js files and "tab.files" folder with all menu files.
2. open your .html page in any text editor
3. Copy generated tab.js file and "tab.files/" folder in the same folderwith your index.html page.
4. Open generated menu.html in any text editor and copy several rows of code (<script> tags), For info see:http://deluxe-tabs.com/product-info/?installation

<head>
<!-- Deluxe Menu -->
<noscript><a href="http://deluxe-menu.com">Javascript Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript" src="tab.files/dmenu.js"></script>
</head>
<body>
...
<script type="text/javascript" src="tab.js"></script>
...


That's all.

Q: We are looking for documentation on how to use the onmouseover tab program. We purchased this also and we were not able to figure out the deluxe tab part.

A: You can find all documentation on our website, http://deluxe-tabs.com.

You should paste your content in the <div> .. </div> tags.

<div id="content1" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DM.gif" width=262 height=56 alt="Deluxe-Menu.com"></p>
</div>

<div id="content2" style="visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DT.gif" width=262 height=56 alt="Deluxe-Tree.com"></p>
</div>

<div id="content3" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DTabs.gif" width=254 height=58 alt="Deluxe-Tabs.com"></p>
</div>

See in Deluxe Tabs there are two modes:

1.   var tabMode=0;
You can create only one level of tabs and assign Object Id's of theDIV's to show when you click on the tab.

["XP Tab 1","content1", "", "", "", "", "", "", "", ],
["XP Tab 2","content2", "", "", "", "", "", "", "", ],
["XP Tab 3","content3", "", "", "", "", "", "", "", ],
["XP Tab 4","content4", "", "", "", "", "", "", "", ],

2.   var tabMode=1;
You can assign only links in this mode.
You should create top level items with subitems.

["XP Tab 1","", "", "", "", "", "", "", "", ],
 ["|Link 1_1","http://deluxe-tabs.com", "", "", "", "", "0", "", "", ],
 ["|Link 1_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 2","", "", "", "", "", "", "", "", ],
 ["|Link 2_1","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 3","", "", "", "", "", "", "", "", ],
 ["|Link 3_1","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_5","testlink.htm", "", "", "", "", "0", "", "", ],


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