Create menu html from php array recursively
Posted: Sat Oct 31, 2009 6:22 pm
I'm trying to iterate through an array creating an unordered list for the top(root) links, then create a menu for each of those top links (sub-categories), and within that menu they have a class name that points to other sub categories. And on and on. I'll list the php array, the code I've been trying to work with and the html that I need to create:
1.) the array:
2.) the php function code:
3.) the html needed to create:
Thanks for any help.
1.) the array:
Code: Select all
Array
(
[0] => Array
(
[category_id] => 4
[parent_id] => 3
[name] => T-Shirts
[url_path] => t-shirts.html
[is_active] => 1
[position] => 1
[level] => 2
[children] => Array
(
[0] => Array
(
[category_id] => 6
[parent_id] => 4
[name] => Long sleeve
[url_path] => t-shirts/long-sleeve.html
[is_active] => 1
[position] => 1
[level] => 3
[children] => Array
(
[0] => Array
(
[category_id] => 8
[parent_id] => 6
[name] => Football Jersey's
[url_path] => t-shirts/long-sleeve/football-jersey-s.html
[is_active] => 1
[position] => 1
[level] => 4
[children] => Array
(
[0] => Array
(
[category_id] => 12
[parent_id] => 8
[name] => Winter
[url_path] => t-shirts/long-sleeve/football-jersey-s/winter.html
[is_active] => 1
[position] => 1
[level] => 5
[children] => Array
(
)
)
)
)
)
)
[1] => Array
(
[category_id] => 13
[parent_id] => 4
[name] => Short Sleeve
[url_path] => t-shirts/short-sleeve.html
[is_active] => 1
[position] => 3
[level] => 3
[children] => Array
(
)
)
)
)
[1] => Array
(
[category_id] => 5
[parent_id] => 3
[name] => Hats
[url_path] => hats.html
[is_active] => 1
[position] => 2
[level] => 2
[children] => Array
(
[0] => Array
(
[category_id] => 9
[parent_id] => 5
[name] => Baseball
[url_path] => hats/baseball.html
[is_active] => 1
[position] => 1
[level] => 3
[children] => Array
(
[0] => Array
(
[category_id] => 10
[parent_id] => 9
[name] => Summer
[url_path] => hats/baseball/summer.html
[is_active] => 1
[position] => 1
[level] => 4
[children] => Array
(
)
)
[1] => Array
(
[category_id] => 14
[parent_id] => 9
[name] => Winter
[url_path] => hats/baseball/winter.html
[is_active] => 1
[position] => 2
[level] => 4
[children] => Array
(
)
)
)
)
)
)
)2.) the php function code:
Code: Select all
<?
//I'm calling the function from another file like this:
$this->drawCatTree($rootCategory)
$html='';
$html = '<ul id="nav" class="myMenu rootVoices">
<!-- start horizontal menu -->';
$html.= $this->listHtml;
$html.='</ul>';
$html.=$this->menuHtml;
echo $html;
?>
<?
class navigation
{
//This code in in a class:
public $listHtml='';
public $menuHtml='';
public $subMenuHtml='';
public function drawCatTree($category, $level=2, $catId='', $parentId=''){
$html='';
//------------
//print_r($category); exit();
foreach($category AS $child){
//print_r($child); exit();
// check for top level (ul)
if($child['level']==2){
// check for children
$menu=(!empty($child['children']))?' {menu: \'menu_'.$child['category_id'].'\'}':'';
$this->listHtml.='<li class="rootVoice '.$menu.'" ><a href="'.$child['url_path'].'"><span>'.$child['name'].'</span></a></li>';
// check children
if(!empty($child['children'])){
// print '<pre>';
// print_r($child['children']);
// print '</pre>';
$this->drawCatTree($child['children'], 3, $child['category_id']);
}
// check for second level (main menu)
}elseif($child['level']==3){
// print '<pre>';
// print_r($child);
// print '</pre>';
$htmlMenu='';
$htmlMenu.='<div id="menu_'.$catId.'" class="menu" style="display: none;">';
//if(!empty($child['children'])){
//foreach($child['children'] AS $child){
$htmlMenu.='<a href="'.$child['url_path'].'">'.$child['name'].'</a>';
//}
//}
$htmlMenu.='</div>';
$this->menuHtml.=$htmlMenu;
$catId++;
// all sub-menus
}else{
}
}
return $html;
}
}
3.) the html needed to create:
Code: Select all
<!-- main links -->
<ul class="myMenu rootVoices" id="nav">
<li class="rootVoice {menu: 'menu_4'}" menu="menu_4" nowrap="nowrap"><a href="t-shirts.html" class=""><span class="">T-Shirts</span></a></li>
<li class="rootVoice {menu: 'menu_5'}" menu="menu_5" nowrap="nowrap"><a href="hats.html" class=""><span class="">Hats</span></a></li>
</ul>
<!-- main menus -->
<div style="display: none;" class="menu" id="menu_4">
<a class="{menu: 'sub_menu_1'}" href="t-shirts/long-sleeve.html">Long sleeve</a>
<a class="{menu: 'sub_menu_2'}" href="t-shirts/short-sleeve.html">Short Sleeve</a>
</div>
<div style="display: none;" class="menu" id="menu_5">
<a class="{menu: 'sub_menu_3'}" href="hats/baseball.html">Baseball</a>
</div>
<!-- sub-menus -->
<div class="menu" id="sub_menu_1" style="display: none;">
<a class="{menu:'menu_4'}" href="black.html">Black</a>
</div>
<div class="menu" id="sub_menu_2" style="display: none;">
<a class="{menu:'menu_5'}" href="white.html">White</a>
</div>
<div class="menu" id="sub_menu_3" style="display: none;">
<a href="blue.html">Blue</a>
</div>
Thanks for any help.