Updated: 990323. Fixed the menu for IE5
Updated: 990118. Added a feature so that all windowed controls are hidden while showing the menus
Updated: 980726. There are lot of updates here. Differnet animation styles and a folder that shows your local Favorite menu.
Updated: 980722. Add the ability to target different frames and windows.
Updated: 980605. Changed all display to visibility! Credits goes to Monica Lyra
This toolbar only works with Internet Explorer 4.0
Try moving the menu by dragging the handle! Also try docking the menu at the bottom.
<HEAD> tag like this:
<link rel=stylesheet href="menu.css" type="text/css">
Then you need to build your menu. It basically is a
<TABLE> with nested tables inside for submenus.
The easiest way is to copy the code on this page and then edit the menu but if you wan't to build it from scratch here is what you do:
Start with an outer table that is actually the menubar
<table id="menu" cellspacing="1" onselectstart="return false" onmouseover="menuOver()" onmouseout="menuOut()" onclick="menuClick()"> <tr id="menubar"> <!-- This is a handle. Grab this --> <td class="disabled" style="padding-left: 0; padding-right: 1"><div class="disabled" id="handle" for="menu" style="left: 3; width: 3; height: 100%" title="Move me!"></div></td> <!-- End of handle --> <td class="root">Demo </td> <td width=100% class="disabled"> </td> <!-- Needed to fill out the menubar --> </tr> </table>
menu id is for defining the menu and this include catching of mouse events inside the menu
menubar is for the menubar sa that it won't be treated as a menuitem (more about this later)
root is for defining that this is a button that opens a menu (the root td contains another table...)
Now you need to create your menu. All menus are tables that has the
class="menu". Inside the menu-table
all table rows (TR) are treated as individual menu items
<td class="root">Demo <table cellspacing="0" class="menu" style="visibility: hidden;"> <tr href="http://put.your.link.here"> <td><!-- Put your image icon here --></td> <td nowrap>This is your first menu item</td> <td><!-- This is here to create space for the arrow for subs --></td> </tr> </table> </td>
href in the
<TR> is the default action/location that is executed when you click the menu item.
remember that yo can use
style="visibility: hidden" is needed
so that the menus are hidden until you show them. You can also add the attribute
target to open the
link in another window. If no target is present it takes the target from the
<BASE> tag in the head. If no base tag is
available the link will open in current window.
To create a submenu you create a menu item (
<tr>) that has the
class="sub" and inside the last
<td> you add a new menu (
<table class="menu">). Here is an example:
<tr class="sub"> <td nowrap>The sub opener</td> <td><span class="more">4</span> <table class="menu" style="visibility: hidden" cellspacing=0> <tr> <td>This is a sub</td> </tr> </table>
If you want to use the arrow that indicates the sub you should include the
If you don't want a moveable menubar you could just remove the handle from the menubar
But if you wan't a moveable menubar you need to enclose your content with a div called outerDiv and you should call the function fixSize() directly after the the table that defines your menu. Include this directly after your closing table tag:
You should also include a closing div directly before the end of the body (
</body>). To make it blend
with the IE4 toolbar you should remove the border from the body. This is done by adding
style="border: 0" in the
body tag. You should also remove the scrollbar of the body because the outerDiv div has a toolbar. This is done by adding
scroll="no" to the body tag
The best way to see how you get everything to work is to see the source code for this page or the simplified demo page. The side image that I've used in the menu is added by an extra column (TD) in front of the others that has colspan=99 (some value bigger than or equal than the number of menui tems in the menu. It has the picture as the background
I've made three different versions of this men.
Note that the animation has been moved to seperate files for ease of use. For the menu to work you need only the menu.js file but if you want any of the animations you need to include on as well. If you include both the fade verion has higher priority
This sample uses the FileSystemObject (marked as unsafe because it allows the script to do read files from the users hard drive. It first looks up your name of your favorite folder and then it loops over all files and folders and generates HTML for this menu