Jump to content

[solved] navigation current


Marty Walker
 Share

Recommended Posts

Hi,

I'm using the code below to generate a basic navigation:

<?php 
foreach($pages->find("parent=/illustration, sort=sort") as $p)
{
echo "<li><a href='{$p->url}'>{$p->title}</a></li>";
}

Works great but I'm trying to work out how to add a class="current" to the LI if that page matches that nav item - and at any level. I've had a go at trying to work out the code in the sitemap template but without any luck.

<?php
$nav = $pages->get("/illustration"); 
$children = $nav->children;

foreach($children as $child) {
	$current = $child === $page->rootParent ? " class='current'" : '';
	echo "<li$current><a href='{$child->url}'>{$child->title}</a></li>";
}

Any thoughts?

Regards

Martin

// adamkiss: added 'php' in your second code block to force code coloring

// apeisa: added [solved] to subject

Link to comment
Share on other sites

If understood right, you need to change

$page->rootParent to $page and everything will work  :)

You get this:

<?php
foreach($children as $child) {
    $current = $child === $page ? " class='current'" : '';
    echo "<li$current><a href='{$child->url}'>{$child->title}</a></li>";
}

// adamkiss: added '<?php' in your block to force code coloring

  • Like 1
Link to comment
Share on other sites

I've made a three level menu using this code, it's simple but it works. It highlights every selected level. Change the variables to fit your own or use mine, whatever suits you.


<?php
       
       echo "<ul>";
       
       $rootPage = wire('pages')->get('/');
       
       foreach($rootPage->children as $menu) {
           $rootclass = $menu === $page->rootParent ? " class='current'" : '';
		echo "<li$rootclass><a href='{$menu->url}'>{$menu->title}</a>";	
           if($menu->numChildren > 0) {
           echo "<ul>";
               foreach($menu->children as $child) {
                   $class = $child === $page ? " class='current'" : '';
				echo "<li$class><a href='{$child->url}'>{$child->title}</a>";
                   if($child->numChildren > 0) {
                       echo "<ul>";
                       foreach($child->children as $grandchild) {
                           $subclass = $grandchild === $page ? " class='current'" : '';
						echo "<li$subclass><a href='{$grandchild->url}'>{$grandchild->title}</a></li>";
                       }
                       echo "</ul>";		
                   }	
                   echo "</li>";
               }
               echo "</ul>";
           }
           echo "</li>";
       }
       echo "</ul>";
       
       ?>

  • Like 1
Link to comment
Share on other sites

stillmovingdesign: If you want to check if any page is one of the pages in path, you can use this code:

<?php
if ($page->parents->has($p)) {
 // This means that page $p is one of the parents of current page ($page)
}

In your example something like this:

<?php 
foreach($pages->find("parent=/illustration, sort=sort") as $p)
{
 if ($page->parents->has($p)) { 
     $class = 'current'; 
 } else { 
     $class = ''; 
 }
 echo "<li class='$class'><a href='{$p->url}'>{$p->title}</a></li>";
}
  • Like 1
Link to comment
Share on other sites

Thanks for the replies. I think I should illustrate more clearly what I'm trying to do.

Here's the development site: http://otoshpw.clientsite.net.au/

My pages are structured thusly:

Home

-Illustration

--Advertising

---client_work_item

---client_work_item

---client_work_item

---client_work_item

-Art

--Limited Edition Prints

etc, etc

I'm not including Home in the navigation I'm generating. What I'd like to do, for example, is whenever I'm in a section/page like Advertising or any page under that, have class='current' apply to that LI.

Regards

Martin

Link to comment
Share on other sites

If I understand correctly, I think this is what you are looking for:

http://processwire.com/talk/index.php/topic,128.msg790.html#msg790

Based on what you've indicated, you'll want to change two things:

1. Currently it's applying the class "on_page" or "on_parent" to the <a> tag rather than the <li> tag. You mentioned you want it on the <li> tag, so you'd move the $class variable from the <a> tag to the <li> tag (which is just 3 characters before it).

2. Since you want the class name to be "current", you'd replace the "on_page" and "on_parent" class names hard coded in there to be "current".

  • Like 1
Link to comment
Share on other sites

Thanks for the replies. I think I should illustrate more clearly what I'm trying to do.

Now that I looked your example I am pretty sure this is what you want (I also edited my previous example a little):

<?php 
foreach($pages->find("parent=/illustration, sort=sort") as $p)
{
  if ($page->parents->has($p)) { 
      $class = 'current'; 
  } else { 
      $class = ''; 
  }
  echo "<li class='$class'><a href='{$p->url}'>{$p->title}</a></li>";
}
  • Like 1
Link to comment
Share on other sites

Thanks for you help and time. It's nearly there except for when I'm on the main Advertising 'list' page. I'm a php ubernoob and I don't understand that code enough. In EE or textpattern this kind of navigation highlighting would take me 2 seconds (with sections and url_segments). I think I'll just hard code it and write a load of CSS. Thanks again. :)

Link to comment
Share on other sites

I forget to check if it is current page. Just add  || $p === $page to your if clause and it should work as expected:

<?php 
foreach($pages->find("parent=/illustration, sort=sort") as $p)
{
 if ($page->parents->has($p) || $p === $page) { 
     $class = 'current'; 
 } else { 
     $class = ''; 
 }
 echo "<li class='$class'><a href='{$p->url}'>{$p->title}</a></li>";
}

I know that coding navigation is not the easiest job in the world if you are not experienced coder. I think we should have some more code snippets shipped with demo site or some kind of code snippets area on website. Or FAQ or Wiki...

  • Like 3
Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...