pure php or css - tree menu show only active nodes - php

Question

I have build a tree menu in PHP, using a recursive function, wich works ok.
My menu structure is something like this:
Root
----Categ1
-------Categ11
---------Categ111
---------Categ112
-------Categ12
---------Categ121
---------Categ122
----Categ2
----Categ3
----Categ4
I am using bootstrap.
I need to show only the active nodes and the top level childrens. For my example I need the menu to be opened like this (I clicked on Categ 112 and subcategories of Categ12 to be hidden):
Root
----Categ1
-------Categ11
---------Categ111
---------Categ112
-------Categ12
----Categ2
----Categ3
----Categ4
The php function that generate my menu tree is:
/** show all subcategs of the selected category
* #param $iCategIDSelected
* #param null $arrCategs
* #param bool $bIsOnTheLeaf
* #return string
*/
static function getHTMLCategsForMenuBySelected($iCategIDSelected, $arrCategs=null, $arrAllParents=null){
$bIsVisible = false;
if($arrCategs == null){
$oController = new ShopcategoriesController();
$arrCategs = $oController->getShopCategories(0);
}
//find if we make the current node visible or not
//if the current node id is on the parent's of the selected node then make it visible
//take all nodes starting with root until the selected node
if($arrAllParents==null){
$arrAllParents = ShopcategoriesController::getParentsBySelectedCategID($iCategIDSelected,$arrCategs);
}
$sHTML = '<ul class="nav nav-pills nav-stacked">';
foreach($arrCategs as $oneCateg){
//find if is active or not
$bActiveClass = '';
if(in_array($oneCateg['id'],$arrAllParents)){$bActiveClass = 'active';}
$sHTML .= '<li class="'.$bActiveClass.'">';
$sHTML .= ''.ucfirst($oneCateg['name']).'';
if(count($oneCateg['subCategories'])>0){
$sHTML .= ShopcategoriesController::getHTMLCategsForMenuBySelected($iCategIDSelected, $oneCateg['subCategories'],$arrAllParents);
$sHTML .= '</li>';
}else{
$sHTML .= '';
}
}
$sHTML .= '</ul>';
return $sHTML;
}
The html structure is:
ul.nav > li > a{
padding-left: 30px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="menuCateg">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a class="list-group-item" href="http://localhost:8000/showcategory/1">Categ1</a>
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a class="list-group-item" href="http://localhost:8000/showcategory/2">Categ11 </a>
<ul class="nav nav-pills nav-stacked">
<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/3">Categ111</a></li>
<li class="active"><a class="list-group-item" href="http://localhost:8000/showcategory/4">Categ112</a></li>
</ul>
</li>
<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/18">Categ12</a></li>
</ul>
</li>
<li class="">
<a class="list-group-item" href="http://localhost:8000/showcategory/6">Categ2</a>
<ul class="nav nav-pills nav-stacked">
<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/3">Categ121</a></li>
<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/4">Categ122</a></li>
</ul>
</li>
<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/8">Categ3</a>
<li class=""><a class="list-group-item" href="http://localhost:8000/showcategory/8">Categ4</a>
</ul>
</div>

Answer 1

I found the solution in order to generate a menu tree with multilevel subcategories and show only the levels that have been selected (without all children from the tree).
THE TRICK were those lines:
if( //if the current subcateg parentid is on the parent that must be active then show his children's otherwise do not
( in_array($oneCateg['parentid'],$arrAllParents) && in_array($oneCateg['id'],$arrAllParents))
)
Thank you for your help!
/** show all subcategs of the selected category
* #param $iCategIDSelected
* #param null $arrCategs
* #param bool $bIsOnTheLeaf
* #return string
*/
static function getHTMLCategsForMenuBySelected($iCategIDSelected, $arrCategs=null, $arrAllParents=null, $iLevel=0){
$bIsVisible = false;
if($arrCategs == null){
$oController = new ShopcategoriesController();
$arrCategs = $oController->getShopCategories(0);
}
//find if we make the current node visible or not
//if the current node id is on the parent's of the selected node then make it visible
//take all nodes starting with root until the selected node
if($arrAllParents==null){
$arrAllParents = ShopcategoriesController::getParentsBySelectedCategID($iCategIDSelected,$arrCategs);
$arrAllParents[]=0;
}
$iLevel++;
$sHTML = '<ul class="nav nav-pills nav-stacked level_'.$iLevel.'">';
foreach($arrCategs as $oneCateg){
//find if is active or not
$bActiveClass = '';
if(in_array($oneCateg['id'],$arrAllParents)){$bActiveClass = 'active';}
$sHTML .= '<li class="'.$bActiveClass.'">';
$sHTML .= ''.ucfirst($oneCateg['name']).'';
if(count($oneCateg['subCategories'])>0){
if( //if the current subcateg parentid is on the parent that must be active then show his children's otherwise do not
( in_array($oneCateg['parentid'],$arrAllParents) && in_array($oneCateg['id'],$arrAllParents))
) {
$sHTML .= ShopcategoriesController::getHTMLCategsForMenuBySelected($iCategIDSelected, $oneCateg['subCategories'], $arrAllParents, $iLevel);
$sHTML .= '</li>';
}
}else{
$sHTML .= '';
}
}
$sHTML .= '</ul>';
return $sHTML;
}

Answer 2

you should add a class when it's not active like .not-active.
.not-active{
display: none;
}
EDIT
I'm not sure to have understood correctly your point but how about this way:
foreach($arrCategs as $oneCateg){
//find if is active or not
$bActiveClass = '';
if(in_array($oneCateg['id'],$arrAllParents)){ //modified
$bActiveClass = 'active';
}else{
$bActiveClass = 'not-active';
}
$sHTML .= '<li class="'.$bActiveClass.'">';
$sHTML .= ''.ucfirst($oneCateg['name']).'';
if(count($oneCateg['subCategories'])>0){
$sHTML .= ShopcategoriesController::getHTMLCategsForMenuBySelected($iCategIDSelected, $oneCateg['subCategories'],$arrAllParents);
$sHTML .= '</li>';
}else{
$sHTML .= '';
}
}