Collapsible Menu

3. The Stylesheet

The next step is to copy the stylesheet code below and save it to clmenu.css (which we have already linked into our page).

There are a number of things within the stylesheet code which need to be as coded for the collapsible menus to work while other parts can be changed to suit your particular requirements so we'll look at each piece of this code to see what it does.

The mC class is a wrapper for the whole collapsible menu. The attributes define a 100 pixel wide menu with a 5 pixel margin aligned to the right of whatever contains the menu. You can change this as needed to put the menu where you want.

The mH class defines the menu headings that always appear on the screen. You can change any of the attributes here to make the headings look the way you want but I suggest leaving the cursor:pointer there so that your visitors will know that the heading is clickable. The top border also helps to separate multiple collapsible menus.

The mL class is a wrapper for each of the menus that we are making collapsible. The display:none is needed to hide all of the menus from view when the page is first displayed. The bottom margin ensures that the content underneath the expanded menu is not hard up against the last entry in the menu.

The mO class defines each of the options within each menu. display:block is needed here since links normally display inline and we want each link on a separate line. The left margin indents the entries slightly from the headings.

The final step is to add the menus to the HTML in our page.