Content in the Javascript library assumes a sound understanding of ECMAScript, CSS, XHTML and DOM.

Expanding menu

Code listing for xc.html

Create your menu as an unordered list in HTML. This provides an accessible menu for everyone, without requiring support for javascript or CSS. You can place this menu wherever you like in your webpage, and use any CSS that you like to style it. Customers with support for CSS, but not javascript, will see your styles.

You must give the menu and each ul tag within the menu an id (no other tag can have the same id in the webpage). You must put titles on the menus (in the ul tags). Titles are used on the expanding controls to provide accessibility hints.

  1. <ul id="x">
  2. <li><a href="../" title="Javascript library">Javascript library</a>
  3. <ul id="js" title="Javascript">
  4. <li class="open"><a href="./">Expanding menu</a>
  5. <ul id="xc" title="Documentation for expanding menu">
  6. <li><a href="code/">HTML code</a></li>
  7. <li><a href="code/js.html">Javascript code</a></li>
  8. <li><a href="code/css.html">CSS code</a></li>
  9. </ul></li>
  10. <li><a href="../m/">Popup menu</a>
  11. <ul id="m" title="Documentation for popup menu">
  12. <li><a href="../m/code/js.html">Javascript code</a></li>
  13. </ul></li>
  14. <li><a href="../w/">Popup windows</a></li>
  15. <li><a href="../tp/">Tabbed panels</a>
  16. <ul id="tp" title="Documentation for tabbed panels">
  17. <li><a href="../tp/code/">HTML code</a></li>
  18. <li><a href="../tp/code/js.html">Javascript code</a></li>
  19. <li><a href="../tp/code/css.html">CSS code</a></li>
  20. </ul></li>
  21. </ul></li>
  22. <li><a href="/ben/resume/" title="Ben Boyle, Multimedia Developer | Resume">Author’s resume</a>
  23. <ul id="bboyle" title="Ben Boyle">
  24. <li><a href="/ben/resume/experience/programming/javascript.html">Javascript experience</a></li>
  25. <li><a href="/ben/resume/experience/internet/css.html">CSS experience</a></li>
  26. <li><a href="/ben/resume/experience/internet/xhtml.html">XHTML experience</a></li>
  27. <li><a href="/ben/resume/contact/">Contact email form</a></li>
  28. <li><a href="/ben/" title="Ben Boyle lives here!">Personal home page</a></li>
  29. </ul></li>
  30. </ul>

You must link to the xc.js file. This contains all the javascript functions for controlling the menu. The stylesheet controls the look and feel of the menu. You can use the supplied css file, combine it with your own stylesheet, or make up your own.

Place this code in the <head> section of your webpage. Only include the javascript file once, even if you have multiple menus on the page. You can use multiple stylesheets if you wish, but there is no need to repeat styles already defined.

  1. <link rel="stylesheet" type="text/css" href="/js/xc/xc.css" />
  2. <script type="text/javascript" src="/js/xc/xc.js"></script>

Setup the menu on a page by calling the xcSet function. This runs through the menu collapsing everything by default and adding the expanding controls (see Output HTML below). If you need part of the menu to remain expanded by default, you can use either of these options:

  1. list the id of that menu in the xcSet function;
  2. place a class (any class) on the <li> tag for that menu (note: the class will be changed to the class specified in xcSet).
  1. <body onload="xcSet('x', 'xc', 'js');">

If you have more than one menu on the page, call xcSet for each one.

  1. <body onload="xcSet('x', 'xc', 'js');xcSet('x2', 'xc');">

Output HTML

The expanding menu script alters the document to add expanding functionality. Here is an example showing how the above menu would be transformed. This is provided as a guide to the menu structure which is useful determining how to apply styles to the menu.

  1. <ul id="x">
  2. <li class="xc"><div class="xcc"><a href="javascript:xcHide('js');" title="Javascript library (collapse menu)">[-]</a></div><a href="../" title="Javascript library">Javascript library</a>
  3. <ul id="js" title="Javascript">
  4. <li class="xc"><div class="xcc"><a href="javascript:xcHide('xc');" title="Documentation for expanding menu (collapse menu)">[-]</a></div><a href="./">Expanding menu</a>
  5. <ul id="xc" title="Documentation for expanding menu">
  6. <li><a href="code/">HTML code</a></li>
  7. <li><a href="code/js.html">Javascript code</a></li>
  8. <li><a href="code/css.html">CSS code</a></li>
  9. </ul></li>
  10. <li class="xc"><div class="xcx"><a href="javascript:xcShow('m');" title="Documentation for popup menu (collapse menu)">[+]</a></div><a href="../m/">Popup menu</a>
  11. <ul id="m" title="Documentation for popup menu">
  12. <li><a href="../m/code/js.html">Javascript code</a></li>
  13. </ul></li>
  14. <li><a href="w/">Popup windows</a></li>
  15. <li class="xc"><div class="xcx"><a href="javascript:xcShow('tp');" title="Documentation for tabbed panels (collapse menu)">[+]</a></div><a href="../tp/">Tabbed panels</a>
  16. <ul id="tp" title="Documentation for tabbed panels">
  17. <li><a href="../tp/code/">HTML code</a></li>
  18. <li><a href="../tp/code/js.html">Javascript code</a></li>
  19. <li><a href="../tp/code/css.html">CSS code</a></li>
  20. </ul></li>
  21. </ul></li>
  22. <li class="xc"><div class="xcx"><a href="javascript:xcShow('bboyle');" title="Ben Boyle (collapse menu)">[+]</a></div><a href="/ben/resume/" title="Ben Boyle, Multimedia Developer | Resume">Author’s resume</a>
  23. <ul id="bboyle" title="Ben Boyle">
  24. <li><a href="/ben/resume/experience/programming/javascript.html">Javascript experience</a></li>
  25. <li><a href="/ben/resume/experience/internet/css.html">CSS experience</a></li>
  26. <li><a href="/ben/resume/experience/internet/xhtml.html">XHTML experience</a></li>
  27. <li><a href="/ben/resume/contact/">Contact email form</a></li>
  28. <li><a href="/ben/" title="Ben Boyle lives here!">Personal home page</a></li>
  29. </ul></li>
  30. </ul>
[ inspire logo ]
Code in the javascript library is free to use (Unlicense). Enjoy! Feedback welcome.
© Ben Boyle 2003.
Fork me on GitHub