Mac Stle Vertical Javascript Menu by Deluxe-Menu.com
Mac Stle Vertical Javascript Menu

Menu Screenshots

Mac Stle Vertical Javascript Menu Javascript Dropdown Dhtml Menu

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
Cost Effective
Xp Menu Javascript Mac Stle Vertical Javascript Menu
Easy Setup
  • De Luxe Tuner. GUI interface to create your mac stle vertical javascript 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
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

Javascript Menu. DHTML Menu.

  • Submenus can be shown in 4 ways: - From from left to right + upwards and also left to right. - From right to left and also from right to left + upwards (e.g. for right-to-left languages).
  • Use images for icons, backgrounds of submenus and items. Using images you can create menus entirely based on graphics.
  • Create both horizontal and vertical menus and submenus with any amount of menus on one page.
  • Insert any HTML code inside the menu item - be it a form or a picture, a flash-object or a text. This ability allows you to create various menus of any complexity.

Recent Questions

Q: I have used Deluxe tuner menu on a web page and facing two small problems

a) The separator I have used do not show up. This is supposed to be a black horizontal line below every menu item. The image name is sep.jpg

b) The submenu appears on the right and I am unable to figure out a way to get the submenu to appear on the left. My navigation is placed on the right panel so if the sub menu appears on right of drop down menu bar, it practically goes off the page.

Can you please help with this and let me know why this is happening ?

A: 1) You should set separators between main items:

["Home","testlink.html", "data.files/bul.jpg", "data.files/bul.jpg", "", "", "", "", "", ],
["-"],
["About Us","", "data.files/bul.jpg", "data.files/bul.jpg", "", "", "", "", "", ],

And set:
  var separatorVImage="data.files/sep.jpg";
  var separatorVWidth="100%";
  var separatorVHeight="1px";
  var separatorPadding="0px";

2) You should set the following parameter:

  var smViewType=2;



Q: I recently purchased your Deluxe-Tabs product and I am trying to create tabs that occupy 100% width with each tab being equal width.

Right now when I specify 100% menu width all of the tabs are difference sizes (widths).

How do I control the individual tab width?


A: You should use Individual Item styles to achieve this effect.

See the attached example.

You should set:

  var bmenuWidth="100%";

I have 5 items in my example, so I've created Individual Style

  var bstyles = [
["bitemWidth=20%"],
];

And assign it for all items:
["Item 1 aaaaa ssssss","", "", "", "", "", "0", "", "", ],
["Item 2 ffff jjjjjjjjjj","", "", "", "", "", "0", "", "", ],
["Item 3 text text","", "", "", "", "", "0", "", "", ],
["Item 4 text text","", "", "", "", "", "0", "", "", ],
["Item 5 text text","", "", "", "", "", "0", "", "", ],

But notice that items width cannot be smaller than the width of its'text. So it is possible that you'll have different size of some itemsif your window have a small size.


Q: My question is how can I change the size and color of the font for the
main items in the simple dhtml menu, not the drop downs?


A: You can use Individual Item Styles in that case:
http://deluxe-menu.com/individual-item-styles-info.html

Set the style you need for subitems:

  var fontStyle=["normal 11px Trebuchet MS, Tahoma","normal 11px Trebuchet MS, Tahoma"];

Set the style you need for main items:

  var itemStyles = [
["fontStyle='bold 12px Arial','bold 12px Arial'"], // style 0
];

Assign this style for main items:

  var menuItems = [
["Scenic album","scenic-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
 ["|Item 8","", "", "", "", "", "", "", "", "", "", ],
 ["|Item 9","", "", "", "", "", "", "", "", "", "", ],>  ["|Item 10","", "", "", "", "", "", "", "", "", "", ], ["Floral album","floral-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
["Southwest album","southwest-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
["Wildlife album","wildlife-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
];

Q: The text on the dropdown menu item is not centered as it shows in the preview, How do I fix?

A: The reason is in your style

TD {
VERTICAL-ALIGN: top
}

Try not to define style for Table, TD, TR elements they can affect themenu.

Set also the following parameter:

  var itemAlignTop="center";