Getting the javascript menu to remember

[dangergeek]

Javascript is my weakness (along with Illustrator: too many buttons!!)

So I have basically found a nice bit of code i have used to make a vertical drop expanding css menu. It looks the business and works really well.

The javascript is nice and simple:

Code: Select all

<script type="text/javascript">
window.onload=menu;
function menu(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
 }
if (d) {d.style.display='block';}
}
</script>

The menu is fairly simple but has lots of different options. The menu is actually twice as big as the code below but i have cut it down to save space here.

Code: Select all

<div id="side_menu">
<dl id="smenu">
  <dt onclick="javascript:menu('smenu1');">RC Kits</dt>
   <dd id="smenu1">
    <ul>
     <li id="rckits"><a href="category_car.php?catId=1&amp;menu=CAR&amp;subMenu=CR-KIT">Electric On-Road</a></li>
     <li><a href="category_car.php?catId=2&amp;menu=CAR&amp;subMenu=CR-KIT">Electric Off-Road</a></li>
     <li><a href="category_car.php?catId=3&amp;menu=CAR&amp;subMenu=CR-KIT">Nitro On-Road</a></li>
     <li><a href="category_car.php?catId=4&amp;menu=CAR&amp;subMenu=CR-KIT">Nitro Off-Road</a></li>
     <li><a href="category_car.php?catId=5&amp;menu=CAR&amp;subMenu=CR-KIT">Petrol / Large Scale</a></li>
     <li><a href="category_car.php?catId=156&amp;menu=CAR&amp;subMenu=CR-KIT">Micro Racers</a></li>
    </ul></dd> 
 
  <dt onclick="javascript:menu('smenu2');">RC Drifting</dt>
   <dd id="smenu2">
    <ul>
     <li><a href="category_car.php?catId=6&amp;menu=CAR&amp;subMenu=CR-DFT">Electric Drift Kits</a></li>
     <li><a href="category_car.php?catId=7&amp;menu=CAR&amp;subMenu=CR-DFT">Drift Body Sets</a></li>
     <li><a href="category_car.php?catId=8&amp;menu=CAR&amp;subMenu=CR-DFT">Lighting Kits</a></li>
     <li><a href="category_car.php?catId=183&amp;menu=CAR&amp;subMenu=CR-DFT">Drift Wheels &amp; Tyres</a></li>
     <li><a href="category_car.php?catId=9&amp;menu=CAR&amp;subMenu=CR-DFT">Drift Accessories</a></li>
    </ul></dd> 
  <dt onclick="javascript:menu('smenu3');">Electric Components</dt>
   <dd id="smenu3">
    <ul>
     <li><a href="category_car.php?catId=10&amp;menu=CAR&amp;subMenu=CR-ELC">Electric Motors</a></li>
     <li><a href="category_car.php?catId=11&amp;menu=CAR&amp;subMenu=CR-ELC">Motor Accessories</a></li>
     <li><a href="category_car.php?catId=157&amp;menu=CAR&amp;subMenu=CR-ELC">Brushless Systems</a></li>
     <li><a href="category_car.php?catId=184&amp;menu=CAR&amp;subMenu=CR-ELC">Brushless Accessories</a></li>
     <li><a href="category_car.php?catId=12&amp;menu=CAR&amp;subMenu=CR-ELC">Speed Controllers</a></li>
     <li><a href="category_car.php?catId=13&amp;menu=CAR&amp;subMenu=CR-ELC">Receivers</a></li>
     <li><a href="category_car.php?catId=14&amp;menu=CAR&amp;subMenu=CR-ELC">Servos</a></li>
     <li><a href="category_car.php?catId=15&amp;menu=CAR&amp;subMenu=CR-ELC">Servo Accessories</a></li>
     <li><a href="category_car.php?catId=16&amp;menu=CAR&amp;subMenu=CR-ELC">Race Cells</a></li>
     <li><a href="category_car.php?catId=17&amp;menu=CAR&amp;subMenu=CR-ELC">Other Batteries</a></li>
     <li><a href="category_car.php?catId=18&amp;menu=CAR&amp;subMenu=CR-ELC">Chargers</a></li>
     <li><a href="category_car.php?catId=19&amp;menu=CAR&amp;subMenu=CR-ELC">Dischargers</a></li>
     <li><a href="category_car.php?catId=20&amp;menu=CAR&amp;subMenu=CR-ELC">Power Supplies</a></li>
     <li><a href="category_car.php?catId=21&amp;menu=CAR&amp;subMenu=CR-ELC">General Accessories</a></li>
    </ul></dd></dl>

Once the user navigates the menu and makes a selection, they are moved to a new page and the menu 'closes' back to its original state.

What i would like to know if there are any seasoned javascripters who can help is:

How can i make the menu they selected stay open on the new page?

Can anyone help, thanks in advance.

[karinne]

That would be quite annoying tho don't you think?

Plus, wouldn't it hide some content?

[pa007]

You could do this with cookies, passing the info from page to page. You'll find lots of info on this knocking around the web. If you get stuck then post again and we'll see if we can help.

Like Karinne said though, make sure this the best thing for the user. A lot of JS is really annoying. Also make sure that it works with JS off.

Pete.