Pixel2Life Forum > Expandable/Collapsable Menu

Full Version: Expandable/Collapsable Menu

Pixel2Life Forum > Member Tutorials and Requests > Forum Tutorial Archives > Miscellaneous Tutorials

ArsonistX

Nov 12 2007, 02:29 PM

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.

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

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 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.

iwz

May 7 2008, 06:07 PM

It would be handy if you posted a live example for us to see exactly what the tutorial is doing.

Scythar

May 8 2008, 09:22 AM

if you hovern over a text element it will show an expandable menu with other text items you can select to navigate, and if you click on the text (the title) it will collaps again or expand depending on previous state.
erm... thats what i understand out of it.

But then again,
i am a code moron so...

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.