Css For Floating Left Side Menu by Deluxe-Menu.com
Css For Floating Left Side Menu

Menu Screenshots

Css For Floating Left Side Menu Popupmenu In Javascript

Features

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!
Cost Effective
Javascript Horizontal Scroll Css For Floating Left Side Menu
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
Easy Setup
  • De Luxe Tuner. GUI interface to create your css for floating left side menu menus easily and in no time
  • Sensible menu parameters for manual editing
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



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Submenus drop down over all the objects of the page (select, flash, object, embed, applet). If for some reasons a submenu can't drop down over an object, the latter will be hidden for a time when the submenu is shown.
  • These effects will make your menu more attractive and stylish. You can cast a shadow on the menu and submenus, set transparency. Among available transitional effects there are such as fade, mosaic, random dissolve, slide out and many others.
  • Create individual styles and assign them to any submenu and item. Use individual styles to achieve stunning effects!

Recent Questions

Q: When I want to have the same width of each item I use the individuel styles sometime it works and sometime not

A: See, when you use Individual styles to set the width for your items

  var bstyles = [
["bitemWidth=150px"],
];

you should check that you haven't set the exact width for the menu

  var bmenuWidth="250px";

Please, check it.



Q: Is it possible to set the width for each individual tab in the html tab menu instead of having them size dynamically based on the tab name?

A: You can create Individual Items Style and assign it to your tabs.

  var bstyles = [
["bitemWidth=100px"],
];

  var bmenuItems = [
["Item 1","", "", "", "", "", "0", "", "", ],
["Item 2","", "", "", "", "", "0", "", "", ],
["Item 3","", "", "", "", "", "0", "", "", ],
["Item 4","", "", "", "", "", "0", "", "", ],
["Item 5","", "", "", "", "", "0", "", "", ],
];



Q: I purchased your menu and I am currently using it. I was trying to use the vista template with the images. Yet when I have an js dropdown menu item that is a little long in text the image breaks in to two buttons. Is there a way to fix this or is that just the way it is with these templates?

A: Images in Vista Templates have the fixed width and height (92 x21):

  var itemStyles = [
["itemWidth=92px","itemHeight=21px","itemBackColor=transparent,transparent","itemBorderWidth=0", "fontStyle=normal 11pxTahoma","fontColor=#3A3A3A,#000000", "itemBackImage=data-vista-2-04.files/btn_olive.gif,data-vista-2-04.files/btn_white.gif"],
];

When items text is too long you can have such effect.

You can try to use combined background for your items, for example:

  var beforeItemImage = [,]; //left-side image for normal and mouse over state
  var itemBackImage = [,]; //background or image for normal and mouse over state
  var afterItemImage = [,]; //right-side image for normal and mouse over state
  var beforeItemImageW = '';
  var afterItemImageW = '';
  var beforeItemImageH = '';
  var afterItemImageH ='';

But you should create a small images in any Graph Editor, for example:
button_n_back.gif
button_n_left.gif
button_n_right.gif
button_o_back.gif
button_o_left.gif
button_o_right.gif


Q: I am unable to make content show for each tab in the dhtml tab navigation.
I can make it open a new webpage, but that isnt what I want.
What I want is when the visitor clicks a tab, then content for
that tab shows, on the same page, and the tab menu still there.

A: 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", "", "", ],