Simple collapsible list.

[animecosmo]

As per request:

This is a very simple, easy-to-follow script as long as you know a little CSS. There will be an example at Anime Cosmo as soon as I am done with my new theme. Until then, it is set to admin-only for being able to view it. I should be done by the end of the day, if everything goes right.

I did not write this script or the stylesheet. I just edited it for my own use. I cannot remember the exact page where it came from, and there are no credits giving along with the script, so unfortunately I am not able to give proper credit.

STEP ONE

First, take the following script and put it in a javascript document. You can do this by simply opening up Notepad, placing it in, name.js (whatever you want to call it, as long as it has the extension .js), and make sure save as type is set to "All Files".

Code Select Expand

function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}


Upload that file to whatever directory you want.


STEP TWO

Place the following in the stylesheet for your layout.

Code Select Expand


.mC {width:150px; margin:5px; float:left;}
.mH {color:#05114D; font-size:small; cursor:pointer;}
.mL {display:none; margin-bottom:10px;}
.mO {margin-left:10px; display:block;}


• You can change the width to however wide you like, you can make it be right or centre aligned rather than left.
• To change the colour of the main category links, change the hex code where it says .mH {color:#05114D:}
• The cursor type can be any available. Just change out "pointer" for a different type. You can find the available types HERE.
• Changing the "margin-left" will make the margin of the links (not the categories). Less will put them closer to the edge, whereas a higher number will make them more indented.
• Of course, you can add all sorts of other nifty CSS tricks. You can make the categories or the links be bold, italic, underlined, larger or smaller size, or have a background image/colour behind them, for example.
  
  
  STEP THREE
  
  Now you have to make the actual list.
  
  

Code Select Expand

<div class="mC">
<div class="mH"
onclick="toggleMenu('menu1')">Category 1</div>
<div id="menu1" class="mL">
<a class="mO" href="http://www.yoursite.com">Link 1</a>
<a class="mO" href="http://www.yoursite.com">Link 2</a>
<a class="mO" href="http://www.yoursite.com">Link 3</a>
</div>
</div>

Above is an example of the HTML you want to make your list work. Change the Category name to whatever you want. Same with the link and the link name. If you add another category, it is important to change the number in ('menu1'). So if you added a second category, the whole thing would look like this:

Code Select Expand

<div class="mC">
<div class="mH"
onclick="toggleMenu('menu1')">Category 1</div>
<div id="menu1" class="mL">
<a class="mO" href="http://www.yoursite.com">Link 1</a>
<a class="mO" href="http://www.yoursite.com">Link 2</a>
<a class="mO" href="http://www.yoursite.com">Link 3</a>
</div>
<div class="mH"
onclick="toggleMenu('menu2')">Category 2</div>
<div id="menu1" class="mL">
<a class="mO" href="http://www.yoursite.com">Link 1</a>
<a class="mO" href="http://www.yoursite.com">Link 2</a>
<a class="mO" href="http://www.yoursite.com">Link 3</a>
</div>
</div>

If you do not want links, just a list of items, simply take away the href="http://www.yoursite.com". You still have to keep the a class in order to make it work. So a list that did not have links would look like this:

Code Select Expand

<div class="mC">
<div class="mH"
onclick="toggleMenu('menu1')">Category 1</div>
<div id="menu1" class="mL">
<a class="mO">Link 1</a>
<a class="mO">Link 2</a>
<a class="mO">Link 3</a>
</div>
</div>

This is also useful if you want to show an upcoming page that is still under construction. You can make the inactive list item into normal text (non-clickable) so that you can show people that link will be coming soon, but they cannot actually go to it.

[animecosmo]

Oops! Forgot a very important step!

Open your index template. Go to the spot that says "Beginning on line 59:" and find

Code Select Expand

<title>', $context['page_title'], '</title>';

Right after that, insert the following:

Code Select Expand

echo '
<script src="http://www.location_of_your_menu_script/menu.js" type="text/javascript"></script>';