Jump to content
joe_ma

Custom Navigation: display subnavigation only for certain items

Recommended Posts

Hi

Trying to setup a customized navigation.

Page tree looks like this:

home
– upcoming exhibitions
–– exhibition 1
–– exhibition 2
–– …
– about
– archive
–– arch 1
–– arch 2
–– …
– impressum

Now I'd like to have a navigation, that lists only the subnav of "upcoming exhibitions" but not the one of "archive".

I modified a snippet I found here in the forum. It looks like this so far:

<nav class="mainNav">
<ul>
	<?php
		$homepage = $pages->get('/'); 
		
		//	first item links to the homepage 
		echo "<li><a href='$homepage->url'>Aktuelle Ausstellung / current exhibition</a></li>";

		$children = $homepage->children();

		// render an <li> for each top navigation item
		foreach ( $children as $child ) {
			if ( $child->id == $page->rootParent->id ) {
				// this $child page is currently being viewed (or one of it's children/descendents)
				// so we highlight it as the current page in the navigation
				echo "<li class='active'><a href='$child->url'>$child->title</a></li>";

				// if upcoming page has children, list them
				} elseif($child->id == 1020 && count($child->children)){
					
						// build the subnav and list all items
						echo "<li><a href='$child->url'>$child->title</a><ul class='upcoming'>";
						foreach($child->children as $c){
							echo "<li><a href='$c->url'>$c->title<br>{$c->date_from}–{$c->date_to}</a></li>";
						}	
						echo "</ul><li>";

					// otherwise list only main items
					} else {	
						echo "<li><a href='$child->url'>$child->title</a></li>";
					}
				}
				?>
			</ul>
		</nav>

This puts out the navigation as wanted, but only for main items (see fig. nav-open.png).

As soon as "upcoming exhibitions" or one of its children is active, the navigation collapses (see fig. nav-closed.png).

I cannot find out, where I went the wrong way.

Thanks for help.

nav-closed.png

nav-open.png

Share this post


Link to post
Share on other sites

Where do you want to place this navigation? In root, or only in the exhibition pages?

Share this post


Link to post
Share on other sites
$home = $pages->get('/');
foreach($home->children as $child) {
	$content .= "<a href='{$child->url}'>{$child->title}</a><br>";
	if($child->id !== 1035) {
		if($child->hasChildren) {
			foreach($child->children as $child2) {
				$content .= "- <a href='{$child2->url}'>{$child2->title}</a><br>";
			}
		}
	}
}

page id 1035 would be archive parent

  • Like 3

Share this post


Link to post
Share on other sites

Thanks a lot.

