Free Vertical Flyout Menu Css by Deluxe-Menu.com
Free Vertical Flyout Menu Css

Template:






    - Relative/Absolute menu position
    - AJAX menu loading - loads web menu data from the server "on-the-fly".
    - Submenus dropdown on mouseover
    - 85% transparency for sub menus
    - Submenus automatically scrolls
    - Personal CSS styles for separate menu elements
    - Image arrows
    - Inactive/Disabled items




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

Menu Screenshots

Free Vertical Flyout Menu Css Menu Tree Java

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 free vertical flyout menu css menus easily and in no time
  • Sensible menu parameters for manual editing
Css Menu List Free Vertical Flyout Menu Css
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed free vertical flyout menu css samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
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



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

Javascript Menu. DHTML Menu.

  • Good navigation is an important step to website success. If people can't find their way around the site, they will quickly give up looking and leave, never to return. So, it's absolute vital that your website has a fast, neat, and eye-pleasing navigation.
    Don't allow your website visitors to get lost. Try Deluxe Menu!

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

Recent Questions

Q: I have menus generated by you deluxe menu package . They look fine on all my computer but look bad on my friends computer.
Can this be fixed?


A: Thanks for your interest in our products.

Try to specify all units in "px", for example:

  var menuHeight="22px";

Try to set exact width for menu item
  var menuWidth="736px";

Try also not to set
  var smWidth="0";
  var smHeight="0";

Please, see the attached data file.

You can use additional parameters to make menu paths absolute:

  var pathPrefix_img = "http://domain.com/images/";
  var pathPrefix_link = "http://domain.com/pages/";

These parameters allow to make images and links paths absolute.
For example:

  var pathPrefix_img = "http://domain.com/images/";
  var pathPrefix_link = "http://domain.com/pages/";

  var menuItems = [
["text", "index.html", "icon1.gif", "icon2.gif"],
];

So, link path will be look so:
http://domain.com/pages/index.html

Images paths will be look so:
http://domain.com/images/icon1.gif
http://domain.com/images/icon2.gif

Please, try to use these parameters.


Q: What I try to make is a menu dhtml with items having a border of only 1 px, also between the menu items. However it seems that Deluxe menu draws a 1 px line around every menu item giving an effective border line of 2 px between the area where the items touch each other. I want to have 1 px border also on the areas where the items touch each other.
Any suggestion how to fix this?


A: If you want to have the 1px border between the items only you canuse separators.

Please, see the following parameters:

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

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

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

];


Q: I've finally got it working and it looks good. So thanks. But... unfortunally there's still a small problem wich occured after I got everything else working: No matter if I set the parmeter "  var texpanded" to '1' or '0' it expands by default tree menu javascript. Why?

I also have another question I forgot to ask you about earlier: Originally I only had the data.js file but in the non-profit zip file you gave me there was no "data.js" file, only "data-tree.js". Wich one will the script use? Do I need both? The javascript call I put where I want the menu to appear calls for "DATA. js". So what good does the "data-TREE.js" file do?

I include the "data.js" file if you need to have a look at it. The "data-tree. js" file is identical now that I changed all the "  var tmenuItems" at the bottom). (The "menu.html" I guess you can look at yourself by "View source".)

Also, the submenus where I would like to put XP style menus are not finished yet but for now I have the same "tree" script in them. They are under "DART/dartspel.html", and on six artist discographys under MUSIK: Edguy, Katie Melua, Joe Satriani, Michael Schenker, Trans-Siberian Orchestra and Magnus Uggla. This is if you'ld like to see the sub pages where I use other "copys" of Deluxe-tree. (I hope you don't mind that the "Illegal copyright" nag is very small. It's supposed to dissapear anyway with the new Non-profit license).

A: 1) See the structure of your tmenuItems is incorrect now.

You should write:
["->HEM (Klicka f?r meny)","welcome.html", "data.files/hem.gif", "data.files/hem2.gif", "data.files/hem.gif", "Startsidan", "right", "", ],
Without '|' symbol in the beginning.

2) You should write tleft parameter correctly. Now you have:

//--- Positioning
  var tabsolute=1;
  var tleft="00px";
  var ttop="10px";

Write it in the following way:
  var tleft="10px";

3) data-tree.js file is the default tree menu javascript file. There is no need to use it if you already haveyour data.js file.

Q: I've noticed something strange in the Deluxe Tree and I am wondering if this is normal.

Here's an example I have in my "data.js" file to populate the javascript ajax tree:

  var tmenuItems = [

["Mes alertes/My alerts","", "", "", "", "", "", "0", "", "", ],
 ["|Francais","", "", "", "", "", "", "", "", "js/AjaxTreeFr.js", ],
 ["|English","", "", "", "", "", "", "", "", "js/AjaxTreeEn.js", ],
];

Here's basically how it goes:

- Basically the "0" represents a pre-built style that I have set for the root of my tree.

- Under this are the first child of the root called "Francais" and "English" which I link with a JS file to populate (Because the users will customize the alerts they want to see).

This works perfectly fine. But it is a workaround. Let me explain what I wanted in the first place:

  var tmenuItems = [
["Mes alertes ","", "", "", "", "", "", "0", "", " js/AjaxTreeFr.js ", ],
["My alerts","", "", "", "", "", "", "", "", "js/AjaxTreeEn.js", ],
];

Basically I wanted to have 1 javascript ajax tree with 2 root items "Mes alertes" and "My alerts" but it seems impossible to attach a js file to the root of the tree view. (It doesn't get populated).

Any ideas?

A: See AJAX feature won't work for first-level in XP style now.

It works if you use:
  var tXPStyle=0;

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