Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Hierarchical Menu
This script is exactly identical to the original slide-in menu bar, except that the menu itself is an external HTML file! This allows you to configure the menu simply by editing the external file, through HTML
Insert into <HEAD>
<script> <!-- Beginning of JavaScript - // CREDITS: // new hierarchical menu Version 1.1 by Urs Dudli and Peter Gehrig // Copyright (c) 1999 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 1/18/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a link to http://www.24fun.ch on the webpage // where this script Script will be running. // ********************************************************************************** // INSTRUCTIONS: // Configure the menu and font parameters for each menublock below. // each menublock[x] contains all necessary informations to build one menu-item with // as many sublinks as you like. You can add as many menublocks as you need. // // ATTENTION: When you configure the menublocks take care that you // set the ";" and the "+" as seen below. // ********************************************************************************** var menublock=new Array() // no need to change this var plus_i=0 // no need to change this menublock[0]="Arial;"+ // font mainlink "4;"+ // fontsize mainlink "000000;"+ // fontcolor mainlink "1;"+ // fontweight mainlink, 1 means bold, 0 means normal "Verdana;"+ // font sublinks "3;"+ // fontsize sublinks "FFFFFF;"+ // fontcolor sublinks "0;"+ // fontweight sublinks, 1 means bold, 0 means normal "menublock 1|#|;"+ // text|URL|target of mainlink "submenu 1.1|submenu11.html|main;"+ // text|URL|target of first sublink "submenu 1.2|submenu12.html|main;" // text|URL|target of second sublink menublock[1]="Arial;"+ // font mainlink "4;"+ // fontsize mainlink "000000;"+ // fontcolor mainlink "1;"+ // fontweight mainlink, 1 means bold, 0 means normal "Verdana;"+ // font sublinks "3;"+ // fontsize sublinks "FFFFFF;"+ // fontcolor sublinks "0;"+ // fontweight sublinks, 1 means bold, 0 means normal "menublock 2|#|;"+ // text and URL of first mainlink "submenu 2.1|submenu21.html|main;"+ // text|URL|target of mainlink "submenu 2.2|submenu22.html|main;"+ // text|URL|target of first sublink "submenu 2.3|submenu23.html|main;"+ // text|URL|target of second sublink "submenu 2.4|submenu24.html|main;"+ // text|URL|target of thirth sublink "submenu 2.5|submenu25.html|main;" // text|URL|target of fourth sublink // The following block is different. It contains a mainlink without submenus. // Take care to set the ";;;;" exactly as seen below. menublock[2]="Arial;"+ // font mainlink "4;"+ // fontsize mainlink "000000;"+ // fontcolor mainlink "1;"+ // fontweight mainlink, 1 means bold, 0 means normal ";;;;"+ // leave it empty "no submenu|main.html|main;" // text and URL of mainlink menublock[3]="Arial;"+ // font mainlink "4;"+ // fontsize mainlink "000000;"+ // fontcolor mainlink "1;"+ // fontweight mainlink, 1 means bold, 0 means normal "Verdana;"+ // font sublinks "3;"+ // fontsize sublinks "FFFFFF;"+ // fontcolor sublinks "0;"+ // fontweight sublinks, 1 means bold, 0 means normal "menublock 3|#|;"+ // text and URL of mainlink "submenu 3.1|submenu31.html|main;"+ // text and URL of first sublink "submenu 3.2|submenu32.html|main;"+ // text and URL of second sublink "submenu 3.3|submenu33.html|main;" // text and URL of thirth sublink // No need to change anything below // ********************************************************************************** var menusplit var urlsplit var font_weight_main var font_weight_sub var font_weight_sub var minusimg=new Image() minusimg.src="minus131.gif" var plusimg=new Image() plusimg.src="plus131.gif" var showsubmenus=new Array() for (i=0;i<=menublock.length-1;i++) { showsubmenus[i]=-1 } var plusminusimg=new Array() for (i=0;i<=menublock.length-1;i++) { plusminusimg[i]=plusimg.src } function openandclose(visi) { showsubmenus[visi]=(-1)*showsubmenus[visi] var menucontent="" if (showsubmenus[visi]==1) {plusminusimg[visi]=minusimg.src} if (showsubmenus[visi]==-1) {plusminusimg[visi]=plusimg.src} menucontent+="<table border=0>" for (i=0;i<=menublock.length-1;i++) { menusplit=menublock[i].split(";") urlsplit=menusplit[8].split("|") if (menusplit[3]==1) {font_weight_main="<b>"} if (menusplit[3]==0) {font_weight_main=""} if (menusplit[7]==1) {font_weight_sub="<b>"} if (menusplit[7]==0) {font_weight_sub=""} menucontent+="<tr><td>" if (menusplit[9].length==0) { menucontent+="</td>" menucontent+="<td>" menucontent+=font_weight_main menucontent+="<a href="+urlsplit[1]+" target="+urlsplit[2]+">" menucontent+="<font face="+menusplit[0]+" color="+menusplit[2]+" size="+menusplit[1]+">" menucontent+=urlsplit[0] menucontent+="</font></a></td></tr>" plus_i++ } if (menusplit[9].length!=0) { var thismainmenu=i+plus_i menucontent+="<a href='javascript:openandclose("+i+")'>" menucontent+="<img src='"+plusminusimg[i]+"' border=0></a></td>" menucontent+="<td>" menucontent+=font_weight_main menucontent+="<a href='javascript:openandclose("+i+")'>" menucontent+="<font face="+menusplit[0]+" color="+menusplit[2]+" size="+menusplit[1]+">" menucontent+=urlsplit[0] menucontent+="</font></a></td></tr>" if (showsubmenus[i]==1) { for (ii=9;ii<=menusplit.length-1;ii++) { urlsplit=menusplit[ii].split("|") menucontent+="<tr><td></td><td>" menucontent+=font_weight_sub menucontent+="<a href="+urlsplit[1]+" target="+urlsplit[2]+">" menucontent+="<font face="+menusplit[4]+" color="+menusplit[6]+" size="+menusplit[5]+">" menucontent+=urlsplit[0] menucontent+="</font></a></td></tr>" } } } } menucontent+="</table>" if (document.all) { menu.innerHTML=menucontent } if (document.layers) { document.menu.document.write(menucontent) document.menu.document.close() } } // - End of JavaScript - --> </script> <style> A { text-decoration:none; } </style>
Insert into <BODY>
<body onLoad="openandclose(1000)"> <div id="menu" style="position:absolute;top:20px;left:10px"></div>
Other Options