Create Dynamic Tree View Menu with PHP, MySQL, CSS

PHP


In this tutorial I will describe how to create dynamic tree view menu with PHP, MySQL, CSS. If you want to display menu items as a tree view structure following tutorial will help you.

Steps to generate tree view menu:

Step 1: First we need to create a table ‘items’ in MySQL database. This table contains four column, The column id is the item id and name is the item name.

--
-- Table structure for table `items`
--

CREATE TABLE IF NOT EXISTS `items` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(200) NOT NULL,
  `title` varchar(200) NOT NULL,
  `parent` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

--
-- Dumping data for table `items`
--

INSERT INTO `items` (`id`, `name`, `title`, `parent`) VALUES
(1, 'ITEM 1', 'ITEM 1', NULL),
(2, 'ITEM 1.1', 'ITEM 1.1', 1),
(3, 'ITEM 1.2', 'ITEM 1.2', 1),
(4, 'ITEM 2', 'ITEM 2', NULL),
(5, 'ITEM 3', 'ITEM 3', NULL),
(6, 'ITEM 3.1', 'ITEM 3.1', 5),
(7, 'ITEM 3.2', 'ITEM 3.2', 5),
(8, 'ITEM 3.2.1', 'ITEM 3.2.1', 7),
(9, 'ITEM 3.2.2', 'ITEM 3.2.2', 7);

Step 2: I have a method generateTreeView() which call recursive to render the items.

function generateTreeView($items, $currentParent, $currLevel = 0, $prevLevel = -1) {
	foreach ($items as $itemId => $item) {
		if ($currentParent == $item['parent_id']) {                       
			if ($currLevel > $prevLevel){
				echo " 

<ol class='tree'> "; 
			}
			
			if ($currLevel == $prevLevel){
				echo " </li>


 ";
			}
			
			$menuLevel = $item['parent_id'];
			if($item['hasChild'] > 0){
				$menuLevel = $itemId;
			}
			
			echo '

<li> <label for="level'.$menuLevel.'">'.$item['name'].'</label><input type="checkbox" id="level'.$menuLevel.'"/>';
			
			if ($currLevel > $prevLevel) { 
				$prevLevel = $currLevel; 
			}
			
			$currLevel++; 
			
			generateTreeView ($items, $itemId, $currLevel, $prevLevel);
			$currLevel--;
		}
	}
	
	if ($currLevel == $prevLevel) echo " </li>

</ol>


 ";
}

Step 3: Create a file index.php and add below code to display tree view.

<html>
<body>
<?php 
$mysqli = mysqli_connect('localhost', 'root', '', 'testing'); 
if (mysqli_connect_errno()) { 
 printf("Connect failed: %s\n", mysqli_connect_error()); exit(); 
} 

$res = mysqli_query($mysqli, "SELECT itm.*, (SELECT COUNT(*) FROM `items` WHERE parent = itm.id) as hasChild FROM `items` as itm"); 

$items = array(); 
while($row = mysqli_fetch_assoc($res)){ 
$items[$row['id']] = array("parent_id" => $row['parent'], "name" => $row['name'], "hasChild" => $row['hasChild']); 
}
?>


<div class="treemenu">
<?php if(count($items) > 0){
	generateTreeView($items, 0);
}
?>
</div>


</body>
</html>

Step 4: Create CSS file style.css and copy below css code.

input{ font-size: 1em; }
ol.tree
{
	padding: 0 0 0 20px;
	width: 320px;
}
li 
{
	position: relative; 
	margin-left: -5px;
	list-style: none;
}
li input
{
	position: absolute;
	left: 0;
	margin-left: 0;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
	height: 1em;
	width: 1em;
	top: 0;
}
li input + ol
{
	background: url(img/arrow-down.png) 45px -3px no-repeat;
	margin: -0.938em 0 0 -44px;
	height: 1em;
}
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label
{
	cursor: pointer;
	display: block;
	padding-left: 24px;
}

li input:checked + ol
{
	background: url(img/arrow-up.png) 45px 4px no-repeat;
	margin: -1.25em 0 0 -44px;
	padding: 1.563em 0 0 80px;
	height: auto;
}
li input:checked + ol > li { display: block; margin: 0 0 0.125em;}
li input:checked + ol > li:last-child { margin: 0 0 0.063em; }

Hope this tutorial will help you to generateĀ Tree View Menu with PHP, MySQL and CSS.

LIVE DEMO

Create Dynamic Tree View Menu with PHP, MySQL, CSS
Create Dynamic Tree View Menu with PHP, MySQL, CSS

Related Tutorials