JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


New hierarchical menu		[Tell A Friend]

There are lots of hierarchical menus available. Yet none of them is as easy to configure as this one. Setting up this dynamic cross-browser hierarchical menu will take you less than ten minutes. Check it out now.


Insert into <HEAD>
<script> <!-- Beginning of JavaScript - // CREDITS: // new hierarchical menu 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/13/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 menublock[0]="Arial;"+ // font mainlink "4;"+ // fontsize mainlink "CCCCCC;"+ // fontcolor mainlink "1;"+ // fontweight mainlink, 1 means bold, 0 means normal "Arial;"+ // font sublinks "2;"+ // fontsize sublinks "FFFFFF;"+ // fontcolor sublinks "0;"+ // fontweight sublinks, 1 means bold, 0 means normal "MENU 1\|#\|;"+ // text\|URL\|target of mainlink "submenu 1.1\|subm11.html\|main;"+ // text\|URL\|target of first sublink "submenu 1.2\|subm12.html\|main;" // text\|URL\|target of second sublink menublock[1]="Arial;"+ // font mainlink "4;"+ // fontsize mainlink "CCCCCC;"+ // fontcolor mainlink "1;"+ // fontweight mainlink, 1 means bold, 0 means normal "Arial;"+ // font sublinks "2;"+ // fontsize sublinks "FFFFFF;"+ // fontcolor sublinks "0;"+ // fontweight sublinks, 1 means bold, 0 means normal "MENU 2\|#;"+ // text and URL of first mainlink "submenu 2.1\|subm21.html\|main;"+ // text\|URL\|target of mainlink "submenu 2.2\|subm22.html\|main;"+ // text\|URL\|target of first sublink "submenu 2.3\|subm23.html\|main;"+ // text\|URL\|target of second sublink "submenu 2.4\|subm24.html\|main;"+ // text\|URL\|target of thirth sublink "submenu 2.5\|subm25.html\|main;" // text\|URL\|target of fourth sublink menublock[2]="Arial;"+ // font mainlink "4;"+ // fontsize mainlink "CCCCCC;"+ // fontcolor mainlink "1;"+ // fontweight mainlink, 1 means bold, 0 means normal "Arial;"+ // font sublinks "2;"+ // fontsize sublinks "FFFFFF;"+ // fontcolor sublinks "0;"+ // fontweight sublinks, 1 means bold, 0 means normal "MENU 3\|#;"+ // text and URL of mainlink "submenu 3.1\|subm31.html\|main;"+ // text and URL of first sublink "submenu 3.2\|subm32.html\|main;"+ // text and URL of second sublink "submenu 3.3\|subm33.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 showsubmenus=new Array() for (i=0;i<=menublock.length-1;i++) { showsubmenus[i]=-1 } function openandclose(visi) { showsubmenus[visi]=(-1)*showsubmenus[visi] var menucontent="" 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+=font_weight_main+"<a href='javascript:openandclose("+i+")'><font face="+menusplit[0]+" color="+menusplit[2]+" size="+menusplit[1]+">"+urlsplit[0]+"</font></a><br>" if (showsubmenus[i]==1) { for (ii=9;ii<=menusplit.length-1;ii++) { urlsplit=menusplit[ii].split("\|") menucontent+=font_weight_sub+"   <a href="+urlsplit[1]+" target="+urlsplit[2]+"><font face="+menusplit[4]+" color="+menusplit[6]+" size="+menusplit[5]+">"+urlsplit[0]+"</font></a><br>" } } } if (document.all) { menu.innerHTML=menucontent } if (document.layers) { document.menu.document.write(menucontent) document.menu.document.close() } } // - End of JavaScript - --> </script> <style> A, A:Active,A:Visited { text-decoration:none; } A:Hover { text-decoration:none; background-color:666666; } </style>

Insert into <BODY>
<body bgcolor=#888888 onload="openandclose(10000)"> <div id="menu" style="position:absolute;top:20px;left:30px"> </div>

Other Options