Make Tree Css by Deluxe-Tree.com
Make Tree Css


Buy Now!  Free Trial Download

Menu Screenshots Make Tree Css

Make Tree Css Download Javascript Tree

Features Make Tree Css

High Performance
  • AJAX menu loading - loads web menu data from the server "on-the-fly".
  • Commonly loads quicker than other html page elements
  • Runs well with an unlimited number of submenus and items
Cost Effective
Tree Menu Css Lists Javascript Make Tree Css
Unrivalled Features
  • Scrollable, dragable, floating
  • 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".
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
Seamless Integration
  • 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
Buy Now!  Free Trial Download

Javascript Tree Menu. Expandable Menu.

  • Good navigation system is an important part of web site success. If people can't find their way around the site, they will rapidly give up looking and go, never to return. So, it's very significant that your website has a neat, fast, and gratifying to the eye navigation.
    Don't permit your web site visitors to get lost. Try Javascript/DHTML Tree!

Recent Questions Make Tree Css

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, Javascript/DHTML 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 am very interested in your Deluxe Tuner software and specifically the Deluxe Tab software.  However, I am confused on thedeluxe tab software as to where the content for each tab is imputed.  Everything seems to be extremely user friendly but I am unable to understand where to put the content information.

A: See, for each item you should assign the ID property of the content DIV.

["Style Name","contentName", "", "", "", "", "1", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Style Description","contentDescription", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Style Variations","contentVariations", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Empty","", "", "", "", "", "2", "", "", ],

And on your html page you should create DIV's with such ID.

<div id="contentName" style="height: 0%; visibility: hidden;" class="tabPage">
<br><br><br> <p align=center><img src="img/style01_title.gif" width=140 height=90 alt="Glass Style Tabs"></p> <br><br><br> You should paste your content here!!!!! </div>



Q: I am trying to setup a popup tab menu like the one that you have on top part of your web pages (containing items; "Home", "Product Info", "Sample"...).

Right now I am using <div id=""> tag to load everything and break the content into each tab, but it is taking a long time to load everything first then break them down into tabs. So I thought maybe having each tab's content in each page, and have a link to each page would be more efficient. But when I put a link for each tab, for example "link:www.google.com" I get an javascript error saying "tabs[...].id is null or not an object". When I test this straight from Deluxe Tuner, I get the same message.

Can you tell me what I am doing wrong here? Or is there any better way to solve my problem? Thanks in advance.

A: Check that you have style=" visibility: hidden;" for your DIVs
<div id="content1" style=" visibility: hidden; height: 400px;" class="tabPage">

> But when I put a link for each tab, for example
> "link:www.google.com" I get an javascript error saying "tabs[...].id is
You should write:
link:http://www.google.com


Q: The spacing between each item of the top horizontal dropdown menu is uneven but I don't know why.

If you highlight them all it becomes more obvious.

It is almost as if the space after a 2 word link is twice the space after a one word link or else the total space after each link is related to the number of letters in the link.

For example the space after 'Discounts' is greater than the space after 'Home' but the space after 'Envelope Printing' is even greater.

A: You can try to set the following horizontal dropdown menu parameters:

  var menuWidth="";

  var itemPadding="0px 10px 0px 10px";