Jump to content

Navigation help?


Roych
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
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
 Share

×
×
  • Create New...