Nested ul menu - pass variables between windows?

nested ul menu - pass variables between windows?

Hi all

I have a simple ul menu with nested ul menus here

http://www.ttmt.org.uk/forum/reload/

When the page loads the nested menus are hidden.

When the parent links are clicked I want them the nested ul to slidedown
and show the menu.

The first link ‘One’ is connected to another page, when it’s clicked I want it’s nested
menu to appear when the new page loads.

I’m thinking the only way to do this is pass a variable to the new page so it’s knows which nested menu to open.

Is this the bested way to do this or is there a better way.

How can I pass a variable to the new page to open the nested menu.


<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

  <style type="text/css">
    #nav{
      margin:50px;
      width:200px;
    }
    #nav li a{
      background:#aaa;
      display:block;
      padding:5px;
      margin:0 0 2px 0;
      text-decoration:none;
    }
    #nav ul li a{
      background:red;
      color:white;
      display:block;
      padding:5px;
      margin:0 0 2px 5px;
    }
    h1{
      margin:50px;
      font:bold 1.5em sans-serif;
    }
  </style>

  </head>

<body>

  <h1>Home</h1>

  <ul id="nav">
    <li><a href="one.html">One</a>
      <ul class="children">
      	<li><a href="one.html">One/One</a></li>
      	<li><a href="#">One/Two</a></li>
      	<li><a href="#">One/Three</a></li>
      </ul>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a>
      <ul class="children">
  	    <li><a href="#">Three/One</a></li>
  	    <li><a href="#">Three/Two</a></li>
      </ul>
    </li>
  </ul>

  <script type="text/javascript">

      $('#nav li ul').slideUp();

      $('#nav > li > a').click(function(){

        if ($(this).attr('class') != 'active'){
          $(this).next().slideToggle();
          $('#nav li a').removeClass('active');
          $(this).addClass('active');
        }
      });

    </script>

</body>

</html>


Normally a page is capable of specifying which menu item is relates to, without needing to edit the menu at all.

I’m not extremely verbose in JS but I would pass the variable/flag with PHP using a simple $_GET and code the variables/flags you want sent to the other window into the link itself.

something like this:


<ul class="children>
  <li><a href="one.php?flag=clicked"></a></li>

then on ‘one.php’


<?php
$someData = $_GET['flag'];
?>

From what you have posted this should work with the JQ you posted though you may need to modify it a bit. Another way may be to pass variables using a hidden form? just throwing out an idea.