In this tutorial I will show you how to create a simple menu system with 2 levels. You can easy integrate it into your site to get a nice and easy editable site navigation system.
Step 1.
To make a menu system easy changeable and easy readable we will separate the code into more parts. A basic realization contains 3 files which are the following:
menuStruct.php: Contains only the navigation structure. It will be used by the handler function.
menuHandler.php: This file contains the PHP code which generates the menus with corresponding submenus as well.
index.php: The main page which integrates the navigation system.
Step 2.
First let's design the menu system structure. To handle the menu element easy we will use a multi dimensional array. In the array the key will be the name of the menu and the value is the link for it. So we can define the main menu system as follows:
Now we have all the main menu items defined. However usually we need some submenus as well. To sore it in the array we will create a new array which stores the main menu - submenu relations. As you will see here we use a little bit more complex array to store information. You have to take care that the keys - key strings - in the main array and in the sub array must be identical. So the submenu array looks like this:
At the end store this information in a file let's named it to menuStruct.php.
Step 3.
After you stored the menu structure in a file we can focus on the application logic. We will implement it in the second file
named menuHandler.php. In this file we will implement only one function called createMenu(). This function will have only one parameter which tells what is the actual page link. From this information the function will decide whether or not to display relevant submenus. So the final result is this:
Now let's start the most important part. First the function needs to include the menuStruct.php file to access the menu arrays. As second we open a table tag where we will display the menu elements as rows (tr tags).
As next step we check where the input parameter - which is the actual link - can be found in the arrays. It is important to know to decide which submenu the code should display. So the code is the following:
After we got the actual menu we can begin with displaying the menu items row by row. We start it with the main menu items. In all steps we check whether the actually selected link in the array and the menu is the same or not. It is because if they are the same then we should display the relevant submenus before displaying the next main menu item. To make it more pretty we use other CSS class for the submenu rows as the main menu rows. The code looks like this:
Step 4.
The last step is a demonstration how to use it in the real life. To do this we will create a new file. Let's called it to index.php. This is quite straightforward. We include the menuHandler.php and create our HTML page as we want. Where you want to display the navigation block you only need to call our function with the actual link as
Step 1.
To make a menu system easy changeable and easy readable we will separate the code into more parts. A basic realization contains 3 files which are the following:
menuStruct.php: Contains only the navigation structure. It will be used by the handler function.
menuHandler.php: This file contains the PHP code which generates the menus with corresponding submenus as well.
index.php: The main page which integrates the navigation system.
Step 2.
First let's design the menu system structure. To handle the menu element easy we will use a multi dimensional array. In the array the key will be the name of the menu and the value is the link for it. So we can define the main menu system as follows:
Code:
<?php
// Main menu items
$mainMenu['Home'] = 'link-1';
$mainMenu['About us'] = 'link-2';
$mainMenu['Projects'] = 'link-3';
$mainMenu['Contact'] = 'link-4';
$mainMenu['Others'] = 'link-5';
?>
Code:
<?php
// Sub menu items
$subMenu['Projects']['SubMenu-1'] = 'sub-link-1';
$subMenu['Projects']['SubMenu-2'] = 'sub-link-2';
$subMenu['Projects']['SubMenu-3'] = 'sub-link-3';
$subMenu['Projects']['SubMenu-4'] = 'sub-link-4';
$subMenu['Others']['SubMenu-1'] = 'sub-link-11';
$subMenu['Others']['SubMenu-2'] = 'sub-link-12';
$subMenu['Others']['SubMenu-3'] = 'sub-link-13';
?>
Step 3.
After you stored the menu structure in a file we can focus on the application logic. We will implement it in the second file
named menuHandler.php. In this file we will implement only one function called createMenu(). This function will have only one parameter which tells what is the actual page link. From this information the function will decide whether or not to display relevant submenus. So the final result is this:
Code:
<?php
function createMenu($actLink){
}
?>
As next step we check where the input parameter - which is the actual link - can be found in the arrays. It is important to know to decide which submenu the code should display. So the code is the following:
Code:
<?php
// Get actual Main menu
$actMenu='';
foreach ($mainMenu as $menu => $link) {
if ($link == $actLink) $actMenu = $menu;
if (isset($subMenu[$menu])){
foreach ($subMenu[$menu] as $menuSub => $linkSub) {
if ($linkSub == $actLink) $actMenu = $menu;
}
}
}
?>
Code:
<?php
foreach ($mainMenu as $menu => $link) {
echo '<tr><td><a href="'.$link.'">'.$menu.'</a></td></tr>';
if ( ($actMenu == $menu) && (isset($subMenu[$menu])) ){
foreach ($subMenu[$menu] as $menuSub => $linkSub) {
echo '<tr><td><a href="'.$linkSub.'" class="submenu">'.$menuSub.'</a></td></tr>';
}
}
}
?>
The last step is a demonstration how to use it in the real life. To do this we will create a new file. Let's called it to index.php. This is quite straightforward. We include the menuHandler.php and create our HTML page as we want. Where you want to display the navigation block you only need to call our function with the actual link as
Code:
<div id="menu"><?php createMenu('link-3'); ?></div>