Right, so you are making a new website, and you wanna spiff up your design with collapsing and expanding menus? I’ve created an easy to use way to put in as many menus as you like, and it uses sessions to store which menus to show and which to hide. I’ll outline the basics below:

<?php session_start();

if($_GET['set'] > 0)
{

if($_SESSION['whattoclose'] == NULL)
{

$_SESSION['whattoclose'] = $_GET['set'];

} else {

$_SESSION['whattoclose'] = $_SESSION['whattoclose'] . '|' . $_GET['set'];

}

}

if($_GET['undo'] > 0)
{

if(!empty($_SESSION['whattoclose'])){

$_SESSION['whattoclose'] = str_replace("|".$_GET['undo'] , "" , $_SESSION['whattoclose']);
$_SESSION['whattoclose'] = str_replace($_GET['undo'] , "" , $_SESSION['whattoclose']);

}

}

?>

These two IF statements check whether you are trying to show a menu, or hide a menu. If you opted to hide a menu, it adds the menu ID to the session variable containing the list of menus not to show. If you opted to show a menu, it removes the menu ID from the variable so it will be shown again. The reason there are two STR_REPLACE functions is because the format of the string might be thus:

1|2|3|4|5

So, if it was just the one statement (i.e. replace “|2” with nothing, thus removing) and the user tried to put 1 through it, it wouldn’t remove 1 because 1 doesn’t have the | with it, which is why we have two.

The following functions should be placed at the top of the PHP file, so that when the rest of it processes, it will include the new results instead of having to refresh, which would be what you would have to do if they were at the end of the script.

This is the first of the two functions that perform the basic operations of our menu system. This function in particular shows the title, and the appropriate link to open/ close the menu. As you can see, its fairly simple, and starts with an array specifying menu names, in order of first menu to last menu. If you want to add new menus, the first step is to put a comma after the last array stream, then put your new title in quotes below, without a comma after it. After processing the $title array, the script splits the string into pieces depending on which menus are NOT to be displayed, and checks whether your selected menu is allowed to be shown. If it is, the 'close' link is shown, and the title. Otherwise it shows the open link and the title.

I’ve used $_SERVER[‘PHP_SELF’] so that you do not have to change the link URL for each website - it’s now automatic! Bear in mind, though, that this probably won’t work if it’s in a folder, so if you are intending on putting it in a folder, change this to your URL/filename.

Function 2 - Showing the Menu Content

function checkIt($id)
{

$data = array(
'<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>',
'The second tables data here. Blah blah blah hehehe.',
'Getting tired yet? HahahaWeeeeeeeeeeeeeeeeeeeeeeeeee<a href="#">scrowler</a> is so cool!',
'Foobar... This website is awesome eh? Divs and all... Screw tables!'
);

$str = $_SESSION['whattoclose'];

$not = explode( "|" , $str );
if(!in_array( $id , $not ))
{

echo '<div class="table">';
echo $data[$id-1];
echo '</div>';

}

}

Our second function is rather essential, and shows the content in each box. So, if you want to add new menus, do the same as you did with the $title array in the first function, but this time make sure that you wrap it inside tags and throw all your content in there. If you want to put in ' characters, use alternative tags, as the ' character here has relevance in the code and adding it will screw up your PHP. I used apostrophes instead of double quotes because this way you can put hyperlinks in with no trouble.

Following these content definitions, the code then checks that the menu can be shown. If it can, it shows the whole DIV and the information as well - So, if the menu isn’t shown, the DIV doesn’t get shown either, and you don’t get the lower frame at all. Cool huh? Well that’s all of the main PHP out of the way, the rest is HTML and function calling.

I’ve cut my code down to only show 2 menus. All formatting is defined in my example CSS file menus.css which is part of the source code I have included with this tutorial. You can completely customize the way your menus will look through this source code. And, of course, I wouldn’t want to give you CSS code with errors, so I validated it to be sure.

That’s it from me! If you need more assistance, contact me via the Creative Forums, link is located on your right. Or click my name below to go to my Creative Profile, where you can email me, or send a private message. Registration is required.

Click here to download a .zip file containing some example source code for this tutorial.


	Expanding & Collapsing Menus Tutorial Author - Scrowler (http://forums.biorust.com/member.php?userid=66)