Jump to content


Photo

How can I keep second level menu item active on third level subpage?

solved

  • Please log in to reply
13 replies to this topic

#1 ljones

ljones

    Distinguished Member

  • Members
  • PipPip
  • 27 posts
  • 2

Posted 19 February 2012 - 02:22 PM

I am working on a simple photo gallery site where I have

level one: Home, Galleries, Statement

level two: Set 1, Set 2, Set 3 etc. (under Galleries)

level three: a template that cycles through the child photos of Set 1, Set 2 or Set 3 set by using this code:


if ($page->prev->id) {
  echo "<a href='{$page->prev->url}'></a>";
} else {
  $lastpage = $page->siblings->last();
  echo "<a href='$lastpage->url'></a>";
}

echo "<a href='{$page->parent->url}'></a>";

if ($page->next->id) {
  echo "<a href='{$page->next->url}'></a>";
} else {
  $firstpage = $page->siblings->first();
  echo "<a href='$firstpage->url'></a>";
}


echo "<img class='centered' src ='{$page->images->first()->url}'";
The level one and two navigation menus show the the active links as "on" and highlighted according to my CSS declarations at level two. For example:

Home Galleries Statement

[Set One] [Set Two] [Set Three]

[Thumbnail 1] [Thumnail 2] [Thumbnail 3]

But clicking on the Thumnail 2 and cycling through turns off the Set Two link:


Home Galleries Statement

[Set One] [Set Two] [Set Three]

<prev [image detail] next>

What do I need to add or change to make the second level navigation show as being "on"?

This is the code I am using in the header included in all templates at level 1, 2, and 3:


<div id="primary-menu">
	<?php
  
	// Create the top navigation list by listing the children of the homepage.
	// If the section we are in is the current (identified by $page->rootParent)
	// then note it with <a class='on'> so we can style it differently in our CSS.
	// In this case we also want the homepage to be part of our top navigation,
	// so we prepend it to the pages we cycle through:
  
	$homepage = $pages->get("/");
	$children = $homepage->children;
	$children->prepend($homepage);

	foreach($children as $child) {
	 $class = $child === $page->rootParent ? " class='on'" : '';
	 echo "<a$class href='{$child->url}'>{$child->title}</a>";
	 echo " &nbsp; &nbsp; &nbsp; ";
	}
	
	?>
  
	</div>
			   <div id="secondary-menu">
  
	<?php
	 echo "<hr>";
	// Output subnavigation
	//
	// Below we check to see that we're not on the homepage, and that
	// there are at least one or more pages in this section.
	//
	// Note $page->rootParent is always the top level section the page is in,
	// or to word differently: the first parent page that isn't the homepage.
	if($page->path != '/' && $page->rootParent->numChildren > 0) {
	 // We have determined that we're not on the homepage
	 // and that this section has child pages, so make navigation:
	
	 foreach($page->rootParent->children as $child) {
	  $class = $page === $child ? " class='on'" : '';
	  echo "<a$class href='{$child->url}'>{$child->title}</a>";
	  echo " &nbsp; &nbsp; &nbsp; ";
	 }
echo "<hr>";
		 }
   ?>


#2 ljones

ljones

    Distinguished Member

  • Members
  • PipPip
  • 27 posts
  • 2

Posted 19 February 2012 - 05:55 PM

Found a solution here: http://processwire.c...__fromsearch__1

#3 gebeer

gebeer

    Distinguished Member

  • Members
  • PipPipPipPip
  • 100 posts
  • 47

  • LocationGermany/Thailand

Posted 23 November 2013 - 07:06 AM

Hello all,

 

I'm new here and this is my first post. Found PW a couple of weeks ago and working on my first project. So far I can say it is fun developing with PW. I like the whole concept, the documentation is great and the forum is the best I have seen so far.

 

I had the same problem with highlighting parent menu items when one of their children is the current page. Reading this thread and following the link in previous post, I came up with a solution that is working great for me. Here's my piece of code:

foreach($page->rootParent->children as $child) {

	$class = $page === $child || $child->children->has($page) ? " class='active'" : ''; ?>
						
	<li><a<?php echo $class; ?> href='<?php echo $child->url ?>'><?php echo $child->title ?></a></li>
<?php } ?>

The bit that does the highlighting for parent menu items is

$child->children->has($page)

As easy as that  :)

 

I was first trying to solve it with native PHP strpos funtion before I realised that the PW API offers the has() function which really makes life a lot easier.

 

If there are better ways to achieve the same goal, I would love to learn them.

 

Cheers

gerhard



#4 diogo

diogo

    Hero Member

  • Moderators
  • 2,897 posts
  • 2302

  • LocationPorto, Portugal

Posted 24 November 2013 - 04:17 AM

You can also test for the pages parents $page->parents->has($child)

#5 gebeer

gebeer

    Distinguished Member

  • Members
  • PipPipPipPip
  • 100 posts
  • 47

  • LocationGermany/Thailand

Posted 24 November 2013 - 04:41 AM

Thank you diogo for the insight.

 

I was thinking top to bottom. Your solution looks more logical, though.

 

But all roads lead to rome, as they say  ;)



#6 BFD Calendar

BFD Calendar

    Sr. Member

  • Members
  • PipPipPipPip
  • 129 posts
  • 25

  • LocationBelgium

Posted 29 November 2013 - 08:45 AM

In the same line of thought.... I have a menu with months and a submenu with days for every month. The idea is to click on a month's name, then a day's number and see a list of pages that have a matching 'month' and 'day' field. 'months' is a parent with 12 children (january, february,....), every month is a parent with 29, 30 or 31 children (january_01, january_02,....).

