<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<a href="http://snippets.bluejon.co.uk/index.php"/>MENU</a>
<title>Vertical menubar multi level</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="vertical menubar;ie;ff;many tiers; many layers; easy build menu">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<br><br>
<center><h2 >A vertical menubar with multi levels (Easy Peasy Build)</h2></center>
<?php
################## legend #############################
### different sections
// things to do
/* information */
#######################################################
/* php 5 */
/* Mutliple tiers */
/* Change css for different styles */
### new instance of menu bar class ###################
// set menu bar name
$menuBar= new menuBar("menu bar name");
### new menu settings ###############################
// set menu bar width
$menuWidth= "120px";
// change class function settings
// delete lines or add lines as required
// parent menu group, the group which the menu belongs too
// child menu name, the name of the menu
// url, the link address
// class function--parent menu group---child menu name----- url---------
$menuBar->groupSet('menu bar group1', 'menu1' , 'index1.php');
$menuBar->groupSet('menu bar group1', 'menu2' , 'index2.php');
$menuBar->groupSet('menu bar group1', 'menu3' , 'index3.php');
$menuBar->groupSet('sub group3', 'sub group4', '');
$menuBar->groupSet('sub group3', 'menu10' , '');
$menuBar->groupSet('sub group2', 'menu8' , 'index4.php');
$menuBar->groupSet('sub group2', 'menu9' , 'index5.php');
$menuBar->groupSet('menu bar group2', 'sub group1', '');
$menuBar->groupSet('menu bar group2', 'sub group6', '');
$menuBar->groupSet('menu bar group2', 'menu4' , '');
$menuBar->groupSet('sub group2', 'sub group3', '');
$menuBar->groupSet('sub group1', 'sub group2', '');
$menuBar->groupSet('sub group1', 'menu6' , '');
$menuBar->groupSet('sub group1', 'menu7' , '');
$menuBar->groupSet('sub group2', 'sub group3', '');
$menuBar->groupSet('menu bar group3', 'menu5' , 'index7.php');
$menuBar->groupSet('sub group4', 'menu11' , 'index8.php');
$menuBar->groupSet('sub group4', 'menu12' , 'index8.php');
$menuBar->groupSet('sub group6', 'menu13' , 'index4.php');
### settings end ##################################
$menuBar->menuBarDisplay();/* construct menu bar */
### php classes #####################################
class menuBar{
public $menuBarName;
protected $menuList= array();
protected $groupList= array();
protected $menuNameList= array();
protected $menuGroupNum;
protected $menuGroupId;
public function __construct($menuBarNameInput){
$this->menuBarName= $menuBarNameInput;
}
function groupSet($menuGroupInput,$menuNameInput,$menuUrlInput){/* inputs for menu */
$this->menuNameList[]= $menuNameInput;/* add to menu name array */
$$menuNameInput= new menu(); /* new menu instance */
$$menuNameInput->menuName= $menuNameInput;/* load item in menu */
$$menuNameInput->menuUrl= $menuUrlInput; /* load item in menu */
$this->groupList[$menuGroupInput][$menuNameInput]= $$menuNameInput;/* menu group array */
}
function menuDisplay($groupKeyVar){ /* display menus */
foreach($this->groupList[$groupKeyVar] as $menuKey=> $menuValue){
if(array_key_exists($menuKey,$this->groupList)){
$this->menuGroupNum++;
$this->menuGroupId= "groupId".$this->menuGroupNum;
print"<div class= 'menuGroup' onMouseOver= showHide('$this->menuGroupId'); onMouseOut= showHide('$this->menuGroupId'); >";
print $menuKey. "<span style='position:absolute;right:0;'> >></span>";/* pointer arrows for hidden menus */
print"<div class= 'hide' id= '$this->menuGroupId'>";
$this->menuDisplay($menuKey);
print"</div>";
print"</div>";
}else{/* extract attributes from menu class */
print "<div class= 'menu' onMouseOver= \"this.className= 'mouseHov'\" onMouseOut= \"this.className= 'menu'\" onClick=\"location='". $menuValue->menuUrl ."'\" >";
print $menuValue->menuName;
print "</div>";
}
}
}
function menuBarDisplay(){ /* display menu bar */
$this->menuGroupNum= 0;
print "<div class= 'menuBar'>";/* css for menubar */
print "<div class= 'menuBarName'>";/* css for menubar name */
print $this->menuBarName;/* display menu bar name */
print "</div>";
foreach($this->groupList as $menuBarKey=> $menuBarValue){
if(!in_array($menuBarKey,$this->menuNameList)){
print"<div class= 'menuGroup'>";
print $menuBarKey;
print"</div>";
$this->menuDisplay($menuBarKey);
}
}
print "</div>";
}
}
class menu {
public $menuName;
public $menuUrl;
}
### CSS ############################################
?>
<style type="text/css">
<!--
div.menu, .mouseOut, .mouseHov, .show{/* common css */
line-height:1.4em;
text-decoration:none;
text-align:left;
text-indent:10px;
font-weight:200;
font-style:normal;
font-family:arial;
font-size:12px;
color:white;
background-color:royalBlue;
}
div.menuBar{/* css for menu bar */
width:<?php print $menuWidth;?>;
border-top:1px solid black;
border-bottom:1px solid black;
}
div.menuBarName{/* css for menu bar name */
width:<?php print $menuWidth -2 ."px";?>;
line-height:1.5em;
text-align:center;
font-size:14px;
font-weight:400;
font-style:normal;
font-family:helvetica;
color:white;
background-color:royalBlue;
border-left:1px solid black;
border-right:1px solid black;
}
div.menuGroup{/* css for menu groups */
width:<?php print $menuWidth -2 ."px";?>;
line-height:1.6em;
overflow:visible;
position:relative;
cursor:default;
text-align:center;
font-size:12px;
font-weight: 300;
font-style:normal;
font-family:sans-serif ;
color:white;
background-color:cornFlowerBlue;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
div.menu{
width:<?php print $menuWidth -2 ."px";?>;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
/* css for mouse linked to javascript */
.mouseHov{
width:<?php print $menuWidth -2 ."px";?>;
background-color:#0000CD;
color:yellow;
cursor:pointer;
cursor:hand;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
.hide{
display:none;
}
.show{
position:absolute;
z-index:100;
overflow:visible;
top:0;
left:<?php print $menuWidth -2 ."px";?>;
border-bottom:1px solid black;
}
-->
</style>
<script type = "text/javascript">/* javascript */
function showHide(Id){
var group = document.getElementById(Id);
menu_status = group.className
if(menu_status != 'show'){
group.className = 'show';
}else{
group.className = 'hide';
}
}
</script>
<br><br><br>
<a href="http://snippets.bluejon.co.uk/menu/menubar-vert-v1-phpcode.php">Display php source code </a>
</body>
</html>