1
zzzzsg
Javascript collapsible menu in Custom block
  • 2009/5/27 0:01

  • zzzzsg

  • Just popping in

  • Posts: 86

  • Since: 2005/12/22


I plugged this Javascript collapsible script by Kyle Edwards from http://www.java-scripts.net/javascrip ... apsible-Menu-Script.phtml to my custom block.
It works fine, but there is one problem.

After I click on one of the expanded menu items and get redirected to the link in the menu item, the parent menu will collapse (close). This is expected since XOOPS will reload to go to the XOOPS link in the menu item.

Question - how to create collapsible menu item in custom block which will not collapse when a expanded item is clicked?
For example
Parent Menu1
-> Child menu1 (goes to XOOPS page 1)
-> Child menu2 (goes to XOOPS page 2)
-> Child menu3 (goes to XOOPS page 3)
At first, Parent Menu1 link in the custom block is collapsed, i.e. Child menu1, Child menu2 and Child menu3 are not displayed.
Clicking on Parent Menu1 will cause it to expand, i.e., Child menu1, Child menu2 and Child menu3 will be displayed.
Clicking Child menu1 will cause the XOOPS page 1 to be displayed. But the Parent Menu1 should stay expanded, displaying all the child menus. Currently, my script will not let Parent Menu1 to stay expanded when a child link is clicked. This is expected since the Javascript has no memory (no cookies implemented here).

Is there a way to do this without cookies?
Use AJAX?

Previously, I used PHP in the custom block to display the child menus when the parent menu is clicked by checking the url. ( Okay I am now able to do this using PHP in custom block -- but it requires adding a querystring to the url for the toggling).

Is there any way to do this using Javascript (and without using cookies or adding a querystring)?

Thank you.






<code>

<table cellspacing="0">



<tr>
<td id="mainmenu">

<tr>
<td id="mainmenu">
<a href="#" onclick="collapse_menu('projectsm1', 0, 0); return false">Repositories</a>
<span id="projectsm1"></span>

</td>
</tr>


</table>

<script language="javascript">
//Collapsible Menu Script.
//Created by Kyle Edwards.
//Please keep this notice intact.

//This defines the arrays that contain info about the menus. Do NOT edit.
var on_off=new Array();
var menu_code=new Array();

//Below, define number_of_menus. It should be equal to the number of menus you have.
number_of_menus=2;

//Here we define the code for the menus. Inside the quotation marks, type in the value of each option.
//Note: After each option, you need to put a <br> tag.
//Note: If you want to indent the options, type &nbsp; for each space of indentation.
//and a </blockquote> tag at the end.
//Example: "&nbsp;&nbsp;Option 1<br>&nbsp;&nbsp;Option 2<br>"
//This puts two spaces at the beginning of each option.

menu_code[0]="<a class='menuSub' href=\"/fxscripts/pubrepo.php\" onclick=\"collapse_menu(\'projectsm1\', 0,-1); return true\">List All Repositories</a>";

menu_code[0]+="<a class='menuSub' href='/fxscripts/websvn1.php'>PA</a>";



menu_code[1]="Option 1<br>Option 2<br>Option 3<br>";

//Everything below this notice is the code that expands and collapses the menus. Do NOT edit.
for (loop=0; loop<number_of_menus; loop++){
on_off[loop]=0;
}

function collapse_menu(menu_id, menu_number, toggle1){


if ( toggle1==-1)
{ on_off[menu_number]=0;

alert( 'xxx toggle1 = ' + toggle1 );
}

if (on_off[menu_number]==0){
// menu_id.innerHTML=menu_code[menu_number];
document.getElementById(menu_id).innerHTML=menu_code[menu_number];

// alert( ' 111 ' );
// alert( menu_id );
// alert( menu_id.innerHTML );
on_off[menu_number]=1;
}else{
// alert( '222') ;
// menu_id.innerHTML="";
document.getElementById(menu_id).innerHTML="";

on_off[menu_number]=0;
}
}
</script>

</code>



2
zzzzsg
Re: Javascript collapsible menu in Custom block
  • 2009/6/8 17:41

  • zzzzsg

  • Just popping in

  • Posts: 86

  • Since: 2005/12/22


ok i am able to do this using jquery.

Login

Who's Online

68 user(s) are online (40 user(s) are browsing Support Forums)


Members: 0


Guests: 68


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Aug 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits