Code Examples -> Simple HTML Javascript Menu

	Join us on FaceBook
	Submit Your Code
	Poker Tournaments
	Poker Guide for Developers
	SEO Monitor
	UpTime Monitor
	My Favorite Examples
	My Favorite Articles
	Update Your Profile

More Weber Sites
	PHP Code Search
	Web Development Forums
	Learn MySQL Playing Trivia
	PHPBB2 Templates
	Web Development Resources
	Web Development Content
	Internet Security Software

Recommended Links
	PHPClasses
	PHP Editor
	PHP Jobs
	Vision.To Design
	Ajax Tutorials
	PHP Programming Help
	PHP/MySQL Programming
	Webmaster Resources
	Webmaster Forum
	XML meta language
	website builder

Recommended
	פרייסז - הכח לקנות עובר לידיים שלך
	Texas Holdem Poker Evangelists


BACK		ADD A COMMENT		SEND TO A FRIEND		ADD TO MY FAVORITES		ADD CODE EXAMPLES		PRINT

PHP Code Examples

Title :	Simple HTML Javascript Menu
Categories :	HTML, Java Script	Boaz Yahav
Date :	Aug 30th 2006
Grade :	3 of 5 (graded 5 times)
Viewed :	15514
File :	4491.zip
Images :	Image 1 , Image 2 , Image 3

Search :	More code by Boaz Yahav
Action :	Grade This Code Example
Tools :	My Examples List

Code

This is a simple HTML / JS menu that has two levels. It's pretty easy to use and the attached Zip file contains all of the files you need and an example.

Works well with IE and FF.

Menu.js

var sOpenDivLocation;
var iOpenDivOpenedParent;
try
{
sOpenDivLocation=location.toString().split("?")[1];
sOpenDivLocation=sOpenDivLocation.toString().split("OpenDivSelected=")[1];
iOpenDivOpenedParent= sOpenDivLocation.toString().split("&")[0];
}catch(e){}

function OpenDivUrl(sLink,iRootID)
{
var sLinkUrl = 'OpenDivSelected=' + iRootID ;
if (sLink.indexOf(location.hostname)<0 && sLink.indexOf("http://")>=0)
location = sLink;
else if (sLink.indexOf("?")>0)
location = sLink + '&' + sLinkUrl ;
else
location = sLink + '?' + sLinkUrl ;
return true;

}

function OpenDivUrlGetSelected(sLink,iParent)
{
var sLinkUrl = 'OpenDivSelected='+iParent;
if (sLink.indexOf("?")>0)
return sLink + '&' + sLinkUrl ;
else
return sLink + '?' + sLinkUrl ;
}

function OpenDiv(arrMen,sHirarchy,sMenuName,iLevel)
{
var str=new String(sHirarchy.substring(sMenuName.length,sHirarchy.length));
var arr=new Array();
arr=str.split("_");
str="";
var sDivParent=sMenuName;
var sArrParent="arrMen";
var iNot;

for (var i=0;i<arr.length ;i++)
{
str+="["+arr[i]+"]";
if (i<arr.length-1)
{
sDivParent+=arr[i]+"_";
sArrParent+="["+arr[i]+"]";
}else
iNot=arr[i];
}
for (i=0;i<eval(sArrParent).length;i++)
if(iNot!=i)
for (var t=0;t<eval(sArrParent+"["+i+"]").length;t++)
eval(sDivParent+i+"_"+t).style.display='none';

for (i=0;i<eval('arrMen'+str).length;i++)
{
obj=eval(sHirarchy+"_"+i+'.style');

if (obj.display=='none') obj.display=''; else obj.display='none';
}

}

function GetRootParent(sHirarchy)
{
var s=new String(sHirarchy);
return s.split("_")[0] ;
}

var iMenuNo=0;

