Cmsimple Popup Menu by Deluxe-Menu.com
Cmsimple Popup Menu

Template:

Green Menu Template - Dhtml Sliding Menu





    - Status string shows item labels
    - AJAX menu loading - loads web menu data from the server "on-the-fly".
    - Transition #14 - "fade out" effect
    - Submenus go over all page objects
    - Filters and Transitional effects
    - Search feature - add the search area in the menu and type symbols.
    - Unlimited number of sub levels
    - Submenus automatically scrolls




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

Menu Screenshots

Cmsimple Popup Menu Javascript Hide

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

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
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed cmsimple popup menu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Javascript Menu Flottant Cmsimple Popup Menu
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!
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
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



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

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

Recent Questions

Q: So, as you can see, I use "_self" in order to make the URL open in same window when left-clicked. If I set it to empty it opens in new window (is that correct behaviour (I thought we should use _blank to get that effect).


A: In the menuItems you can set target parameter for each itemindividually.
The following parameter:
  var itemTarget="_blank";
sets target for all items, so if you haven't specified target for theitem

["Arbeidsplaner","cp_workplan.php",,,,"","0","0"],

the target for this item will be "_blank".


Q: Can I use my own images as the tabs in a dreamweaver navigation bar?

A: The Drop down menu items have the following structure:
  var menuItems = [
[text, link, iconNormal, iconOver, tip, target, itemStyleInd, submenuStyleInd, jsFilename],
[text, link, iconNormal, iconOver, tip, target, itemStyleInd, submenuStyleInd, jsFilename],
...
];

Where iconNormal, iconOver - Icons of an item: icon in normal state, icon in mouseover state.

So you can set your menu items in a such way:

  var menuItems = [
["","testlink.htm", "icon1.gif", "icon1o.gif"],
["","", "icon2.gif", "icon2o.gif"],
 ["|","testlink.htm", "icon3.gif", "icon3o.gif"],
 ["|","testlink.htm", "icon4.gif", "icon4o.gif"],
 ["|","testlink.htm", "icon5.gif", "icon5o.gif"],
["","testlink.htm", "icon1.gif", "icon1o.gif"],
];

Q: Is there any way to change the font size of the secondary and tertiary links but yet have a different font size for the primary links?


A: You can use different font style for each link on each level.
You should use Individual Item Styles.
Please, use Dhtml Tuner application to create individual styles.

For example:

// --- DHTML Tuner style names ---
  var tstylesNames=["Individual Style 1","Individual Style 2","Individual Style 3","Individual Style 4","New Individual Style",];
  var tXPStylesNames=["Individual Style 1",];

  var tstyles = [
["tfontStyle=bold 8pt Tahoma","titemBackColor=#265BCC,#265BCC","tfontColor=#FFFFFF,#428EFF","tfontDecoration=none,none"],
//style 0 ["tfontStyle=bold 8pt Tahoma","titemBackColor=#265BCC,#265BCC","tfontColor=#215DC6,#428EFF","tfontDecoration=none,none"],
//style 1 ["tfontDecoration=none,none"],
//style 2
["tfontStyle=normal 8pt Tahoma","tfontColor=#013D6D,#5555FF"],
//style 3
["tfontStyle=bold 11px Bookman Old Style","tfontColor=#000000,#000000","tfontDecoration=none,underline"],
//style 4
];

  var tmenuItems = [

["+DHTML Menus","", "images/xpicon1.gif", , , "DHTML Menus", , "0", , , , ],
//style 0
 ["|DHTML Menu","http://dhtml-menu.com", "images/icon1.gif", "images/icon1o.gif", "images/icon1o.gif", "Information", "_self", , , , , ],
 ["|+DHTML Tree Menu","", "images/icon1.gif", "images/icon1o.gif", "images/icon1o.gif", "Support", "_self", "2", , , , ],
//style 2
   ["||2 styles: standard & XP","", , , , , , "3", , , , ],
//style 3
   ["|||Item 23","", , , , , , "4", , , , ],
//style 4
   ["|||Item 24","", , , , , , , , , , ],
   ["||Individual Item & Submenu Styles","", , , , , , "3", , , , ],
//style 3
   ["||Floatable & Movable Menu","", , , , , , "3", , , , ],
//style 3
....


Q: I am trying to follow your directions on how to load the application and I am completely lost as to what I need to do.
Do you have instructions on how operate the application; I am having a very difficult problem trying to maneuver around.
I am looking to create css vertical tabs, and the tabs are my personal images and I want to place html text into tabs.


A: To set your own images for tabs you should use the following
parameters (see how we created images in the attached example):

  var bitemBackImage=["img/styleIE7_n_back.gif","img/styleIE7_o_back.gif","img/styleIE7_s_back.gif"];
  var bbeforeItemImage=["img/styleIE7_n_left.gif","img/styleIE7_o_left.gif","img/styleIE7_s_left.gif"];
  var bafterItemImage=["img/styleIE7_n_right.gif","img/styleIE7_o_right.gif","img/styleIE7_s_right.gif"];

You can also use a whole images for you tabs you should use only
  var bitemBackImage=["img/styleIE7_n_back.gif","img/styleIE7_o_back.gif","img/styleIE7_s_back.gif"];

Set the dimensions of the menu here:
  var bmenuWidth="600px";
  var bmenuHeight="33px";


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 the
DIV'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", "", "", ],

You can use Object ID as well as Link in both modes. Use the following prefixes within item's link field:
"object:" - means that there is object id after it;
"link:" - means that there is a link after it.
"javascript:" - means that there is a javascript code after it, for example:javascript:alert(\'Hello!\')

So, you should write for example:

 ["|Link 1_1","object:Content1_1", "", "", "", "", "0", "", "", ],




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