Vertical Menu Css Sliding Panels by Deluxe-Menu.com
Vertical Menu Css Sliding Panels

Template:

Orange Tabs Template - Rollover Drop Down Menu






    - Submenus automatically scrolls
    - Relative/Absolute menu position
    - Keyboard navigation - press Ctrl+F2 to enter the top menu
    - Filters and Transitional effects
    - UL/LI items structure
    - 85% transparency for sub menus
    - Submenus go over all page objects
    - Cross-frame support - menus work on frameset-based pages




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

Menu Screenshots

Vertical Menu Css Sliding Panels Drop Down Css

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
Easy Setup
  • De Luxe Tuner. GUI interface to create your vertical menu css sliding panels menus easily and in no time
  • Sensible menu parameters for manual editing
Tutorial Javascript Menu Bar Vertical Menu Css Sliding Panels
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
Cost Effective
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.

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

Recent Questions

Q: I would like to separate each main js dropdown menu item (Find an Expert, Contact...etc) with a dotted line graphic. If you look at the js dropdown menu, you will see that each graphic is separated by a dotted line. I am trying to replicate that look in the Deluxe Menu. Is there a way I can do that? I tried to use the "separatorImage" value in the DeluxeTuner, but it didn't seem to do anything. Is there a way to put a dotted border just along the bottom of them item, instead of around the whole item (like a box)? Or is there a way to insert the graphic between the items?

A: To add a separator you should

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

You can create separators using menuItems, for example:

  var menuItems = [
["item 1"],
["-"], // this item is separator
["item 2"],
];



Q: This is the problem I need to solve.

When the page loads with dhtml menu with images in Firefox 3, ALL the copy in ALL the tabs is displayed in the browser and I can't figure out what I need to do to change that. What I want displayed is ONLY the copy assosiated with the default tab.

A: You should add style="visibility: hidden;" for a content DIVs.

<div id="stilotig" style="visibility: hidden;">
<div id="history" style="visibility: hidden;">
...



Q: Currently, I have Deluxe Menu installed on my website.
However, I have noticed that the javascript mouseover menu picture width for the top level icon changes. For example, the mouse over picture for "Beauty" is one length whereas the mouse over icon for "Home & Garden" gives me one and a half pictures. I have illustrated this in the attachment.

Please could you advise me on how I could resolve this problem.

Thank you for taking your time to read this email.
I look forward to receiving your reply.

A: You can try to use the following parameters to use combinedbackground for your items:

  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 replaced the code you suggested and I downloaded the current version of Deluxe-Tuner. I also removed the Javascript roll-overs I had elsewhere on the page and created the text.

I still get 'Error on page' when I hover over the first java scrolling menu item.

Please help! I need to buid this site out by Monday.

A: Now you have several errors in your data file:

  var menuBackColor="f9f9ec";

You should write:
  var menuBackColor="#f9f9ec";

The following parameters cannot be empty:
  var menuBorderWidth="0";
  var itemBorderWidth="0";

It is not correct to write the java scrolling menu parameter in the following way:
  var itemBorderStyle=["1px","1px"];

You should write:
  var itemBorderStyle=["none","none"];

If you want to add borders in the subitems you should write:
  var itemBorderWidth="1";
  var itemBorderColor=["#c59d1f","#c59d1f"];
  var itemBorderStyle=["solid","solid"];

And to remove border from the top items you should create Individualstyle and assign it to the top items:
  var itemStyles = [
["itemBorderWidth=0","itemBorderStyle=none,none"],
];

["","", "/images/nav_OFF_01.gif", "/images/nav_ON_01.gif", "", "","0", "", "", "", "", ], //assign style 0
["","", "/images/nav_OFF_02.gif", "/images/nav_ON_02.gif", "", "", "0", "", "", "", "", ], //assign style 0
...



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