Expandable/Collapsable Menu in JS/CSS

**arsonistx** · 11-03-2007 02:31 AM

I was looking up tutorials on how to do this, and I read quite a few of them and got a basic idea on how to do this.
So, I decided to make one too. :P
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:

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:

Code:

<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)?'+':'&minus;';
  }
</script>

Now place the following code wherever you want the menu to be:

Code:

<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 bold fields MUST match, or the script will not function correctly.

And there you have it, an expandable/collapsible menu using JavaScript and CSS.

This exact script is used on my website.

(Live example: www.arsonistx.whdot.com - right side of the page)

**Emihaumut** · 11-18-2007 06:52 PM

I would have totally loved this tutorial had you uploaded it about a month ago when I was trying to install the panels on my website. I spent 3 days messing with the Spry panels, trying to get it to work.

Regardless though, it seems to be a pretty good tutorial.

**Synkc** · 11-18-2007 07:34 PM

Thanks, great tutorial

**DarkDragonLord** · 11-19-2007 09:24 AM

Too bad i cant see the example, your web page is suspended :S

**zzurrien** · 11-19-2007 09:27 AM

The tutorial is great, but some DarkDragonLord says, the example are suspended

Thread: Expandable/Collapsable Menu in JS/CSS

LinkBack

Thread Tools

Display

Expandable/Collapsable Menu in JS/CSS

Re: Expandable/Collapsable Menu in JS/CSS

Re: Expandable/Collapsable Menu in JS/CSS

Re: Expandable/Collapsable Menu in JS/CSS

Re: Expandable/Collapsable Menu in JS/CSS

Similar Threads

300 short cuts of Windows XP

Create Right Click Menu in Flash

Joomla - Problem with URL links in Menu

No funcionan los enlaces de mi menu

How do you make Scrolling Menu Bars and Jump Bars

Posting Permissions