CSS Class in Recursive Navigation

[skovar]

Hello,

I found a lot of great examples of recursive navigation in the forums and have based my example here off of those. I'm having trouble adding an active class to the menu. Ultimately, I'd like to add the active class to the active parent and child item, but I've started with just trying to get the parent to have an active class. Although the menu renders as desired, I must be missing something here with adding the class: 

<?php

function listChildrenTree($children) {

    echo "<ul class='span-24'>";
    foreach($children as $child) {
        if($child === $page) $class = " current"; else $class= ' ';
        echo "<li class=' $class'><a href='{$child->url}'>{$child->title}</a> ";
        if($child->numChildren && $child->template != 'page-article') listChildrenTree($child->children); 
        echo "</li>";
    }
    echo "</ul>";
}

listChildrenTree($pages->get('/')->children);

?>
 

 

Thanks for any suggestions you may be able to provide. 

[diogo]

Hi skovar. You. can't use the variable $page inside a function because it's out of scope. use wire('pages') instead.

[skovar]

Thank you Diogo, that's good to know. You set me on the right path and I've got it working now. I don't know if it's elegant or not, but I declared the variables outside the function:

<?php

function listChildrenTree($children, $currentPage, $parentPage) {

    echo "<ul class='span-24'>";
    
    foreach($children as $child) {
        
         $class = $child === $currentPage ? "current" : '';
         $subclass = $child === $parentPage ? "current" : '';
      
        echo "<li class=' $class $subclass '><a href='{$child->url}'>{$child->title}</a> ";
        if($child->numChildren && $child->template != 'page-article') listChildrenTree($child->children); 
        echo "</li>";
     
    }
    echo "</ul>";
}

$currentPage = $page;
$parentPage = $page->parent;

listChildrenTree($wire->pages->get('/')->children, $currentPage, $parentPage);

?>
 

[pogidude]

try this for finding your $class. and you'll still want to pass $currentPage to succeeding calls to listChildren. and you probably don't need to figure out $subclass. I'm not sure though.

if($child === $currentPage){
   //this is if the $currentPage is on the first level right after home
   //OR if the $currentPage is 2+ levels down
   $class = "current";

} elseif( $child === $currentPage->rootParent ){
   //this should only fire on the first level.
   //look for the rootParent of the $currentPage
   //this is if the $currentPage is 2+ levels down and we are on first level.
   //this should assign "current" to the rootPage - page nearest the home
   $class = "current";
} else {
   $class = "";
}