Javascript Code For Submenu Header by Deluxe-Menu.com
Javascript Code For Submenu Header

Menu Screenshots

Javascript Code For Submenu Header Dhtml Vertical Frames

Features

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
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
Web Javascript Javascript Code For Submenu Header
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed javascript code for submenu header 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!
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.

  • Build right-click menus for your site. For this purpose you should appoint a peculiar method for the object you want. The current X,Y of the mouse pointer or your own ones can be used for the context menu.
  • Design menus absolutely based on CSS (Cascading Style Sheets). It is possible to apply the personal CSS styles for every elements of the menu.
  • When the submenu is bigger than the visible page area, the size of submenu will be automatically decreased. To view all the submenu items you do not need to use scrollbars or something like that - just put your mouse to the bottom of a submenu and it will be automagically scrolled! You can also define width and height for each submenu.

Recent Questions

Q: Can I use drop down navigation menu using subfolders? I am trying to build amenu system but the website contains a lot of subfolders.


A: Yes, you can use deluxe-menu on the site with a lot of subfolders.

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: How can I set the padding for the dhtml horizontal menu text at the top? I want more padding on the left of the text but I don't want it centered.

A: You can set bigger left padding for your Submenu Style, for example:

  var menuStyles = [
["menuBackColor=transparent","menuBorderWidth=0","itemSpacing=1","itemPadding=0px 5px 0px 25px"],
];

itemPadding=0px 5px 0px 25px
                  top right bottom left


Q: Can you please give me tips on how I can style all menuitems to have font bold when selected and normal font when not selected?

A: Unfortunately, Deluxe Tree doesn't have such a feature. You can onlyset it's color. You cannot set the font of menu item bold when selected.

You can set menu item's font bold onMouseover, see example here:
http://deluxe-tree.com/data-templates/vista-style-7-template-sample.html

You should addthe following code in your data file:

function changeFont(obj, over)
{
obj.style.fontWeight = over ? 'bold' : 'normal';
obj.style.fontSize = over ? '13px' : '12px'; // You can not use this line
}

  var tmenuItems = [

["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Security</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Ease of Access</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Internet Options</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Windows Firewall</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Network and Internet</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Hardware</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Programs</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Appearance</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>User Accounts</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Personalization</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Sound and Speech</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Additional Options</div>","", "", "", "", "", "", "", "", ],
];

Please, notice also that you should add this function every time whenyou change your menu in Deluxe Tuner application, as Tuner deletesthis function.



Q: I'm using the deluxe-tree.
On the top of the tree there is a title. When i click onthe title the whole menu collapse. How can i disable this option ?
I want to keep the collapse option for the css menu tree when i click on the collapse button but not when i click on the title.

A: Try to set the following parameter:
  var texpandItemClick=0;