Unobtrusive Collapsible Menu
3. Stylesheet
More of this Feature
The next thing we need to do once we have the HTML for our collapsible menu set up is to style it. To do this simply add the following code either into your external stylesheet attached to the head of your page or put it between <style type="text/css"> and </style> in the head of the page.
Should you decide to use a different heading tag for your menu then simply change the h5 reference to whatever heading tag you used. You can also change the width of the whole thing and/or the colour and font weight for the heading without affecting the menu operation but the rest of the styles must be as shown for the menus to display correctly. I haven't styled the <a> tags within my menu since how those are styled for their appearance does not affect the operation of the menu.
One potential accessibility issue with this script is that with the stylesheet in place the menus themselves will only be accessible via JavaScript. You may therefore want to provide an alternative way for people to use the menu if they do not have JavaScript.
With the stylesheet in place the final step is to add the JavaScript.
