Developing (v7+)

auto nav, nav selected, nav path selected.

Permalink 1 user found helpful July 01, 2010 at 5:24 AM

Tutorial and solution.

For a long time i have been trying to get the autonav to have nav selected (the current page) different colour - rather than just a gery outline.

Also it would be nice if when your on a sub page it highlited the relevent parent so you know what nav path you are in.
see demo -http://www.test.ecomatt.com

There are a number of posts on this topic but non of them really worked. as the view.php script and any modifications that iv seen took into consideration that the Home page by default is the parent to all pages - thus always being highlighted if you wanted the nav path to be highlighted.

solution: edit the view.php and the template > header-nav.php to allow nav-selected and nav-path-selected but negate (ignore) the home page unless it is the current selected. This solved the issue of the home page always being highlighted when on any other page.

the code:
with thanks to my colleague Russ Curgenven for helping with this.

edit the view.php
here is the full php code

<?php 
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   $containsPages = false;
   $nh = Loader::helper('navigation');
   //this will create an array of parent cIDs 
   $inspectC=$c;
   $selectedPathCIDs=array( $inspectC->getCollectionID() );
   $parentCIDnotZero=true;   
   while($parentCIDnotZero){
      $cParentID=$inspectC->cParentID;
      if(!intval($cParentID)){
         $parentCIDnotZero=false;
      }else{

Viewing 15 lines of 70 lines. View entire code block.

<?php 
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   $containsPages = false;
 
   $nh = Loader::helper('navigation');
 
   //this will create an array of parent cIDs 
   $inspectC=$c;
   $selectedPathCIDs=array( $inspectC->getCollectionID() );
   $parentCIDnotZero=true;   
   while($parentCIDnotZero){
      $cParentID=$inspectC->cParentID;
      if(!intval($cParentID)){
         $parentCIDnotZero=false;
      }else{
         $selectedPathCIDs[]=$cParentID;
         $inspectC=Page::getById($cParentID);
      }
   }    
 
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {
         if (!$containsPages) {
            // this is the first time we've entered the loop so we print out the UL tag
            echo("<ul class=\"nav\">");
         }
 
         $containsPages = true;
 
         $thisLevel = $ni->getLevel();
         if ($thisLevel > $lastLevel) {
            echo("<ul>");
         } else if ($thisLevel < $lastLevel) {
            for ($j = $thisLevel; $j < $lastLevel; $j++) {
               if ($lastLevel - $j > 1) {
                  echo("</li></ul>");
               } else {
                  echo("</li></ul></li>");
               }
            }
         } else if ($i > 0) {
            echo("</li>");
         }
 
         $pageLink = false;
 
         if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
            $subPage = $_c->getFirstChild();
            if ($subPage instanceof Page) {
               $pageLink = $nh->getLinkToCollection($subPage);
            }
         }
 
         if (!$pageLink) {
            $pageLink = $ni->getURL();
         }
 
 
         // this is the new function that allows nav-selected as well as nav-path-selected
 
         if ($ni->isActive($c) || ($c->getCollectionID() == $_c->getCollectionID())) {  
 
 
 
 
            echo('<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
         } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) && $_c->getCollectionID() != 1 ) { 
 
 
            echo('<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
         } else {
 
 
            echo('<li><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
         }   
         $lastLevel = $thisLevel;
         $i++;
 
 
      }
   }
 
   $thisLevel = 0;
   if ($containsPages) {
      for ($i = $thisLevel; $i <= $lastLevel; $i++) {
         echo("</li></ul>");
      }
   }
 
?>

you will then need to edit the css of your theme to get your desired selected and nav path selected colour eg

.nav-path-selected{
color:#fa8f04 !important;
}

and somthing like
#page #central #sidebar ul.nav a.nav-selected {font-weight: bold; color: #fa2516 !important;}
if you want the active page to be a different colour to your nav path highlited pages.

now the header_menu.php
i have added a couples of things in this one to get it working such as adding the array of parent cIDs so just copy past the whole code.

<?php 
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   echo("<ul class=\"nav-header\">");
   $nh = Loader::helper('navigation');
//this will create an array of parent cIDs 
   $inspectC=$c;
   $selectedPathCIDs=array( $inspectC->getCollectionID() );
   $parentCIDnotZero=true;   
   while($parentCIDnotZero){
      $cParentID=$inspectC->cParentID;
      if(!intval($cParentID)){
         $parentCIDnotZero=false;
      }else{

Viewing 15 lines of 60 lines. View entire code block.

<?php 
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   echo("<ul class=\"nav-header\">");
 
   $nh = Loader::helper('navigation');
 
//this will create an array of parent cIDs 
   $inspectC=$c;
   $selectedPathCIDs=array( $inspectC->getCollectionID() );
   $parentCIDnotZero=true;   
   while($parentCIDnotZero){
      $cParentID=$inspectC->cParentID;
      if(!intval($cParentID)){
         $parentCIDnotZero=false;
      }else{
         $selectedPathCIDs[]=$cParentID;
         $inspectC=Page::getById($cParentID);
      }
   }    
 
 
   $isFirst = true;
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {
 
         if ($ni->isActive($c) || strpos($c->getCollectionPath(), $_c->getCollectionPath()) === 0) {
            $navSelected='nav-selected';
         } else {
            $navSelected = '';
         }
 
         $pageLink = false;
 
         if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
            $subPage = $_c->getFirstChild();
            if ($subPage instanceof Page) {
               $pageLink = $nh->getLinkToCollection($subPage);
            }
         }
 
         if (!$pageLink) {
            $pageLink = $ni->getURL();
         }
 
         if ($isFirst) $isFirstClass = 'first';
         else $isFirstClass = '';
 
         echo '<li class="'.$navSelected.' '.$isFirstClass.'">';
 
         //print "{".$selectedPathCIDs."}";
 
         if ($ni->isActive($c) || ($c->getCollectionID() == $_c->getCollectionID())) { 
 
 
            echo('<li class="nav-selected nav-path-selected"><a class="nav-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
         }   
            elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) && $_c->getCollectionID() != 1 ) { 
 
            //print "2";
            echo('<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
 
      } 
         else {
            echo('<li class="nav-path-selected"><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
         }   
 
         //print $ni->getName();
         echo('</li>');
         $isFirst = false;         
      }
   }
 
   echo('</ul>');
   echo('<div class="ccm-spacer">&nbsp;</div>');
?>

and so this is your themes css to get the highlited coloring. best make it the same as the sidebar colour for consistancy.

#page #header ul.nav-header li.nav-selected a { color:#fa2516 !important;}

finally just to say this works and is the only solution so far iv seen that does, if you have easier and cleaner ways of achieving this then please post them here.
also why is this not an option in the auto nav by default? its something that nearly every client of mine has asked for.
i hope you find this helpfull.
let me know if you have any problems.

And if someone can post instruction on adding the css to the auto nav template folders so that users dont need to edit the main theme css that would be nice.
Regards
Matthew

PS make a copy of your autonav block and place in root/blocks/autonav so as not to edit the original block which is located root/concrete/blocks/autonav

pieterbeulens replied on Jan 19, 2011 at 5:31 am Permalink Reply

Hi Ecomatt,

Thanks for the information in this post, very helpful.
But: I would like to show a "breadcrumb" path. So I need to be able to select the parents of a specific page. In my specific case, I have a main menu (that should always show the current parent in a different color, but not Home), a submenu item that should have a specific color and a subpage underneath the submenu, which is not visible in a menu. Would it be possible to edit the code so that home doesn't show up as a parent for all pages? Then my problem would already be solved.

Thanks in advance!

Forums

Developing (v7+)

auto nav, nav selected, nav path selected.

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?