Questions about Javascipt Menu

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 392,007 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,194 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 857 | Replies: 5

•

Join Date: Jan 2006

Posts: 4

Reputation: darkie_99 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

darkie_99

Offline

Newbie Poster

Questions about Javascipt Menu

Sep 20th, 2007

Hi

My skill for javascript is very poor. But, I had a task to do for the project I am currenlty doing.

I first searched you site, and saw some people asking about something similar to what I have. But, I didnt know understand the answers posted since Im not that much of a js guru. I am more in OSS. I am really struggling with this.

Say, I have a 3 Main folders with more than 5 submenu on them. Each time when I click the Main folder 1, it should expand. And when the Main folder 2 is clicked the Main folder 1 should be closed automatically.Same applies for the submenus.

I have managed to get the script to do that, but now the problem is that. Everytime i click the submenu as a link now, the page reloads and the menu closes. But I want it to stay open so that I can see exaclty where I am in terms of navigation.

Here is my code:

Help with Code Tags

(Toggle Plain Text)

var nIndex=0 ;
var aMenu=new Array(); 
var Menu = new Array();
// Pre load images - defined order should stay as is for proper functionality;
if (document.images)
{

imgFolderOpen = new Image(18, 18);
imgFolderOpen.src = "/wmis/images/open1.gif";

imgFolderClosed = new Image(18, 18);
imgFolderClosed.src = "/wmis/images/closed1.gif";

imgPageNode = new Image(18, 18);
imgPageNode.src = "/wmis/images/list.gif";

}
function getMenu(pSection){

switch(getQueryStringValue('menu')){ 
default : 
addMenu(Menu=["L1_Current", "", "", "Current", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L2_Admin", "L1_Current", "", "Admin functions", "", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L3_year", "L1_Current", "L2_Admin", "Capture Year", "capture_year.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
addMenu(Menu=["L3_assignuser", "L1_Current", "L2_Admin", "Assign User", "assignuser.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
addMenu(Menu=["L1_History", "", "", "History", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L2_workplan_h", "L1_History", "", "Workplan", "searchbyyear.php", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L3_SG_h", "L1_History", "L2_workplan_h", "SG Workplan", "sg_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
addMenu(Menu=["L3_PW_h", "L1_History", "L2_workplan_h", "Personal Workplan", "p_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]);

addMenu(Menu=["L1_logout", "", "", "Logout", "logout.php" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);
addMenu(Menu=["L1_help", "", "", "Help", "" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);
break; 
}
}

function getQueryStringValue(pstrWhich){

var strQueryStr = window.location.search.substr(1);
var arrQueryStrI = strQueryStr.split("&");
var arrQueryStrJ;
var arrQueryStrK = new Array();

for(i=0; i < arrQueryStrI.length; i++){
arrQueryStrJ = arrQueryStrI[i].split("=");
if (arrQueryStrJ[0]){
arrQueryStrK[i] = [arrQueryStrJ[0], arrQueryStrJ[1]];
if (arrQueryStrK[i][0] == pstrWhich) {return arrQueryStrK[i][1]}; 
}
}

}



function getLinkandParents(){
var strWindowPathFull = window.location.pathname + window.location.search;
var strMenuPath = "";
var strLinkandParents = "";
strWindowPathFull = strWindowPathFull.toLowerCase();

for (i=0;i<aMenu.length;i++){
strMenuPath = aMenu[i][4].toLowerCase();
if (strWindowPathFull == strMenuPath){
strLinkandParents = aMenu[i][0] + ";" + aMenu[i][1] + ";" + aMenu[i][2];
}
}

return strLinkandParents;
}

function addMenu(pArray){
aMenu[nIndex] = pArray; nIndex++
}

function toggleLevel2(pobjTag) {
var objChild; var objOther; var strWinPath; var strCurrLinkId;
strWinPath = window.location.pathname + window.location.search;
for(i=0;i<aMenu.length;i++){
if (pobjTag.id == aMenu[i][1]){
objChild = document.getElementById(aMenu[i][0]);
if (objChild.style.display == "none"){
if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][4] == strWinPath)) {strCurrLinkId = aMenu[i][0]; }
if ((aMenu[i][2].length == 0) || (aMenu[i][2] == strCurrLinkId)){
objChild.style.display = "block";
}
}
else{
objChild.style.display = "none";
}
}
else{
if (aMenu[i][1].length > 0 && pobjTag.id != aMenu[i][2]) {
sOther = document.getElementById(aMenu[i][0]);
sOther.style.display = "none";
}
}
}
}

function toggleLevel3(pobjTag) {
var objChild; 
for(i=0;i<aMenu.length;i++){
if (pobjTag.id == aMenu[i][2]){
objChild = document.getElementById(aMenu[i][0]);
if (objChild.style.display == "none"){
objChild.style.display = "block";
}
else{
objChild.style.display = "none";
}
}
}
}

function swapImgLevel2(pobjTag, pstrLevelFrom){
if (pstrLevelFrom == "L1"){
var strChildImgId; var objChildImg; var strChildId; var strChildLevel; 
var strWinPath = window.location.pathname + window.location.search;
for (i=0;i<aMenu.length;i++){
strChildLevel = aMenu[i][0].substr(0,2);
strChildImgId = "img" + aMenu[i][0]; 
objChildImg = document.getElementById(strChildImgId);
if ((aMenu[i][1] == pobjTag.id && strChildLevel == "L2" && aMenu[i][4] != strWinPath) && (objChildImg.src != imgPageNode.src)){
objChildImg.src = imgFolderClosed.src;
}
}
}
if (pstrLevelFrom == "L1"){
var strImgId = "img" + pobjTag.id ; var objImg;
objImg = document.getElementById(strImgId);
if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;
else objImg.src = imgFolderClosed.src;
}
if (pstrLevelFrom == "L2"){
var strImgId = "img" + pobjTag.id ; var objImg;
objImg = document.getElementById(strImgId);
if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;
else objImg.src = imgFolderClosed.src;
}
}

function toggleChildren(pobjTag){
var strLevel;
strLevel = pobjTag.id.substr(0,2); 
if (strLevel == "L1"){
swapImgLevel2(pobjTag,"L1");
toggleLevel2(pobjTag);
}
if (strLevel == "L2"){
swapImgLevel2(pobjTag,"L2");
toggleLevel3(pobjTag);
}
}

function onclickMenuItem(pobjTag){
var strMenuItemId = pobjTag.id;
var strMenuItemURL = "";
for (i=0;i<aMenu.length;i++){
if (aMenu[i][0] == strMenuItemId){
strMenuItemURL = aMenu[i][4];
}
}

if (strMenuItemURL.length > 0){
self.location.replace(strMenuItemURL);
}
else{
toggleChildren(pobjTag);
}
}

function buildMenu(pstrSection){
var arrLinkandParents;
var strHome = "default";
var strMenu;
var strLink="";
var strL1Parent="";
var strL2Parent="";
var strWindowPath = window.location.pathname;
strWindowPath = strWindowPath.toLowerCase();
getMenu();
var strLinkandParents = getLinkandParents(pstrSection);

if (strLinkandParents.length > 0) {
arrLinkandParents = strLinkandParents.split(";"); 
var strLink = arrLinkandParents[0]; 
var strL1Parent = arrLinkandParents[1]; 
var strL2Parent = arrLinkandParents[2]; 
}

strMenu = "<DIV id='menudiv'><table border=0>" ;
for (i=0;i<aMenu.length;i++){
strMenu = strMenu + "<tr id='" + aMenu[i][0] 
+ "' onmouseout='style.cursor=\"default\"' ";
if (aMenu[i][0]!= strLink){
strMenu = strMenu + "onclick='JavascriptnclickMenuItem(this);' onmouseover='style.cursor=\"pointer\"' ";
} 
if (aMenu[i][0].substr(0,2) == "L1"){
strMenu = strMenu + " style='display:block' "; 
}
else if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][1] == strL1Parent )){
strMenu = strMenu + " style='display:block' ";
}
else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strLink)){
strMenu = strMenu + " style='display:block' ";
}
else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strL2Parent )){
strMenu = strMenu + " style='display:block' "; 
}
else{
strMenu = strMenu + " style='display:none' "; 
}

strMenu = strMenu + " ><td valign= 'top' align='center' width=50>&nbsp;";

if (aMenu[i][0].substr(0,2) == "L2"){
strMenu = strMenu + "&nbsp;&nbsp;&nbsp;";
}
else if (aMenu[i][0].substr(0,2) == "L3"){
strMenu = strMenu + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
} 

strMenu = strMenu + "<img id='img" + aMenu[i][0] + "' src='" 

if ((aMenu[i][0] == strL2Parent) || ((aMenu[i][0] == strLink) && (aMenu[i][0].substr(0,2) == "L2"))){
strMenu = strMenu + imgFolderOpen.src;
}
else if ((strWindowPath.indexOf(strHome) != -1) && (aMenu[i][0]== strLink)){ 
strMenu = strMenu + imgHomeOff.src;
}
else{
strMenu = strMenu + aMenu[i][5];
} 

strMenu = strMenu + "' width='" + aMenu[i][6] + "' height='" + aMenu[i][7] 
+ "'/></td><td"; 

if (aMenu[i][0].substr(0,2) == "L1"){
strMenu = strMenu + "";
}
else if (aMenu[i][0].substr(0,2) == "L2"){
strMenu = strMenu + ""; 
}
else if (aMenu[i][0].substr(0,2) == "L3"){
strMenu = strMenu + ""; 
}

strMenu = strMenu + ">";

if ((aMenu[i][4].length > 0) && (aMenu[i][0]!= strLink) && (aMenu[i][0].substr(0,2) == "L3")){ 
strMenu = strMenu + "<a class='links' href='" + aMenu[i][4] + "'>" + aMenu[i][3] + "</a>";
} 
else if (aMenu[i][0]== strLink){
strMenu = strMenu +aMenu[i][3];
}
else{ 
strMenu = strMenu + "<b>" +aMenu[i][3] + "</b>";
}

strMenu = strMenu + "</td></tr>"; 
} 

strMenu = strMenu + "</table></div>"; 
document.write(strMenu);
}

