Navigation help?

[Roych]

Hello

I'm totaly new to PW and for now I find it very understanding, all but navigations.

I tried to find some videos or tutorials explaining about this but noting helpfull comes up.

I read i most of the tutorials on the forum that I could find but stil cant find the right answer. I'm making my first template and need your help on how do I create a menu like this in WP. I'm not a coder ... but understand a little.

<ul class="nav navbar-nav">
     <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <i class="fa fa-angle-down"></i></a>
          <ul class="dropdown-menu">
             <li><a href="index-1.html">Masonry</a></li>
             <li><a href="index-3.html">Masonry v1</a></li>
          </ul>
     </li>
     <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
          <ul class="dropdown-menu">
             <li><a href="about-us.html">About Us</a></li>
             <li><a href="services.html">Services</a></li>
          </ul>
     </li>
</ul>
                     

right now I'm here but it's not working right.

<ul class="nav navbar-nav">

<?php

       
        $root = $pages->get("/");
        function visit(Page $parent, $enter, $exit=null)
        {
            foreach ($parent->children() as $child) {
                call_user_func($enter, $child);
                
                if ($child->numChildren > 0) {
                    visit($child, $enter, $exit);
                }
                
                if ($exit) {
                    call_user_func($exit, $child);
                }
            }
        }
        visit(
          $pages->get(1)
          ,
          function(Page $page) {
              echo '<li class="dropdown"><a href="' . $page->url . '" class="dropdown-toggle" data-toggle="dropdown">' . $page->title;
              if ($page->numChildren > 0) {
                  echo '<ul class="dropdown-menu">
                        <li><a href="$page->url"></li>
                        
                        ';
              } else {
                echo '</a>';
              }
          }
          ,
          function(Page $page) {
              echo '</li>';
              if ($page->numChildren > 0) {
                  echo '</ul>';
              }
          }
        );
        ?>

 

And I want my HOME page also to be shown.

Any ideas?

Thank you in advance 

R.

[gebeer]

Hi Roych and welcome to the forum!

There is Damienov's function for rendering a bootstrap 3 dropdown menu. So no need to reinvent the wheel

You need to include that function somewhere in your template. E.g. you could make a file functions.php and put that function inside and save it to site/templates/inc/functions.php. Note that this part does NOT belong in your functions.php, only the function itself:

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
echo renderChildrenOf($pa);

Then in your main template or even in your init.php file you include the function:

/*
 * Include any other shared functions we want to utilize in all our templates
 *
 */
require_once("./inc/functions.php");

Now in  your template were you want to render the function you put this part:

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
echo renderChildrenOf($pa);

This should render a nice BS dropdown navigation.

[Roych]

Hello

thank you I'm glad I'm here This cms can actualy give me what I need

Thank you #Gebeer I tried what you've said and I just had to put in the code from

 https://processwire.com/talk/topic/5680-bootstrap-3-navigation-with-multiple-leveltier-fix/

without function.php and it's working great so far. I tried with your code above but didn't work at all, the site got internal error. Or did I do something wrong? Did axactly what you've said..

Thank you very much

R

[Juergen]

At the moment I dont use functions to create a menu out of the page tree, because you are more flexable. In most cases the menus consist of not so much items. If you use the pagetree to create the menu you are in a fixed structure.

With manual writing of the menu you could change the markup, you can show only the items you want, you can easly integrate icons to each menu point,.....all without problems.

So its quite worth to think over if you really need a function for your menu.

Best regards