Developing (v7+)

Drop down menu highlight page with css class?

Permalink February 11, 2011 at 4:27 AM

Hi Im new to concrete and PHP I have managed to put my site into concrete quite successfully so far with little knowledge of any PHP.

Like many others I have used this post to create the dropdown menu.
http://www.codeblog.ch/2009/04/concrete5-drop-down-menu/...
This again works perfectly, however what it doesn't do is highlight the current page.

This is the PHP code form the view.css file

<?php
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   global $c;
   if ($c->isEditMode()) {
      echo("
<div class=\"menu\" style=\"position:inherit!important;\">
<ul class=\"topnav\">");
   }
   else {
      echo("
<div class=\"menu\">
<ul class=\"topnav\">");
   }
   $nh = Loader::helper('navigation');

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

 
 
<?php
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   global $c;
 
   if ($c->isEditMode()) {
      echo("
<div class=\"menu\" style=\"position:inherit!important;\">
<ul class=\"topnav\">");
   }
   else {
      echo("
<div class=\"menu\">
<ul class=\"topnav\">");
   }
 
   $nh = Loader::helper('navigation');
 
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {
 
         $thisLevel = $ni->getLevel();
 
         if ($thisLevel > $lastLevel) {
            echo("<!--[if IE 7]><!--></a><!--<![endif]-->\n<!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->\n
<ul class=\"subnav\">\n");
         } else if ($thisLevel < $lastLevel) {
            for ($j = $thisLevel; $j < $lastLevel; $j++) {
               echo("</a></li>
\n</ul>
\n<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
\n");
            }
         }         
 
         if ($thisLevel == $lastLevel && $i >0) {
            echo "</a></li>
\n";
         }
 
         $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();
         }   
 
         echo '
   <li><a href="'.$pageLink.'">' . $ni->getName();      
 
         $lastLevel = $thisLevel;
         $i++;
      }
   }
 
   $thisLevel = 0;
   for ($i = $thisLevel; $i <= $lastLevel; $i++) {
      echo("</a></li>
</ul>
");
   }
   echo '</div>
';
?>

So what I need to do is assign a class of 'nav-selected' to the page that the viewer is currently on.

Thanks for any help!

Jody

12345j replied on Feb 11, 2011 at 7:13 am Permalink Reply

in main.css do

#nav ul li a.nav-selected {css here }

where #nav is whatever your menus name is.

hadesign replied on Feb 11, 2011 at 7:57 am Permalink Reply

That doesn't seem to make any difference, as the HTML being generated by the PHP code isn't being assigned the class... I can check it in firebug and it has no class...

12345j replied on Feb 11, 2011 at 8:39 am Permalink Reply

#nav should be .menu in the above code

jordanlev replied on Feb 13, 2011 at 3:32 pm Permalink Reply

Hmm... I see that the tutorial you reference is quite old, and doesn't include the code that would give the classes you want. I suggest you don't use that template and instead copy the current concrete5 autonav block template (YOURSITE/concrete/blocks/autonav/view.php).

You can probably keep your CSS (although you may need to rename some selectors like ".menu" to "#nav"), but I think that's going to be much easier than trying to add functionality to your outdated php template.

hadesign replied on Feb 14, 2011 at 4:15 am Permalink Reply

I had a play with my view.php file and the autonav view.php and have managed to make the following hybrid, obviously it could be doing things I dont need it too, but it seems to work just fine

<script type="text/javascript" src="js/nav_script.js"></script>
<?php
   defined('C5_EXECUTE') or die(_("Access Denied."));
      $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   $containsPages = false;
   //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 85 lines. View entire code block.

<script type="text/javascript" src="js/nav_script.js"></script>
 
<?php
   defined('C5_EXECUTE') or die(_("Access Denied."));
      $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   $containsPages = false;
 
 
   //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);
      }
   }    
 
   if ($c->isEditMode()) {
      echo("
<div class=\"menu\" style=\"position:inherit!important;\">
<ul class=\"topnav\">");
   }
   else {
      echo("
<div class=\"menu\">
<ul class=\"topnav\">");
   }
 
   $nh = Loader::helper('navigation');
 
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {
 
         $thisLevel = $ni->getLevel();
 
         if ($thisLevel > $lastLevel) {
            echo("<!--[if IE 7]><!--></a><!--<![endif]-->\n<!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->\n
<ul class=\"subnav\">\n");
         } else if ($thisLevel < $lastLevel) {
            for ($j = $thisLevel; $j < $lastLevel; $j++) {
               echo("</a></li>
\n</ul>
\n<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
\n");
            }
         }         
 
         if ($thisLevel == $lastLevel && $i >0) {
            echo "</a></li>
\n";
         }
 
 
         $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 ($c->getCollectionID() == $_c->getCollectionID()) { 
            echo('<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '">' . $ni->getName() . '</a>');
         } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
            echo('<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '" ' . $target . '>' . $ni->getName() . '</a>');
         } else {
            echo('<li><a href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
         }   
         $lastLevel = $thisLevel;
         $i++;
 
      }
   }
 
   $thisLevel = 0;
   for ($i = $thisLevel; $i <= $lastLevel; $i++) {
      echo("</a></li>
</ul>
");
   }
   echo '</div>
';
?>

The only problem I do have now is that the nav-path-selected class obviously is applied to the home menu item as every other page in the site sits under the home page in the site map. so home is always highlighted in the menu...

jordanlev replied on Feb 14, 2011 at 2:10 pm Permalink Reply

Yes that is a problem I run into a lot. The way I solve it is by changing this line:

} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) {

to this:

} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) && ($_c->getCollectionID() != HOME_CID) ) {

(it's line # 69 in the default template, might be different line # since you modified it though)

-Jordan

Forums

Developing (v7+)

Drop down menu highlight page with css class?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?