Panel Bar or Accordeon Menu using DOMscripting and CSS

A friend of mine asked for a menu like the Outlook Panel in CSS and JavaScript as a proof of concept. I took on the challenge and quickly put together this example of a DOMscripting powered panel menu . It functions the same way – only one section can be open at a time – and should be rather self-explanatory. For a change I am not using off-left to hide the sections but plain old display block and none inside the script, which has the welcome side effect that you can use it with a keyboard without having to tab through the invisible links! Features:

  • Fully contained unobtrusive JavaScript
  • Option to style JavaScript and non-JavaScript menu independently
  • Option to have predefined open section

I hope it is helpful for some of you, and I appreciate any feedback / bug issues.