Hello. There is a drop-down menu:

<ul id="menu"> <li> <a href="#">Weblog Tools</a> <ul> <li><a href="http://www.pivotx.net/">PivotX</a></li> <li><a href="http://www.wordpress.org/">WordPress</a></li> <li><a href="http://www.textpattern.com/">Textpattern</a></li> <li><a href="http://typosphere.org/">Typo</a></li> </ul> </li> <li> <a href="#">Programming Languages</a> <ul> <li><a href="http://www.php.net/">PHP</a></li> <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li> <li><a href="http://www.python.org/">Python</a></li> <li><a href="http://www.perl.org/">PERL</a></li> <li><a href="http://java.sun.com/">Java</a></li> <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li> </ul> </li> <li> <a href="#">Cool Stuff</a> <ul> <li><a href="http://www.apple.com/">Apple</a></li> <li><a href="http://www.nikon.com/">Nikon</a></li> <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li> <li><a href="http://www.nintendo.com/">Nintendo</a></li> </ul> </li> <li> <a href="#">Search Engines</a> <ul> <li><a href="http://search.yahoo.com/">Yahoo!</a></li> <li><a href="http://www.google.com/">Google</a></li> <li><a href="http://www.ask.com/">Ask.com</a></li> <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li> </ul> </li> <li> <a href="#">Search Engines</a> <ul> <li><a href="http://search.yahoo.com/">Yahoo!</a></li> <li><a href="http://www.google.com/">Google</a></li> <li><a href="http://www.ask.com/">Ask.com</a></li> <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li> </ul> </li> </ul>

CSS styles to it:

 body { font-family: Helvetica, Arial, sans-serif; font-size: 0.9em; } p { line-height: 1.5em; } ul#menu, ul#menu ul { list-style-type: none; margin: 0px; padding: 0px; width: 15em; } ul#menu a { display: block; text-decoration: none; } ul#menu li { margin-top: 1px; } ul#menu li a { background: #333; color: #fff; padding: 0.5em; } ul#menu li a:hover { background: #000; } ul#menu li ul li a { background: #ccc; color: #000; padding-left: 20px; } ul#menu li ul li a:hover { background: #aaa; border-left: 5px #000 solid; padding-left: 15px; } .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; margin: 0px; padding: 5px; } .code code { display: block; margin-bottom: 0px; padding: 3px; } .code li { background: #ddd; border: 1px solid #ccc; margin: 0px 0px 2px 2.2em; } .indent1 { padding-left: 1em; } .indent2 { padding-left: 2em; }

And Java Script:

 function initMenu() { $('#menu ul').hide(); $('#menu li a').click(function () { $(this).next().slideToggle('normal'); }); } $(document).ready(function () { initMenu(); });

How can you make it so that when you click on the internal menu item and go to another page, the menu does not close, but remains open? Thanks a lot in advance.

  • @laboomba, To format a code, select it with the mouse and click on the {} button of the editor. - Nicolas Chabanovsky ♦
  • Good. Just a little on the forum. - Frontender

2 answers 2

I will add the answer @Deonis . Use a combination of Local Storage and Cookie right away. Before installation, you can check the support of Storage - if there is no install cookie.

A short example:

setting value:

 typeof(localStorage) != 'undefined' ? localStorage['Info'] = someVal : setCookie('Info', someVal , 1);

getting value:

  typeof(localStorage) != 'undefined' ? localStorage['Info'] : getCookie('Info');

This will solve the problem with IE.

An alternative approach to solving the problem is using hash.

We add a hash to url to menu items (for example, # menu1, # menu2, # menu3). Accordingly, the page will open with the url of the form www.somesite.com/url#menu1 . Then using javascript you get window.location.hash when loading the page and according to the hash you open the necessary menu section.

  • The hash option is more beautiful. Regarding the preservation of information in the transition between pages - there is a window.name. Here you can shove any string and works in all browsers (ie6 +) - BGoode
  • Something I did not drive about the method with hash. Can I see a mini example somewhere? - zloctb

Once you have specified javascript in the tags, then we will consider a solution in this direction. For your task, you can use local storage . By clicking on a specific menu branch, you write its index in LS. On other pages, it remains to simply check the value in LS and change the state of the desired branch to "open"

  • And do not tell me how to display this in code? I just do not quite understand. And localhost like HTML5. Will all browsers work? - Frontender
  • Is it possible to do this not through javascript? - Frontender
  • @laboomba, no, not all browsers. In the donkey below the eighth will not work. If you count users who have at least IE7, then this option disappears - Deonis
  • And how then can you do it bypassing lokalstrazh? - Frontender
  • > Is it possible to do this not through javascript? Sure you may. Cook has not been canceled. Only in this case, you are not insured from the fact that the user disconnects them. There is one very tough way that will help achieve a result, but I will not even voice it, because This is the method of "radical surgery." )) - Deonis