Below is the code with sufficient comments on making a tree navigation menu (hierarchical menu) in PHP. A single page holding different links.
The navigation links are present at the left sidebar of the page. I have not used any dynamic approach over here. Have not used any loop. It’s just a static and straight-forward implementation of tree navigation menu. This code is a helpful reference for dynamic implementation of such tree navigation menu.
Here is the complete code. Necessary comments/descriptions written in between the code.
<html>
<head>
<title>PHP Tree</title>
</head>
<body>
<h2>Welcome to my PHP Tree Implementation</h2>
<hr />
<?php
/**
* The first div is used for the navigation menu part
*/
?>
<div style="float:left; width:200px; border-right:1px solid #cccccc; height:500px; margin-top:20px; vertical-align:top; padding:6px">
<a href="<?php echo basename($_SERVER['PHP_SELF']) ?>">Home</a>
<br/>
<a href="<?php echo basename($_SERVER['PHP_SELF']) ?>?link=1">My Personal links</a>
<br/>
<?php
/**
* To show the sublink when the 'my personal links' menu is clicked
*/
if(isset($_GET['link'])) {
$link = $_GET['link'];
if($link == 1) {
echo "<div style='margin-left:20px'>"; // making the sub menu to look inside the main menu
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=1&sublink=gallery'>My Gallery</a>";
echo "<br/>";
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=1&sublink=about'>About me</a>";
echo "<br/>";
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=1&sublink=contact'>Contact me</a>";
echo "<br/>";
echo "</div>";
}
}
?>
<a href="<?php echo basename($_SERVER['PHP_SELF']) ?>?link=2">Useful links</a>
<br/>
<?php
/**
* To show the sublink when the 'useful links' menu is clicked
*/
if(isset($_GET['link'])) {
$link = $_GET['link'];
if($link == 2) {
echo "<div style='margin-left:20px'>"; // making the sub menu to look inside the main menu
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=2&sublink=yahoo'>Yahoo</a>";
echo "<br/>";
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=2&sublink=google'>Google</a>";
echo "<br/>";
if(isset($_GET['sublink'])) {
$sublink = $_GET['sublink'];
if($sublink == 'google') {
echo "<div style='margin-left:20px'>"; // making the sub link to look inside the main link
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=2&sublink=google&sublink2=gmail'>Gmail</a>";
echo "<br/>";
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=2&sublink=google&sublink2=orkut'>Orkut</a>";
echo "<br/>";
echo "</div>";
}
}
echo "<a href='". basename($_SERVER['PHP_SELF']) ."?link=2&sublink=msn'>MSN</a>";
echo "<br/>";
echo "</div>";
}
}
?>
</div>
<?php
/**
* This div is used for the message display part.
* i.e. the right side of the page where the message is displayed after clicking on the navigation link
*/
?>
<div style="float:left; margin-top:20px; margin-left:10px; vertical-align:top; padding:6px">
<?php
/**
* if link is set in the url
* i.e. if the url is in the form like 'filename.php?link=2'
*/
if(isset($_GET['link'])) {
// get the link value from the url
$link = $_GET['link'];
if($link == 1) {
if(isset($_GET['sublink'])) {
// getting the value of sublink
$sublink = $_GET['sublink'];
if($sublink == 'gallery') {
echo "<h2>Welcome to my gallery</h2>";
echo "My pics will go here.";
}
if($sublink == 'about') {
echo "<h2>About me</h2>";
echo "My introduction goes here.";
}
if($sublink == 'contact') {
echo "<h2>Contact me</h2>";
echo "My contact info goes here.";
}
} else {
/**
* this message is shown initially when the sublink is not set
* i.e. when the link is just filename.php?link=1
*/
echo "<h3>Welcome to my personal links.</h3>";
echo "There are these links in my personal links section. See the navigation menu to the left.";
}
}
if($link == 2) {
if(isset($_GET['sublink'])) {
// getting the value of sublink
$sublink = $_GET['sublink'];
if($sublink == 'yahoo') {
echo "<h2>www.yahoo.com</h2>";
}
if($sublink == 'google') {
if(isset($_GET['sublink2'])) {
$sublink2 = $_GET['sublink2'];
if($sublink2 == 'gmail') {
echo "<h2>www.gmail.com</h2>";
echo "Email from google.";
}
if($sublink2 == 'orkut') {
echo "<h2>www.orkut.com</h2>";
echo "A commumity site from google.";
}
} else {
// initially when the link google is clicked, the message below is displayed
echo "<h2>www.google.com</h2>";
echo "Please navigate through more sublinks inside google.";
}
}
if($sublink == 'msn') {
echo "<h2>www.msn.com</h2>";
}
} else {
/**
* this message is shown initially when the sublink is not set
* i.e. when the link is just filename.php?link=2
*/
echo "<h3>Welcome to some useful links.</h3>";
echo "There are these links in my useful links section. See the navigation menu to the left.";
echo "<h4>Click on the Google link. You will find more sublink there.</h4>";
}
}
} else {
/**
* else if the link is not set in the url
* i.e. the url is in the form like 'filename.php' only
* you will see this initially when you load the page filename.php
*/
echo "Please navigate through the navigation menu in the left.";
echo "<br/>";
echo "<h4>One page implementation of different links.</h4>";
}
?>
</div>
</body>
</html>