function CollapseMenu(arr)
{
//this.MenuID=iMenuNo;
function MenuLevel(sHirarchy)
{
var s=new String(sHirarchy);
return s.split("_").length ;
}

function listArr(arr,sHirarchy)
{

var sRealHirarchy=new String();
var iLevel;

for (var i=0;i<arr.length;i++)
{

sRealHirarchy=sHirarchy+"_"+i;
sRealHirarchy=sRealHirarchy.substring(2,sRealHirarchy.length );

var bOpened=('0_' + iOpenDivOpenedParent==sHirarchy) ;

iLevel=MenuLevel(sRealHirarchy);
document.write("<div id="+sMenuName+sRealHirarchy+" style='display:");

if ( iLevel<=1 ||
/*!!arr[i]["Opened Item"] ||*/
bOpened
)
{
document.write ("");
}else{
document.write ("none");
}

document.write("'>");

Pattern(arr[i], sRealHirarchy, sMenuName, iLevel);

listArr(arr[i], sHirarchy + "_" + i);

document.write("</div>");
}
}
iMenuNo++;
var sMenuName="Menu"+iMenuNo+"Navigator";
listArr(arr,"0");
}

Example Usage (Menu.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<STYLE>
.WhiteLink{COLOR: #FFFFFF;FONT-FAMILY: arial,verdana,helvetica,sans-serif;FONT-SIZE: 12px;FONT-WEIGHT: normal;TEXT-DECORATION: none;}
</STYLE>
</HEAD>
<BODY>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="Menu.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" type="text/JavaScript">
function Pattern(arr,sHirarchy,sMenuName,iLevel)
{
document.writeln("<table width='160' border='0' cellpadding='2' cellspacing='0'>");
document.writeln("<tr>");

var sBGCOLOR;
if (iLevel==1) sBGCOLOR="#115B99"; else sBGCOLOR="#FFB34A";
document.write("<td rowspan='2' bgcolor='"+sBGCOLOR+"'><img src='pixel.gif' width='7'/>");
document.write("</td>");

if (iLevel==1){
document.write("<td bgcolor='"+sBGCOLOR+"' /><img src='open.gif'>");
document.write("</td>");
}else{
document.write("<td bgcolor='"+sBGCOLOR+"' /><img src='close.gif'>");
document.write("</td>");}

//***CenterStart***
document.writeln("<td bgcolor='"+sBGCOLOR+"' width='100%' style='padding-right:5px;'>");
for (var t=1;t>iLevel;t++)
document.write(" ");

if (arr["Url"]!='') {
document.write("<a class='WhiteLink' href='javascript:" + 'OpenDivUrl( "'+ arr["Url"] + '", ' + GetRootParent(sHirarchy) + ' )' + "' title='" + arr["Alt"] + "'>");
}else if(arr["Click"]=='') {
document.write("<a class='WhiteLink' title='" + arr["Alt"] + "' href=javascript:OpenDiv(arrMenu,'"+sMenuName+sHirarchy+"','"+sMenuName+"',"+iLevel+")>");
}else{
document.write("<a class='WhiteLink' onClick='"+arr["Click"]+"' title='" + arr["Alt"] + "' href=javascript:OpenDiv(arrMenu,'"+sMenuName+sHirarchy+"','"+sMenuName+"',"+iLevel+")>");
}
document.write(arr["Title"]+" <br>");
document.write("</a>");
document.writeln();
document.writeln("</td>");
//***CenterEnd***

document.write("<td rowspan='2' bgcolor='"+sBGCOLOR+"'><img src='pixel.gif' width='7'/>");
document.write("</td>");

document.writeln("</tr>");
document.writeln("<tr>");
document.writeln("<td colspan='2' bgcolor='"+sBGCOLOR+"' background=h.gif>");
document.writeln("</td>");
document.writeln("</tr>");
document.writeln("</table>");
}
var arrMenu=new Array();
var iParent;

iParent=0;
arrMenu[iParent]=new Array();
arrMenu[iParent]["Title"]="Weber Sites";
arrMenu[iParent]["Url"]="";
arrMenu[iParent]["Class"]="";
arrMenu[iParent]["PicUrl"]="";
arrMenu[iParent]["Alt"]="";
arrMenu[iParent]["Click"]="";

arrMenu[iParent][0]=new Array();
arrMenu[iParent][0]["Title"]="WeberDev";
arrMenu[iParent][0]["Url"]="http://www.weberdev.com";
arrMenu[iParent][0]["Class"]="";
arrMenu[iParent][0]["PicUrl"]="";
arrMenu[iParent][0]["Alt"]="WeberDev";
arrMenu[iParent][0]["Click"]="";

arrMenu[iParent][1]=new Array();
arrMenu[iParent][1]["Title"]="WeberForums";
arrMenu[iParent][1]["Url"]="http://www.weberforums.com";
arrMenu[iParent][1]["Class"]="";
arrMenu[iParent][1]["PicUrl"]="";
arrMenu[iParent][1]["Alt"]="WeberForums";
arrMenu[iParent][1]["Click"]="";

arrMenu[iParent][2]=new Array();
arrMenu[iParent][2]["Title"]="WeberTrivia";
arrMenu[iParent][2]["Url"]="http://www.webertrivia.com";
arrMenu[iParent][2]["Class"]="";
arrMenu[iParent][2]["PicUrl"]="";
arrMenu[iParent][2]["Alt"]="WeberTrivia";
arrMenu[iParent][2]["Click"]="";

iParent=1;
arrMenu[iParent]=new Array();
arrMenu[iParent]["Title"]="RSS Feeds";
arrMenu[iParent]["Url"]="";
arrMenu[iParent]["Class"]="";
arrMenu[iParent]["PicUrl"]="";
arrMenu[iParent]["Alt"]="";
arrMenu[iParent]["Click"]="";

arrMenu[iParent][0]=new Array();
arrMenu[iParent][0]["Title"]="The best PHP Code Examples";
arrMenu[iParent][0]["Url"]="http://www.weberdev.com/RSS/LatestExamples.xml";
arrMenu[iParent][0]["Class"]="";
arrMenu[iParent][0]["PicUrl"]="";
arrMenu[iParent][0]["Alt"]="The best PHP Code Examples";
arrMenu[iParent][0]["Click"]="";

arrMenu[iParent][1]=new Array();
arrMenu[iParent][1]["Title"]="Great PHP Articles and Tutorials";
arrMenu[iParent][1]["Url"]="http://www.weberdev.com/RSS/LatestArticles.xml";
arrMenu[iParent][1]["Class"]="";
arrMenu[iParent][1]["PicUrl"]="";
arrMenu[iParent][1]["Alt"]="Great PHP Articles and Tutorials";
arrMenu[iParent][1]["Click"]="";

var tmp=new CollapseMenu(arrMenu);
</script>

</BODY>
</HTML>

Related Code Examples

	How to get the Focus (Cursor) into a Form-Element. Categories : HTML, Java Script
	Javascript Color Picker Categories : Java Script, Colors, HTML
	Unobtrusive javascript for maintaining scrollable layer state Categories : DHTML, Java Script, HTML
	Cool tool tip Categories : Java Script, HTML, Web Design
	Java Script Based Navigation Categories : HTML, Java Script, Navigation
	Check if Javascript is Enabled or Disabled - Works in all Browsers Categories : Java Script, HTML, Web Browsers
	Show or Hide your Content using Javascript Categories : Java Script, HTML, CSS, Beginner Guides
	Higly Customizable Javascript Calendar Script Categories : Java Script, Calendar, Date Time, HTML, CSS
	Prevent Right Mouse steal your graphics Categories : HTML, Java Script, Security
	showing Help (assistance) to the user while filling html forms. Categories : HTML, Java Script, Form Processing
	Enchancing dd/mm/yyyy forms with unobtrusive javascript Categories : Java Script, HTML, User Interface, Date Time
	Conditional Check - a script that allows a user to submit a form only if the user check a checkbox. Categories : HTML, Java Script, Form Processing, Beginner Guides
	Table editable dynamic form with edit + selection (select / option) + checkbox. Categories : Java Script, DHTML, User Interface, CSS, HTML
	How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page? Categories : Java Script, HTML
	Mordern Peroidic Table - Science Categories : Java Script, HTML, Charts and Graphs