So, I decided to make one too.
Here's the tutorial:
First, if you have a separate stylesheet file, place the code below in there. If you don't, you will have to put it in the <style type="text/css"></style> tags.
Here is the code:
.plus { font-size: 10px; font-weight: normal; padding: 1px 5px 1px 5px; margin: 0px 0px; background: #262626; //Replace with any color color: #fff; //Replace with any color border: 1px solid #fff; //Replace with any color cursor: hand; cursor: pointer } .plus:hover { background: #262626; //Replace with any color border: 1px solid #fff; //Replace with any color }
Next, open up the page you want the menu to be on in a text editor. (Notepad )
Place this code in the <head></head> tag:
<script type="text/javascript"> function toggle(button,area) { var tog=document.getElementById(area); if(tog.style.display) { tog.style.display=""; } else { tog.style.display="none"; } button.innerHTML=(tog.style.display)?'+':'−'; } </script>
Now place the following code wherever you want the menu to be:
<h1><span class="plus" onclick="toggle(this,'dis');" title="Click to show/hide">-</span> Navigation</h1> <div id="dis" style="" align="center"> place content here </div>
Remember, the dis text MUST match and be changed to something else, and you cannot use the same id if you are making multiple menu's, or the script will not function correctly.
And there you have it, an expandable/collapsible menu using JavaScript and CSS.
Edited by ArsonistX, 12 November 2007 - 02:30 PM.