|
DHTML Tree Menus | |||||||||||||||
This library allows the page author the ability to insert windows-like tree menus(similiar to the start menu)anywhere on their web page, simply and cleanly. These menus will display based when the users mouse passes over a designated element, and expand or colapse automatically based on the users navigation though the menu.
Things to notice, the menus dissappear after a timed wait period when the mouse leaves a menu. Almost every aspect of each menu is configurable, and you can insert as many menus on a page as you want.
You wouldn't BELIEVE how easy it is for you to put this on your page! Follow along with the steps, choose from the various options, and add an easy to use menu to your web page!
Step 1: Get the file library
Download version .90 Oct 1 1997
Step 2: Insert it into your page
Place the following HTML in the <HEAD></HEAD> of your page, and make sure the src="" points to the URL for the library you just downloaded.
<SCRIPT SRC="menus.js"></SCRIPT>
Step 3: Create a menu in your page
Menus are created by setting a property of the element that activates the menu. The configuration for the structure of the menu is placed in a hidden <DIV> tag. A good menu with 3 elements and 2 subelements to cut and paste would be:
<A HREF="link.html" MENU="top:10;left:100;src:menusrc;">Start</A>
<DIV ID="menusrc" STYLE="display:none;">
Yahoo!http://www.yahoo.com!Just a simple link to yahoo.;
Microsoft!http://www.microsoft.com!Go ahead and visit Microsoft's Home Page;
[
Inte et Explorer!http://www.microsoft.com/ie!Microsoft Inte et Explorer Information;
IIS!http://www.microsoft.com/iis!Ver 4 is VERY powerful;
]
W3C!http://www.w3.org!The 'source' :);
</DIV>
- A
- Use any normal HTML element, here I used an Anchor
- MENU (name:value pairs seperated by semicolons) Place this in the element that will spawn the menu.
- top: (Required)
- position the initial location of the menu when it is displayed, relative to the same coordinate system as the element
- left: (Required)
- position the initial location of the menu when it is displayed, relative to the same coordinate system as the element
- src: (Required)
- the ID for the DIV containing the configuration data for thestructure of the menue
- border-width:
- Border size of the elements. Default 1.
- border-color:
- Color of the border. Default black.
- background:
- Background Color of the elements. Default white.
- highlight:
- What color should it tu when the mouse passes over it? Default #DCDCDC
- font-size:
- Standard CSS font size(small/large/etc) Changes size of the arrow also.
- font-family:
- Standard CSS font family attribute. Only applied to the title of the element.
- font-color:
- Color of the title text.
- icon-color:
- Color of the icon and arrow. Default black.
- arrow:
- true/false Show the Arrow? Default true
- showrow
- true/false Show the lines between each row? Default true.
- height
- Height of each row. Default 22
- width
- Width of each row/menu. Default 150
- arrow-offset
- Distance of the arrow from the left edge of the row. Default 135
- menu-offset
- Distance from the right edge of the menu where the submenu is displayed. Default 1. Can be negative.
- menu-topoffset
- Distance from the top of the row where the submenu is displayed. Default 0.
- wait
- Time the menu is still displayed when it isnt in focus. Default 500 (in ms)
- DIV
The structure for the menu is simple to hand enter, and designed to be extreemly easy to generate from a server side CGI.
Each row has 4 possible columns, all seperated by a "!" character and each row is terminated with a ";" character. Example:
Title for the row!http://www.url.com!Popup description for the link!100;
Where the first column is the title for the row, the second column is the URL to link it to, the third column is a description that will be displayed when the mouse is over the link, and the fourth column is the number for a webding font to display as an icon on the left of the title. The third and fourth columns are optional.
When you want a sub-menu to popup for a row, immediately following the row encapsulate the sub-menu rows with "[" and "]" characters. Refer to the example above or the source from the demos to see it in action. Note, you can have as many sub elements of sub elements as JavaScript will handle. Also, all whitespace is colapsed, so feel free to use any formating you want inside the <DIV> using retu s and tabs as you want.
Thats it! Put in as many as you want on your web page and as many web pages as you want!
Please feel free to modify the code, it is fully commented to help you lea how it works, and especially, PLEASE feel free to email me jer@jeremie.com with your comments/questions/suggestions/bugs/code enhancements, whatever!