toggle menu with state?

[krimgelas]

Hello,

I am using the technique explained in Negrino & Smith "Javascript for the
World Wide Web" to make a sliding menu. The example they give can be found
on their companion website:

http://www.javascriptworld.com/js4e/scripts/chap13/script02.html

In my own case each submenu has links, not just text as in the example. My
website is written in PHP and the content is loaded dynamically depending
on some variables contained in the links. For example, the menu would look
like:

Gallery
|_ Category 1
|_ Category 2
|_ Category 3


When I click on a link in a submenu, the page is reloaded with different
variables defining the content: e.g.

http://index.php?option=view&view=gallery&category=1

The problem I am facing now is that each time the page gets reloaded to put
the requested content, the menu collapses, so the subcategories disappear
and you have to click on the main menu item again to make the subitems
appear.

How can I modify the example so that the submenu keeps expanded every time
that a submenu item has been selected?

Thanks very much for any help provided.

Regards,
Kris

but

 

[Danny]

Instead, preload your subcategories items and use js for the menus
and PHP only when the data to be fetched is really needed from the
server or is a lot like a blog subset. Check in google for
"javascript collapsing menus", there are some premade ones, could
check at http://www.javascriptkit.com/cutpastejava.shtml as well.

Danny

 

[krimgelas]

Instead, preload your subcategories items and use js for the menus
and PHP only when the data to be fetched is really needed from the
server or is a lot like a blog subset. Check in google for
"javascript collapsing menus", there are some premade ones, could
check at http://www.javascriptkit.com/cutpastejava.shtml as well.

Danny

Thanks for the reply. I thought this would be a newbie question, but it
looks like a lot of people have already been struggling with this. Haven't
found a simple and elegant solution yet ...

Kris

 

[Riccardo from Castle]

Thanks for the reply. I thought this would be a newbie question, but it
looks like a lot of people have already been struggling with this. Haven't
found a simple and elegant solution yet ...

Kris

For what I can see from the example you posted and the explanation given, I
think what you're looking for is a cookie, to keep track of the open
submenu.

And I dare say the code in that page looks a little *ahem*... outdated (But
I'm in a hurry now, no time to go through it!).

HTH

 

[krimgelas]

For what I can see from the example you posted and the explanation given,
I think what you're looking for is a cookie, to keep track of the open
submenu.

And I dare say the code in that page looks a little *ahem*... outdated
(But I'm in a hurry now, no time to go through it!).

HTH

I was hoping that I could do it without a cookie (b/c then I also have to
assume that cookies are on) by passing a variable to the script through the
URL, like http://index.php?...&open=true or something like that. I
suppose that amounts to the same thing. I am stuck on the part where the
menu expands based on the value of a variable on page load, b/c right now
the function only responds to an onClick event.

So I have something like this, but don't know what to do with the variable
"open" in the javascript function.


function toggleMenu(currMenu,open) {

if (document.getElementById) {

thisMenu = document.getElementById(currMenu).style

if (thisMenu.display == "block") {

thisMenu.display = "none";

} else {

thisMenu.display = "block";
}

return false

} else {

return true
}
}

<a href="index.php" onClick="return toggleMenu('menu1')">Gallery</a>

<span id="menu1">
<a href="index.php?category=1&amp;open=1>Category1</a>
<a href="index.php?category=2&amp;open=1>Category2</a>
<a href="index.php?category=3&amp;open=1>Category3</a>
</span>

Kris

 

[Riccardo from Castle]

I was hoping that I could do it without a cookie (b/c then I also have to
assume that cookies are on) by passing a variable to the script through the
URL, like http://index.php?...&amp;open=true or something like that. I
suppose that amounts to the same thing.

Yes, the idea behind is the same.

I am stuck on the part where the
menu expands based on the value of a variable on page load, b/c right now
the function only responds to an onClick event.

So I have something like this, but don't know what to do with the variable
"open" in the javascript function.

Ok, here is a working draft based on the code you provided.
You may want to modify it according to your needs.
Especially accordingly to the php querystring you're going to use: the init
function, as is, works only if you have no more than 9 categories.

Attach the init function to an onload event:

function init() {
if (!document.getElementById) return;
var i = location.search.indexOf("open=");
if (i != -1) {
var value = location.search.charAt(i+5);
toggleMenu('menu'+value);
}
}


function toggleMenu(currMenu) {
if (document.getElementById) {
thisMenu = document.getElementById(currMenu).style;
thisMenu.display = (thisMenu.display == "block") ? "none" : "block";
}
return false;
}

function toggleMenu(currMenu,open) {
[snip]

}

<a href="index.php" onClick="return toggleMenu('menu1')">Gallery</a>

<span id="menu1">

 

[Riccardo from Castle]

^^^^^^^^^^^^^^^^^ The use of a <list> would be better. Add
style="display:none" if you want toggleMenu to work.

Ok. Actually this brings to an accessibility issue. If JavaScript is
disabled the submenu cannot open. Better if you check if javascript is
enabled, then close the submenus dinamically.