Works like a charm and is – of course – much more elegant than my gobbledigook.

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By louisstephens
      I have not really had to make a site from the ground up in quite a bit as I have been mainly focused on internal apps using processwire. However, I have now been tasked with creating a site and I was quite excited. I started down the path of using bulma as it seemed like a good fit. I got the whole site coded statically and was not moving on to porting it over to processwire. I pretty much have the the whole site figured out save for tackling the navbar. My current navbar is set up as so:
      <section id="nav"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item is-size-3 has-text-primary" href="#">Logo goes here</a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-end"> <a class="navbar-item">Home</a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">Services</a> <div class="navbar-dropdown"> <a class="navbar-item">Subpage</a> <a class="navbar-item">Subpage</a> <a class="navbar-item">Subpage</a> <a class="navbar-item">Subpage</a> </div> </div> <a class="navbar-item">Gallery</a> <a class="navbar-item">Contact Us</a> </div> </div> </nav> </section> I guess my question is how would you go about setting this up in processwire? All pages will obviously be subpages of Home with the following structure
      Home
      --Services
      ----Subpage
      ----Subpage
      ----Subpage
      ----Subpage
      --Gallery
      --Contact Us
       
    • By anderson
      Hi,
      Please take a look at this:
      https://templatemag.com/demo/Good/
      The upper nav bar, including dropdowns like "pages" and "portfolios", what do you call this whole thing? At first I guess it's called "dropdown nav bar", but seems not.
      AND of course, what's the simplest way/module to achieve this in PW?
      Thanks in advance.
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I was wondering if there is a way to restrict user navigation to specific pages.
      Login (home.php - not to be displayed)
          |__  About (not to be displayed)
          |__  Clubs (not to be displayed)
          |            |__ Club (to be displayed)
          |                       |__  Club Members (to be displayed)
          |__ League (not to be displayed)
          |            |__Season (not to be displayed)
          |                       |__  Match (not to be displayed)
          |__  News (blog.php -  to be displayed)
          |
      etc, etc
      Based on the above the navigation needs to appear simply as:
      ---------------------------------------------------------------------------
                           Club    Club Members    News    
      ---------------------------------------------------------------------------
      Any thoughts appreciated.
    • By JimSee
      FIRST: I am brand new and am trying to add a Navigation Tree to the beginner site. When I put renderNavTree($page, 4) into _head.php, I get a menu list like the graphic.
      This is great EXCEPT, I don't know how to make a horizontal menu out of it with CSS. Can someone help (please) or direct me to an example of the css?
      SECOND: That list is great for the Home page but when I click "program," the list only shows:

      How can I get the whole (visible) menu on every page?
      Thank you in advance! jim
       
    • By VirtuallyCreative
      Hello!

      I'm currently trying to create a navigation menu using list items and I'm having issues pulling children pages properly and I'm hoping someone can point me in the right direction.
      The code below was modified from the default (intermediate) template that outputs child pages of the main page. (Home -> About, SiteMap).

      But one of the children (About page), also has 3 child pages and I'm not sure how to also get those 3 additional child pages to display as well within the same foreach statement. Because of the way the menu is structured I would need to change the output of the HTML for any Child Page with additional Children (it nests underneath in the nav).
      Currently only Home, About and Sitemap appear and I want to also include the child pages of About nested properly within the navigation.
       
       Current code, only accounting for Homepage and it's children. Works great and as expected:
      Home About Sitemap <!-- START SIDEBAR MENU --> <div class="sidebar-menu"> <!-- BEGIN SIDEBAR MENU ITEMS--> <ul class="menu-items"> <?php // top navigation consists of homepage and its visible children foreach($homepage->and($homepage->children) as $item) { echo "<li class=''><a href='$item->url'><span class='title'>$item->title</span>"; // Grab first two letters of page to output for menu icon and set active class if($item->id == $page->rootParent->id) { echo "</a><span class='bg-success icon-thumbnail'>"; echo substr($item->title, 0, 2); echo "</span></li>"; } else { echo "</a><span class='icon-thumbnail'>"; echo substr($item->title, 0, 2); echo "</span></li>"; } } ?> </ul> <div class="clearfix"></div> </div> <!-- END SIDEBAR MENU -->  
      Modified not working markup trying to also nest children of a child:
      Home About Page1 Page2 Page3 SiteMap <!-- START SIDEBAR MENU --> <div class="sidebar-menu"> <!-- BEGIN SIDEBAR MENU ITEMS--> <ul class="menu-items"> <?php // top navigation consists of homepage and its visible children foreach($homepage->and($homepage->children) as $item) { echo "<li class=''><a href='$item->url'><span class='title'>$item->title</span>"; // check if a top navigation item's visible children has child pages // if true, change markup of top navigation item to account for nested children if(($homepage->children)->hasChildren()) { //change menu item to menu item /w sub-items echo "<li class=''><a href='javascript:;'><span class='title'>$item->title</span> <span class='arrow'></span></a><span class='icon-thumbnail'><i class='pg-form'></i></span>"; //loop through the top navigation child's children pages and output them as nested menu item foreach($child->children as $childitem) { echo "<ul class='sub-menu'>"; echo "<li class=''><a href='$childitem->url'>$childitem->title</a>"; echo "</a><span class='icon-thumbnail'>"; echo substr($childitem->title, 0, 2); echo "</span></li></ul></li>"; } } //step back out and continue listing Homepage Children pages if($item->id == $page->rootParent->id) { echo "</a><span class='bg-success icon-thumbnail'>"; echo substr($item->title, 0, 2); echo "</span></li>"; } else { echo "</a><span class='icon-thumbnail'>"; echo substr($item->title, 0, 2); echo "</span></li>"; } } ?> </ul> <div class="clearfix"></div> </div> <!-- END SIDEBAR MENU --> Any insights would be appreciated! I'm also sure the php code itself can be refactored better but still learning for now.

×
×
  • Create New...