Jump to content


Photo
- - - - -

Expandable/Collapsable Menu


  • Please log in to reply
2 replies to this topic

#1 ArsonistX

ArsonistX

    Young Padawan

  • Members
  • Pip
  • 9 posts

Posted 12 November 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. :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:

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


#2 iwz

iwz

    Young Padawan

  • Members
  • Pip
  • 174 posts
  • Gender:Male
  • Location:UK
  • Interests:Photography, Gaming, Web-design.

Posted 07 May 2008 - 06:07 PM

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

#3 Scythar

Scythar

    Honored X Staff

  • Members
  • PipPipPipPip
  • 1,888 posts
  • Gender:Male
  • Location:Antwerp (Belgium)

Posted 08 May 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...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users