|
EXAMPLE
Click the red dots to expand
or collapse the tiers or click the yellow dots to perform the action. A menu's
submenu(s) must
be collapsed in order to collapse its parent.
1) Insert this style command with the script in the <HEAD> section of the page.
2) Insert the following
script anywhere in the <BODY> section of the page.
3) Define
the size of the dots and their colors, and the font style in this section of the STYLE
command:
<style type="text/css">
.dot { position: absolute; width: 10; height: 10; visibility: hidden; background-color:
red; font-size: 1px; cursor: hand; z-index: 100 }
.dotoff { position: absolute; width: 10; height: 10; visibility: hidden; background-color:
gray; font-size: 1px; cursor: default; z-index: 100 }
.dotempty { position: absolute; width: 10; height: 10; visibility: hidden; background-color:
orange; font-size: 1px; cursor: hand; zindex: 100 }
.caption { position: absolute; visibility: hidden; font-family: Verdana; color:
black; font-size: 11px; text-align: Center; cursor: default; z-index: 1 }
</style>
4) Define
the menus and the links in this section of the script:
//Add submenus
menu.addItem("Index page","location='index.html'");
menu.addItem("Shareware","toggle");
menu.addItem("Scripts","toggle");
menu.addItem("Device drivers","toggle");
menu.addItem("More info","toggle");
menu.subMenus[1].addItem("Main page","location='shareware.html'");
menu.subMenus[1].addItem("Business","location='business.html'");
menu.subMenus[1].addItem("Graphics","location='graphics.html'");
menu.subMenus[1].addItem("Programming","location='programs.html'");
menu.subMenus[2].addItem("DHTML scripts","location='/scripts/dhtml_scripts.html'");
menu.subMenus[2].addItem("CGI Perl scripts","location='/scripts/cgi_scripts.html'");
To define the positioning of the menu in
the page, modify these
variables in this section of the script:
var menu = new menuObject("menu",pageWidth/2,pageHeight/1.5,"-- SimplytheBest.net
Sitemap",pageHeight/2);
The positioning will vary
depending on the size of the monitor since the method used is division of
the monitor size, i.e. pageWidth divided by 2, etc..
The author of the script has a page with examples on how to set actions. You can
view the page source to see how the actions are done.
|
