| Expanding & Collapsing Menus |
|
|
|
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.
Function 1 - Menu Titles & Open/Close Options
function showTitle($id)
{
$title = array(
"First title",
"Second title",
"Third title",
"Etc..."
);
$data = $_SESSION['whattoclose'];
$not = explode( "|" , $data );
if(!in_array( $id , $not ))
{
echo '<a href="'.$_SERVER['PHP_SELF'].'?set='.$id.'">close</a> - ';
echo $title[$id-1];
} else {
echo '<a href="'.$_SERVER['PHP_SELF'].'?undo='.$id.'">open</a> - ';
echo $title[$id-1];
}
}
|
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(
'<p><a href="#">Link1</a></p>
<p><a href="#">Link2</a></p>
<p><a href="#">Link3</a></p>',
'<p>The second tables data here. Blah blah blah hehehe.</p>',
'<p>Getting tired yet? Hahaha</p><p>Weeeeeeeeeeeeeeeeeeeeeeeeee</p><p><a
href="#">scrowler</a> is so cool!</p>',
'<p>Foobar... This website is awesome eh? Divs and all... Screw
tables!</p>'
);
$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 <p></p> 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.
And Finally: Showing Your Menus!
<div class="header">
<? showTitle(1) ?>
</div>
<? checkIt(1) ?>
<br>
<div class="header">
<? showTitle(2) ?>
</div>
<? checkIt(2) ?> |
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.
- Tutorial written by Scrowler
| 
|
 |
|
|
TrentonCS
Author: ahstanford
Posted: Nov 06th, 7:40pm
Activity: 3 replies, 28 views
| | Html 5
Author: ahstanford
Posted: Nov 05th, 1:32pm
Activity: 5 replies, 90 views
| | What are your favorite websites?
Author: ahstanford
Posted: Nov 05th, 12:51am
Activity: 0 replies, 47 views
| | What do you do for a living?
Author: ahstanford
Posted: Nov 04th, 11:04pm
Activity: 0 replies, 46 views
| | What is your favorite Subway sandwich?
Author: ahstanford
Posted: Nov 04th, 11:02pm
Activity: 4 replies, 90 views
| | Windows 7
Author: ahstanford
Posted: Nov 04th, 10:59pm
Activity: 0 replies, 50 views
| | Google Wave
Author: ahstanford
Posted: Nov 04th, 10:52pm
Activity: 0 replies, 60 views
| | University Project
Author: Gjbphp
Posted: Nov 03rd, 8:59pm
Activity: 1 replies, 91 views
| | Hello BioRust!
Author: ahstanford
Posted: Nov 02nd, 5:39pm
Activity: 4 replies, 88 views
| |  Illustrator cs4 - Convert outlines/graphics to ...
Author: izidrew
Posted: Oct 29th, 3:48pm
Activity: 3 replies, 264 views
| | Hello BioRust!!
Author: MOST
Posted: Oct 29th, 12:52am
Activity: 4 replies, 144 views
| | Hey! newbie
Author: prelimiting
Posted: Oct 28th, 11:51pm
Activity: 1 replies, 114 views
| |
|
 |
 |
 |
|
|
|
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
|
|
|
|
|
|
