jQuery code for treemenu doesn't work as it´s supposed to! Please help ASAP...

jQuery code for treemenu doesn't work as it´s supposed to! Please help ASAP...

Hello, I have been interested of creating a treemenu with a template found att  http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm and the one I was looking forward of making was the demo #3...
I have downloaded all files, edited the CSS file for the menus design and style, I have also created a .js file for the jQuery code setting up the functions I want available with my menu, unfortunality I ran into som difficulties forcing me to change this code which made it harder to understand for me since Im very beginner at this jQuery codes and combinations... 
The problems is not having the menu working "Link-wise" but instead, making the "visited-menu-alternative-color-change-function" apply when entering a menu alternative. I think its whats called Location function at DynamicDrive. 

Im afraid this is not the only problem making it hard for my visitors to keep track on which menu alternative they are visiting atm, there is one more thing neccessary for the "Location-function" to work, and this would be to avoid the menu alternative-siblings to hide once you clicked a menu alternative, I want the menu to stay the way it is where they clicked to enter another page even though the whole website is reloading.

I was hoping the geniuses and helpful people at this forum could give me a hand since Im new to this and have absolutely no clue whats wrong and whats in need of a modification, so to speak.

I will paste the Code for HTML file in which the menu is located, as well as the CSS file for design, and also the jQuery (.js) file in which the menus function is being explained.

First off the HTML code:


  1. <html>
  2. <head><title></title>
  3.  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  4.  <link rel="stylesheet" href="jquery.treeview.css"></script>
  5.  <script type="text/javascript" src="jquery.treeview.min.js"></script>
  6.  <script src="lib/jquery.cookie.js" type="text/javascript"></script>

  7.  <script src="jquery.treeview.js" type="text/javascript"></script>
  8.  
  9.  <script type="text/javascript" src="menu.js"></script>
  10.  

  11. </head>
  12. <body bgcolor="#000000">

  13. <ul id="mymenu" class="filetree">

  14. <li><a id="head" href="#">Bild</a>
  15. <ul>
  16. <li><a id="sibling" href="#">Fotoalbum [Redigerade]</a></li>
  17. <li><a id="sibling" href="#">Fotoalbum [Naturliga]</a></li>
  18. <li><a id="sibling" href="#">Galleri</a></li>
  19. <li><a id="sibling" href="#">Design</a></li>
  20. <li><a id="sibling" href="#">Layouts</a></li>
  21. <li><a id="sibling" href="#">Logotypes</a></li>
  22. <li><a id="sibling" href="#">Portfolio</a></li>
  23. </ul>
  24. </li>

  25. <li><a id="head" href="#">Kunskap</a>
  26. <ul>
  27. <li><a id="sibling" href="#">Ordspråk</a></li>
  28. <li><a id="sibling" href="#">Privat inlärning [Video]</a></li>
  29. <li><a id="sibling" href="#">Privat inlärning [Text]</a></li>
  30. <li><a id="sibling" href="#">Hemsidor</a></li>
  31. <li><a id="sibling" href="#">Film</a></li>
  32. <li><a id="sibling" href="#">Musik</a></li>
  33. <li><a id="sibling" href="#">Program</a></li>
  34. <li><a id="sibling" href="#">Kodspråk</a></li>
  35. <li><a id="sibling" href="#">Frågesport</a></li>
  36. <li><a id="sibling" href="#">Hjärnspel</a></li>
  37. <li><a id="sibling" href="#">Uppfinnare</a></li>
  38. <li><a id="sibling" href="#">Ordlista [Special]</a></li>
  39. <li><a id="sibling" href="#">Statistik</a></li>
  40. <li><a id="sibling" href="#">Historia @ Komma ihåg</a></li>
  41. </ul>
  42. </li>

  43. <li><a id="head" href="#">Anställning & Tjänster</a>
  44. <ul>
  45. <li><a id="sibling" href="#">Webbdesign</a></li>
  46. <li><a id="sibling" href="#">Teknisk support</a></li>
  47. <li><a id="sibling" href="#">Rådgivning</a></li>
  48. <li><a id="sibling" href="#">Undervisning</a></li>
  49. <li><a id="sibling" href="#">Ljud</a></li>
  50. <li><a id="sibling" href="#">Bild</a></li>
  51. </ul>
  52. </li>

  53. <li><a id="head" href="#">Cyber Fox</a>
  54. <ul>
  55. <li><a id="sibling" href="#">Dokumentation</a></li>
  56. <li><a id="sibling" href="#">Information</a></li>
  57. <li><a id="sibling" href="#">Sammarbete</a></li>
  58. </ul>
  59. </li>

  60. <li><a id="head" href="#">Blogg</a></li>
  61. <li><a id="head" href="#">Forum</a></li>
  62. <li><a id="head" href="#">Kontakt</a></li></ul>

  63. </body>
  64. </html>

Second the CSS code:


  1. .treeview, .treeview ul { 
  2.  padding: 0;
  3.  margin: 0;
  4.  list-style: none;
  5. }

  6. .treeview ul {
  7.  background-color: #000000;
  8.  margin-top: 4px;
  9. }


  10. .treeview li { 
  11.  margin: 0;
  12.  padding: 3px 0pt 1px 12px;
  13.  
  14. }

  15. .treeview a.selected {
  16.  background-color: #000000;
  17. }

  18. #treecontrol { margin: 1em 0; display: none; }

  19. ul#mymenu { background-color: #000000; }
  20. ul#mymenu a#head:link { color: #dd8800; font-size: 14px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }
  21. ul#mymenu a#head:focus { color: #dd8800; font-size: 14px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }
  22. ul#mymenu a#head:hover { color: #959595; font-size: 14px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }
  23. ul#mymenu a#head:active { color: #959595; font-size: 14px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }


  24. ul#mymenu a#sibling:link { color: #dd8800; font-size: 12px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }
  25. ul#mymenu a#sibling:focus { color: #dd8800; font-size: 12px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }
  26. ul#mymenu a#sibling:hover { color: #959595; font-size: 12px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }
  27. ul#mymenu a#sibling:active { color: #959595; font-size: 12px; font-style: normal; font-weight: bold; font-family: Arial, Verdana, Sans serif; letter-spacing: 1px; }


  28. * {  text-decoration: none; outline: none;  }

Third and last, the jQuery code (.js file):


  1. $(document).ready(function() {

  2. $("#mymenu").treeview({
  3. collapsed: true,
  4. animated: "fast",
  5. control: "#treecontrol",
  6. unique: true,
  7. persist: "location",

  8. });

  9. $('ul#mymenu > li > a').toggle(function(e) {
  10.       $(this).siblings('ul').slideDown();
  11.       e.preventDefault();
  12. }, function(e) {
  13.       $(this).siblings('ul').slideUp();
  14.       e.preventDefault();
  15. });

  16. });

I really appreciate all help I can get and thank you all for the trouble this might cause you


Best regards:
ZinoXxX