renderNavTree($page, 4)

[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

Spoiler

 

 

[rick]

Hi @JimSee,

Welcome to the forums!

When you say that you are brand new, are you referring to ProcessWire, or to coding, or all of the above? To answer your question depends upon which css you want to use, as there are many to choose from. Google 'mobile first css grid' to get a selection (assuming you want your site viewable on different devices).  Whichever one you select will have examples of how to accomplish your desired menu. For example, here is a screenshot using bootstrap. (I'm not endorsing it, just using it as an example.)

Post back here if you have questions and someone will jump in and help with the coding.

[JimSee]

Thank you for your quick response, Rick.  I am brand new to ProcessWire.  I am very familiar with html. I  can spell PHP and CSS. However, coding them is a different matter entirely.

As far as CSS for the navigation tree, I suspect that some one (or many) have used ProcessWire in this way...so an example or two would be great.

BIG Question: How do I get a complete (visible) menu on every page? I am using the function renderNavTree from the out-of-the box file _func.php (In other words, every page would have a menu like the one in the graphic in my first post...although the active page would have a different class.)

Thanks again to you, Rick...and to everyone who chooses to help! jim

 

[rick]

Hi Jim,

In my case I'm glad php is a palindrome. Ha!

I modified the rendernavtree function for my needs (shown below, using bootstrap) which produces the menu shown in the image I posted earlier. I've gone through and added comments that may help.

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
            </button>
            <a class="navbar-brand" href="<?php echo $pages->get('/')->url ?>"><img src="<?php echo $config->urls->templates ?>images/processwire.svg" alt="" /></a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
<?php
			// Get the top-level page
			$menuitems = $pages->get('/');
			// iterate through our top-level page and it's children
            foreach( $menuitems->and( $menuitems->children ) AS $item ) {
				if ( $user->isLoggedin() && strtolower($item->name) == "login" ) {
					echo '<li><a href="'.$pages->get('/logout/')->url.'">Logout</a></li>';
				} else {
	                if( $item->id == $page->id ) { // Is item our current page?
	                    echo "<li class='active'>";
	                } else {
	                    echo "<li>";
	                }
	                echo "<a href='$item->url'>".ucfirst($item->name)."</a></li>";
				}
            }
			echo "</ul>";
			if ( $user->isLoggedin() ) { // display logged in user
				echo '<p class="navbar-text navbar-right">Logged in as <a href="#" title="Profile">'.$user->name.'</a></p>';
			}
?>
            </ul>
		</div>
	</div>
</nav>

When you create your pages, you can set one or more to be hidden, which won't show up in this menu list.

To get this (your) menu to display on every page, is as easy as including it in your php files. For example:

<div class="container">
	<?php include "./_navbar.php";

Is a segment of code that I use to include the menu on every page. This segment is placed in my _head.php file which is auto prepended to every page. See this topic for more information.

The following article has more general information...

site profile tutorial

There are also many great tutorials in the tutorial section written by the experienced ProcessWire members here. They are all worth a read. Also, check out the blog articles. I've found quite a few gems there.

Hope this helps.

 

[JimSee]

4 hours ago, rick said:

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header">

Hello again, Rick:

Thank you for your help and patience with me! I tried your method and got a single layer menu...but i'm trying to get a nested menu. 

After a bit of trial & terror earlier, I added  <?php  $maxDepth = 4;
 renderNavTree($pages->get('/'), $maxDepth);?> to _head.php. Thus, I have menus like the image below on all my pages. (The only thing that changes from page to page is the current class...so I appear to be making some minor progress.)

Next, I need to figure out the CSS...plus an alternative that will render okay in phones....but that will be tomorrow.

Thanks again...and, if someone has another (complete) solution, please feel free to post it.