When I'm on the 'months' page I see the '12-months' menu, when I click on a month I see the 'days menu'. But when I click on a day, the 'days menu' disappears. While the list of items for that month and day shows up correct.

In the code below, where is my 'days menu' disappearing?

<!-- NAVIGATION FOR MONTHS -->
	<div>
	<ul id='topnavmonths'>
	<?php			
	$monthpage = $pages->get("/events/months/"); 
	$children = $monthpage->children;
	foreach($children as $child) {
	$class = $child === $page ? " class='on'" : '';
	echo "<li><a$class href='{$child->url}'>{$child->title}</a></li>";
	};
	?>
	</ul>
	</div>
	<br>
<!-- NAVIGATION FOR DAYS -->
	<div>
	<ul id='topnavmonths'>
	<?php
	if ($page->parent->name==months) {
	$daypage = $pages->get("/events/months/$page->name/");
	}
	else {
	$daypage = $pages->get("/events/months/$page->parent->name/");
	};
	$children = $daypage->children;	
	foreach($children as $child) {
	$class = $child === $page ? " class='on'" : '';
	echo "<li><a$class href='{$child->url}'>{$child->bfd_day->title}</a></li>";
	};
	?>
	</ul>
	</div>

For a (not) working example: http://www.birthfact...esswire/events/



#7 gebeer

gebeer

    Distinguished Member

  • Members
  • PipPipPipPip
  • 100 posts
  • 47

  • LocationGermany/Thailand

Posted 29 November 2013 - 09:49 AM

@BFD Calendar

 

what is the $page->parent->name, when you are on a days page?



#8 BFD Calendar

BFD Calendar

    Sr. Member

  • Members
  • PipPipPipPip
  • 129 posts
  • 25

  • LocationBelgium

Posted 29 November 2013 - 10:15 AM

When I'm on '/events/months/january/january-02/' $page->parent->name=january

 

I added a bit of code on the page to make it visible:

	<?php echo "<br><br>page name = {$page->name} / parent name = {$page->parent->name}<br>";
	 if ($page->parent->name==months) {
	 echo "parent=/months/<br>";
	 }
	 elseif ($page->parent->name==january) {
	 echo "parent=/january/"; 
	 }
	 else {
	 echo "nope";
	 };
	 ?>


#9 gebeer

gebeer

    Distinguished Member

  • Members
  • PipPipPipPip
  • 100 posts
  • 47

  • LocationGermany/Thailand

Posted 29 November 2013 - 10:54 AM

Try changing this line in your code

$daypage = $pages->get("/events/months/$page->parent->name/");

to this

$daypage = $page->parent;

Give it a try and let us know.



#10 BFD Calendar

BFD Calendar

    Sr. Member

  • Members
  • PipPipPipPip
  • 129 posts
  • 25

  • LocationBelgium

Posted 29 November 2013 - 11:45 AM

Huh, less is more I guess. Anyway, it works. Thank you!

 

One more (additional) question: how do I keep the 'class' 'on' for months when events are shown?

$class = $child === $page ? " class='on'" : '';

Keeps the parent 'on' but it should keep the parent of parent 'on' as well to have a better idea of the navigation.

 

ps @ gebeer -> http://www.birthfact...ngkok-thailand/



#11 gebeer

gebeer

    Distinguished Member

  • Members
  • PipPipPipPip
  • 100 posts
  • 47

  • LocationGermany/Thailand

Posted 29 November 2013 - 12:07 PM

Glad it helped.

 

For keeping class on for month when you are on the day page:

$class = $page === $child || $child->children->has($page) ? " class='active'" : ''; 

Worked fine for my case.

Or the other way around like diogo suggested a few posts above:

 

$class = $page === $child || $page->parents->has($child) ? " class='active'" : ''; 

Hope it helps.

 

PS: nice picture from Bkk

 



#12 BFD Calendar

BFD Calendar

    Sr. Member

  • Members
  • PipPipPipPip
  • 129 posts
  • 25

  • LocationBelgium

Posted 30 November 2013 - 08:04 AM

This doesn't change anything. The status of 'events' is 'on', months are off and days is 'on'. Same with all three solutions, my original one, yours and Diogo's.

 

As soon as I've completed some more coding I'll start adding more content, including more BKK pictures into 'the eyes'.



#13 gebeer

gebeer

    Distinguished Member

  • Members
  • PipPipPipPip
  • 100 posts
  • 47

  • LocationGermany/Thailand

Posted 01 December 2013 - 05:49 PM

Where did you add the code?

 

It should go into the code for the month menu

<!-- NAVIGATION FOR MONTHS -->
	<div>
	<ul id='topnavmonths'>
	<?php			
	$monthpage = $pages->get("/events/months/"); 
	$children = $monthpage->children;
	foreach($children as $child) {
	$class = $page === $child || $child->children->has($page) ? " class='on'" : '';
	echo "<li><a$class href='{$child->url}'>{$child->title}</a></li>";
	};
	?>
	</ul>
	</div>

$page and $child represent the month page that you are currently on.

 

$child->children represents the day pages of that month.

 

has($page) now checks if the page we are currently on is in the day pages of the month we are in.

 

This should do the trick.



#14 BFD Calendar

BFD Calendar

    Sr. Member

  • Members
  • PipPipPipPip
  • 129 posts
  • 25

  • LocationBelgium

Posted 01 December 2013 - 05:58 PM

Stupid Me

 

But hey, another lesson learned!







Also tagged with one or more of these keywords: solved

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users