Jquery Vertical Menu Multi Level by Deluxe-Menu.com
Jquery Vertical Menu Multi Level

Template:

Green Tabs Template - Mouseover Drop Down Menu






    - Unlimited number of sub levels
    - UL/LI items structure
    - Text aligned to left
    - Inactive/Disabled items
    - Submenus go over all page objects
    - AJAX menu loading - loads web menu data from the server "on-the-fly".
    - Transition #14 - "fade out" effect
    - Special JavaScript API for changing javascript menu "on-the-fly"




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

Menu Screenshots

Jquery Vertical Menu Multi Level Dhtml Menu Effects

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

Features

Easy Setup
  • De Luxe Tuner. GUI interface to create your jquery vertical menu multi level menus easily and in no time
  • Sensible menu parameters for manual editing
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed jquery vertical menu multi level samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Dhtml Popup Mouse Menu Jquery Vertical Menu Multi Level
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
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
Cost Effective



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

Javascript Menu. DHTML Menu.

  • Good menu is an essential part of website commercial success. If people can't find their way around the site, they will fast give up seeking and retire, never to return. So, it's extreme serious that your website has a accurate, precise, prompt, and navigation of immaculate appearance.
    Don't let your web site guests to get lost. Try Deluxe Menu!

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

Recent Questions

Q: Do you have an extremely simple example of modifying a dynamic drop down menus with the JavaScript API? I've played with the example on the site, but I have trouble removing the other menus without breaking it.

I just want to use the API to change the icon on the menu items.

A: You should use the following function:
function dm_ext_changeItem (menuInd, submenuInd, itemInd, iParams)

<script language="javascript" >
dm_ext_changeItem(0, 0, 1, ["", "", "new_icon.gif", "new_icon_o.gif", "",,""]);
</script>

http://deluxe-menu.com/dynamic-functions-sample.html

Q: I was wondering how do I add more then five items on the top javascript toggle menu rather then using a sub menu.

A: Actually you can add as many top items as you want.

Use Deluxe Tuner to add more items or add them in your data filemanually, for example:

  var menuItems = [

["Item 1","whatsnew.htm", "Buttons/whatsnewup.jpg", "Buttons/whatsnewover.jpg", "", "", "", "", "", "", "", ],
["Item 2","test.htm", "", "", "", "", "", "", "", "", "", ],
["Item 3","index.htm", "Buttons/homeup.jpg", "Buttons/homeover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 4","about.htm", "Buttons/aboutup.jpg", "Buttons/aboutover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 5","commserv.htm", "buttons/commservup.jpg", "buttons/commservover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 6","conference.htm", "buttons/conferenceup.jpg", "buttons/conferenceover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 7","lodges.htm", "buttons/districtsup.jpg", "", "", "_parent", "", "", "", "", "", ],

Q: It seems that if I try and use the syntax  ["| with some HTML such as <DIV class = 'myclass'> inside dropdown menu it IGNORES the HTML and just treats it like another link.
But if I don't start the line with  ["| ..... Then I get a syntax error.

For example:

I am trying to place 4 links in a square shape in the top left of my screen. To do this I was going to create DIV's and set the TOP and LEFT to different values from within a loop (I left out the code that does the updating for myleft and mytop...)

  var menuItems = [

<loop>

 ["|<div style='position: absolute; left: <cfoutput>#myleft#</cfoutput>px; top: <cfoutput>#mytop#</cfoutput>px>'","", "", "", "", "", "", "", "", "", "",],

 ["|#ParentMenuDesc#","index.cfm?Workflow=#Workflow#&role=#Privilege_id#&cacheid=#createuuid()#&Process_Type=#Process_Type#&PageMode=#Process_Logic#", "#menu_option_icon#", "", "", "_top", "", "", "", "", "",],

 ["|</div>","", "", "", "", "", "", "", "", "", "",],

<end loop>

];

What am I doing wrong here?.... Can you show me how to accomplish this task?

A: No, this syntax is incorrect. It won't work.

  var menuItems = [

<loop>

 ["|<div style='position: absolute; left: <cfoutput>#myleft#</cfoutput>px; top: <cfoutput>#mytop#</cfoutput>px>'","", "", "", "", "", "", "", "", "", "",],

 ["|#ParentMenuDesc#","index.cfm?Workflow=#Workflow#&role=#Privilege_id#&cacheid=#createuuid()#&Process_Type=#Process_Type#&PageMode=#Process_Logic#", "#menu_option_icon#", "","", "_top", "", "", "", "", "",],

 ["|</div>","", "", "", "", "", "", "", "", "", "",],<end loop>

];

You should have <div> ... </div> tags in each dropdown menu item!
It is not correctly to write <div> ... </div> tags for wholesubmenu.

  var menuItems = [
 ["|<div style='position: absolute; left:<cfoutput>#myleft#</cfoutput>px; top: <cfoutput>#mytop#</cfoutput>px>text</div>'","", "", "", "", "", "", "", "", "", "",],

 ["|#ParentMenuDesc#","index.cfm?Workflow=#Workflow#&role=#Privilege_id#&cacheid=#createuuid()#&Process_Type=#Process_Type#&PageMode=#Process_Logic#", "#menu_option_icon#", "","", "_top", "", "", "", "", "",],

 ["| ","", "", "", "", "", "", "", "", "", "",],
];



Q: I am trying to figure out how to specify the css for the top css dropdown menu.

I saw this in some of the example code, but there was nothing similar in Deluxe Tuner

  var itemStyles = [

["CSS=topItemNormal,topItemOver","CSSText=topItemTextNormal,topItemTextOver" ],
];
  var menuStyles = [
["CSS=topMenu"],
];

I tried adding the above to my js code, but it didn't work. I can get it to work in non-css through Deluxe Tuner.

I am trying to draw a white border around the blue css dropdown menu

.topMenu
{
background-color:Blue;
border-width: 1px;
border-style: solid;
border-color: White;
}

/* Style for submenus */
.submenu
{
}

/* Style for top items: normal state */
.topItemNormal
{
background-color:Blue;
color:White;
text-decoration: none;
text-transform:none;
font-weight:normal;
FONT-SIZE: 11pt;
FONT-FAMILY: Verdana, Arial;
width:100%;
padding:2px 4px;
}

A:   var itemStyles = [

["CSS=topItemNormal,topItemOver","CSSText=topItemTextNormal,topItemTextOver"],
];
  var menuStyles = [
["CSS=topMenu"],
];

The following code is Individual Styles. You can edit them in DeluxeTuner.

Open your data file, click "Edit Individual Styles..." button on themain window. And create individual item style and individual submenustyle. Then you should assign these styles to your items.

See more info about Individual Styles here:
http://deluxe-menu.com/individual-styles-sample.html



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