var nIndex=0 ;
var aMenu=new Array(); 
var Menu = new Array();
// Pre load images - defined order should stay as is for proper functionality;
if (document.images)
{

imgFolderOpen = new Image(18, 18);
imgFolderOpen.src = "/wmis/images/open1.gif";

imgFolderClosed = new Image(18, 18);
imgFolderClosed.src = "/wmis/images/closed1.gif";

imgPageNode = new Image(18, 18);
imgPageNode.src = "/wmis/images/list.gif";

}
function getMenu(pSection){

switch(getQueryStringValue('menu')){ 
default : 
addMenu(Menu=["L1_Current", "", "", "Current", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L2_Admin", "L1_Current", "", "Admin functions", "", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L3_year", "L1_Current", "L2_Admin", "Capture Year", "capture_year.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
addMenu(Menu=["L3_assignuser", "L1_Current", "L2_Admin", "Assign User", "assignuser.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
addMenu(Menu=["L1_History", "", "", "History", "" ,imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L2_workplan_h", "L1_History", "", "Workplan", "searchbyyear.php", imgFolderClosed.src, imgFolderClosed.width, imgFolderClosed.height]);
addMenu(Menu=["L3_SG_h", "L1_History", "L2_workplan_h", "SG Workplan", "sg_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]); 
addMenu(Menu=["L3_PW_h", "L1_History", "L2_workplan_h", "Personal Workplan", "p_workplan_h.php", imgPageNode.src, imgPageNode.width, imgPageNode.height]);

addMenu(Menu=["L1_logout", "", "", "Logout", "logout.php" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);
addMenu(Menu=["L1_help", "", "", "Help", "" ,imgPageNode.src, imgPageNode.width, imgPageNode.height]);
break; 
}
}

function getQueryStringValue(pstrWhich){

var strQueryStr = window.location.search.substr(1);
var arrQueryStrI = strQueryStr.split("&");
var arrQueryStrJ;
var arrQueryStrK = new Array();

for(i=0; i < arrQueryStrI.length; i++){
arrQueryStrJ = arrQueryStrI[i].split("=");
if (arrQueryStrJ[0]){
arrQueryStrK[i] = [arrQueryStrJ[0], arrQueryStrJ[1]];
if (arrQueryStrK[i][0] == pstrWhich) {return arrQueryStrK[i][1]}; 
}
}

}



function getLinkandParents(){
var strWindowPathFull = window.location.pathname + window.location.search;
var strMenuPath = "";
var strLinkandParents = "";
strWindowPathFull = strWindowPathFull.toLowerCase();

for (i=0;i<aMenu.length;i++){
strMenuPath = aMenu[i][4].toLowerCase();
if (strWindowPathFull == strMenuPath){
strLinkandParents = aMenu[i][0] + ";" + aMenu[i][1] + ";" + aMenu[i][2];
}
}

return strLinkandParents;
}

function addMenu(pArray){
aMenu[nIndex] = pArray; nIndex++
}

function toggleLevel2(pobjTag) {
var objChild; var objOther; var strWinPath; var strCurrLinkId;
strWinPath = window.location.pathname + window.location.search;
for(i=0;i<aMenu.length;i++){
if (pobjTag.id == aMenu[i][1]){
objChild = document.getElementById(aMenu[i][0]);
if (objChild.style.display == "none"){
if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][4] == strWinPath)) {strCurrLinkId = aMenu[i][0]; }
if ((aMenu[i][2].length == 0) || (aMenu[i][2] == strCurrLinkId)){
objChild.style.display = "block";
}
}
else{
objChild.style.display = "none";
}
}
else{
if (aMenu[i][1].length > 0 && pobjTag.id != aMenu[i][2]) {
sOther = document.getElementById(aMenu[i][0]);
sOther.style.display = "none";
}
}
}
}

function toggleLevel3(pobjTag) {
var objChild; 
for(i=0;i<aMenu.length;i++){
if (pobjTag.id == aMenu[i][2]){
objChild = document.getElementById(aMenu[i][0]);
if (objChild.style.display == "none"){
objChild.style.display = "block";
}
else{
objChild.style.display = "none";
}
}
}
}

function swapImgLevel2(pobjTag, pstrLevelFrom){
if (pstrLevelFrom == "L1"){
var strChildImgId; var objChildImg; var strChildId; var strChildLevel; 
var strWinPath = window.location.pathname + window.location.search;
for (i=0;i<aMenu.length;i++){
strChildLevel = aMenu[i][0].substr(0,2);
strChildImgId = "img" + aMenu[i][0]; 
objChildImg = document.getElementById(strChildImgId);
if ((aMenu[i][1] == pobjTag.id && strChildLevel == "L2" && aMenu[i][4] != strWinPath) && (objChildImg.src != imgPageNode.src)){
objChildImg.src = imgFolderClosed.src;
}
}
}
if (pstrLevelFrom == "L1"){
var strImgId = "img" + pobjTag.id ; var objImg;
objImg = document.getElementById(strImgId);
if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;
else objImg.src = imgFolderClosed.src;
}
if (pstrLevelFrom == "L2"){
var strImgId = "img" + pobjTag.id ; var objImg;
objImg = document.getElementById(strImgId);
if (objImg.src == imgFolderClosed.src) objImg.src = imgFolderOpen.src;
else objImg.src = imgFolderClosed.src;
}
}

function toggleChildren(pobjTag){
var strLevel;
strLevel = pobjTag.id.substr(0,2); 
if (strLevel == "L1"){
swapImgLevel2(pobjTag,"L1");
toggleLevel2(pobjTag);
}
if (strLevel == "L2"){
swapImgLevel2(pobjTag,"L2");
toggleLevel3(pobjTag);
}
}

function onclickMenuItem(pobjTag){
var strMenuItemId = pobjTag.id;
var strMenuItemURL = "";
for (i=0;i<aMenu.length;i++){
if (aMenu[i][0] == strMenuItemId){
strMenuItemURL = aMenu[i][4];
}
}

if (strMenuItemURL.length > 0){
self.location.replace(strMenuItemURL);
}
else{
toggleChildren(pobjTag);
}
}

function buildMenu(pstrSection){
var arrLinkandParents;
var strHome = "default";
var strMenu;
var strLink="";
var strL1Parent="";
var strL2Parent="";
var strWindowPath = window.location.pathname;
strWindowPath = strWindowPath.toLowerCase();
getMenu();
var strLinkandParents = getLinkandParents(pstrSection);

if (strLinkandParents.length > 0) {
arrLinkandParents = strLinkandParents.split(";"); 
var strLink = arrLinkandParents[0]; 
var strL1Parent = arrLinkandParents[1]; 
var strL2Parent = arrLinkandParents[2]; 
}

strMenu = "<DIV id='menudiv'><table border=0>" ;
for (i=0;i<aMenu.length;i++){
strMenu = strMenu + "<tr id='" + aMenu[i][0] 
+ "' onmouseout='style.cursor=\"default\"' ";
if (aMenu[i][0]!= strLink){
strMenu = strMenu + "onclick='JavascriptnclickMenuItem(this);' onmouseover='style.cursor=\"pointer\"' ";
} 
if (aMenu[i][0].substr(0,2) == "L1"){
strMenu = strMenu + " style='display:block' "; 
}
else if ((aMenu[i][0].substr(0,2) == "L2") && (aMenu[i][1] == strL1Parent )){
strMenu = strMenu + " style='display:block' ";
}
else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strLink)){
strMenu = strMenu + " style='display:block' ";
}
else if ((aMenu[i][0].substr(0,2) == "L3") && (aMenu[i][2] == strL2Parent )){
strMenu = strMenu + " style='display:block' "; 
}
else{
strMenu = strMenu + " style='display:none' "; 
}

strMenu = strMenu + " ><td valign= 'top' align='center' width=50>&nbsp;";

if (aMenu[i][0].substr(0,2) == "L2"){
strMenu = strMenu + "&nbsp;&nbsp;&nbsp;";
}
else if (aMenu[i][0].substr(0,2) == "L3"){
strMenu = strMenu + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
} 

strMenu = strMenu + "<img id='img" + aMenu[i][0] + "' src='" 

if ((aMenu[i][0] == strL2Parent) || ((aMenu[i][0] == strLink) && (aMenu[i][0].substr(0,2) == "L2"))){
strMenu = strMenu + imgFolderOpen.src;
}
else if ((strWindowPath.indexOf(strHome) != -1) && (aMenu[i][0]== strLink)){ 
strMenu = strMenu + imgHomeOff.src;
}
else{
strMenu = strMenu + aMenu[i][5];
} 

strMenu = strMenu + "' width='" + aMenu[i][6] + "' height='" + aMenu[i][7] 
+ "'/></td><td"; 

if (aMenu[i][0].substr(0,2) == "L1"){
strMenu = strMenu + "";
}
else if (aMenu[i][0].substr(0,2) == "L2"){
strMenu = strMenu + ""; 
}
else if (aMenu[i][0].substr(0,2) == "L3"){
strMenu = strMenu + ""; 
}

strMenu = strMenu + ">";

if ((aMenu[i][4].length > 0) && (aMenu[i][0]!= strLink) && (aMenu[i][0].substr(0,2) == "L3")){ 
strMenu = strMenu + "<a class='links' href='" + aMenu[i][4] + "'>" + aMenu[i][3] + "</a>";
} 
else if (aMenu[i][0]== strLink){
strMenu = strMenu +aMenu[i][3];
}
else{ 
strMenu = strMenu + "<b>" +aMenu[i][3] + "</b>";
}

strMenu = strMenu + "</td></tr>"; 
} 

strMenu = strMenu + "</table></div>"; 
document.write(strMenu);
}

My pages are devided into sections. The below makes the page. index.php
<?php include('inc_top.php'); ?>
<?php include('inc_bottom.php'); ?>

Can somebody ps help me on this...

Thank you
Darkie

•

Join Date: May 2005

Location: Wellington, New Zealand

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Rep Power: 4

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Questions about Javascipt Menu

Sep 20th, 2007

Hi, you want the user to go to the page they select right?

When the user goes to the next page, your page is reloaded, there are only 3 solutions I can think of for your problem. And this is a design problem, not a Javascript problem as such.

1. Record the navigation path - If it is just keeping menus open, then you could use a PHP routine to display the page and the parent pages. Or you could use breadcrumbs (which record the path).
2. Pass the menu options through as a parameter (either as variables drawn by PHP or variables extracted by Javascript... doing it with PHP is tidier). Then the Javascript will know which menu to open.
3. Don't reload the page at all, use AJAX and DHTML to draw the contents of the page in a div element on your page - then your complete page won't be reloaded.

The last solution assumes all your users can use AJAX, but if your menu is using JavaScript then you are already assuming modern browsers, or are already considering how to allow older clients access to your site.

Cheers,
Alpha

alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur

•

Join Date: Jan 2006

Posts: 4

Reputation: darkie_99 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

darkie_99

Offline

Newbie Poster

Re: Questions about Javascipt Menu

Sep 21st, 2007

Hi alpha_foobar

Thank you very much for your advise. I thank you for your time & efforts to provide a solution to my problem.

I will redesign my pages and see if this will work.

Thanks you :-)
Darkie

•

Join Date: Jan 2006

Posts: 4

Reputation: darkie_99 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

darkie_99

Offline

Newbie Poster

Re: Questions about Javascipt Menu

Sep 21st, 2007

•

Originally Posted by alpha_foobar

Hi, you want the user to go to the page they select right?

When the user goes to the next page, your page is reloaded, there are only 3 solutions I can think of for your problem. And this is a design problem, not a Javascript problem as such.

1. Record the navigation path - If it is just keeping menus open, then you could use a PHP routine to display the page and the parent pages. Or you could use breadcrumbs (which record the path).
2. Pass the menu options through as a parameter (either as variables drawn by PHP or variables extracted by Javascript... doing it with PHP is tidier). Then the Javascript will know which menu to open.
3. Don't reload the page at all, use AJAX and DHTML to draw the contents of the page in a div element on your page - then your complete page won't be reloaded.

The last solution assumes all your users can use AJAX, but if your menu is using JavaScript then you are already assuming modern browsers, or are already considering how to allow older clients access to your site.

Cheers,
Alpha

Can you please make me an example of the below point?
[QUOTE}
2. Pass the menu options through as a parameter (either as variables drawn by PHP or variables extracted by Javascript... doing it with PHP is tidier). Then the Javascript will know which menu to open.

[/quote]
Im still confused here...

•

Join Date: May 2005

Location: Wellington, New Zealand

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Rep Power: 4

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Questions about Javascipt Menu

Sep 22nd, 2007

Hi,
You could either add the parameters you want to post in the URL, like for this page: newreply.php?do=newreply&noquote=1&p=438334

Notice that the page has a ? and then a couple of parameters in the form name=value, they are terminated with the & character.

Thats one way to pass parameters that you can extract in your PHP page. Another way is to create a form and use the link to send the form, but thats more complicated.

Cheers,
Alpha

alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur