Question

So my PHP webiste generates DHTML output that looks like the following:

<div class="toggle-ctrl" onclick="toggleMenu();">
    click me to toggle menu
</div>
<div id="site-menu">
    <ul>
        <li>opt 1</li>
        <li>opt 2</li>
    </ul>
</div>
<p><a href="#">Link to Myself</a></p>

And of course, when clicked, the first div calls some JavaScript which toggles the visibility of the site-menu

function toggleMenu() {
    var navigation_pane  = document.getElementById('site-menu').style;
    if ( navigation_pane.display == 'none' )
        navigation_pane.display = 'block';
    else
        navigation_pane.display = 'none';
}

All this works fine. It’s clicking on the link which is bothering me right now. Clicking it (of course) creates a new http request, and my PHP engine re-generates the page again.

The problem occurs when the visibility of the site-menu is 'none'. The PHP engine doesn’t know that the menu is hidden, so it generates the same-html again, and the browser places the menu back in front of the surprised-looking user.

The question therefore, is how do I inform PHP (or how can PHP go to check) what the status of the site-menu‘s visibility is, before it goes to re-generate the page?

Answer 1

There are at least two options other than sending the menu state to the PHP script.

1. Use AJAX to load just part of the page. If you don’t reload the menu, you don’t need to re-initialize its style. Before going down this path, examine whether AJAX is suitable. If you implement this solution, don’t break browser functionality.

2. Modern browsers support a storage mechanism. Store the menu state in localStorage when it changes, and set the menu state when the page loads. To support older browsers, you can create an API that uses web storage when available and cookies when not (jQuery.Storage does this).

   Menu.js:

   /* implementation of Storage, Class and addEventListenerTo left as 
      an exercise for the reader.
   */
   var Menu = {
       init: function(id, toggleId) {
           if (! toggleId) {
               toggleId = id + '-toggle';
           }
           var toggler = document.getElementById(toggleId),
               menu = document.getElementById(id);
           menu.toggler = toggler;
           /* addEventListenerTo should call the browser-supplied event subscriber 
              method (e.g. addEventListener or attachEvent)
           */
           addEventListenerTo(toggler, 'click', 
               function(evt) {
                   Menu.toggle(id);
               });
   
           if (! Storage.exists(id+'-open')) {
               Storage.set(id+'-open', true);
           }
   
           if (Storage.get(id+'-open')) {
               Menu.open(id);
           } else {
               Menu.close(id);
           }
       },
       toggle: function(id) {
           var menu = document.getElementById(id);
           Class.toggle(menu, 'open closed');
           if (Class.has(menu, 'open')) {
               menu.toggler.firstChild.nodeValue = 'close menu';
               Storage.set(id + '-open', true);
           } else {
               menu.toggler.firstChild.nodeValue = 'open menu';
               Storage.set(id + '-open', false);
           }
       },
       setState: function (id, toAdd, toRemove) {
           var menu = document.getElementById(id);
           Class.remove(menu, toRemove);
           Class.add(menu, toAdd);
       },
       open: function(id) {
           this.setState(id, 'open', 'closed');
       },
       close: function(id) {
           this.setState(id, 'closed', 'open');
       }
   };
   

   some CSS file:

   .closed { display: none; }
   

   page:

   <div id="site-menu-toggle" class="toggle-ctrl">close menu</div>
   <div id="site-menu" class="open">
       <ul>
           <li>opt 1</li>
           <li>opt 2</li>
       </ul>
   </div>
   <p><a href="#">Link to Myself</a></p>
   
   <script type="text/javascript">
   Menu.init('site-menu');
   </script>
   

   You can play with a live version of the Menu.js approach on jsFiddle. Using jQuery, you can do away with Menu.js, resulting in a much more succinct implementation:

   <script type="text/javascript">
   $('#site-menu-toggle').click(function (evt) {
           var $menu = $('#site-menu');
           $menu.toggleClass('open close');
           $.Storage.set('site-menu-state', $menu.attr('class'));
           if ($menu.hasClass('open')) {
               $('#site-menu-toggle').text('close menu');
           } else {
               $('#site-menu-toggle').text('open menu');
           }
       });
   $(function() {
       var state = $.Storage.get('site-menu-state');
       if (! state) {
           $.Storage.set('site-menu-state', $('#site-menu').attr('class'));
       } else {
           $('#site-menu').attr('class', state);
       }
   });
   </script>
   

   There’s a jFiddle for the jQuery menu state implementation that you can play with.

Since differences in the menu state don’t conceptually make for different resources, it doesn’t matter whether having the menu open or closed is bookmarkable or affected by history.

NB. don’t use the text “click me“, it’s too verbose and redundant (what other action is there? Affordances should be implicit.). Instead, you can use a graphic to indicate open/close, or simply say “open menu”/”close menu”.