Bootstrap nav

[psycho666]

Anyone else looking for a solution for bootstrap navigation?

I have found this wiki but it´s not working:

http://wiki.processwire.com/index.php/Bootstrap_Navbar#The_Navbar

Here is my modified solution, I hope there are no bug´s.

The Navbar

<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="#bs-example-navbar-collapse-1" aria-expanded="false">
         <span class="sr-only">Navigation ein-/ausblenden</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#"><img src="#" alt="Logo"></a>
     </div>
          <div lass="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php include("topnav.inc"); ?>
          </div><!--/.nav-collapse -->
        </div>
    </nav><!-- /navbar -->

The Menu

content of ('topnav.inc')

<?php

/*

Navigation for ProcessWire using the Bootstrap 3.5 markup

This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss | modified by David Schmidt

*/

function renderChildrenOf($pa, $output = '', $level = 0) {
    $output = '';
    $level++;
    foreach($pa as $child) {
        $atoggle = '';
        $class = '';
        if ($child->numChildren && count($child->parents) == 1) {
            $class .= 'dropdown';
            $atoggle .= ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" ';
        } else if($child->numChildren && $child->id != 1){
            $class .= 'dropdown-menu';
        }
        // Makes the current page and it's top level parent add an active class
        $class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
        $class = strlen($class) ? " class='".trim($class)."'" : '';
        if ($child->numChildren && count($child->parents) >= 1) {
           $output .= "<li$class><a href='$child->url'$atoggle>$child->title<span class='caret'></span></a>";
        }
        else{$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";}
        

        // If this child is itself a parent and not the root page, then render it's children in their own menu too...
        if($child->numChildren && $child->id != 1) {
            $output .= renderChildrenOf($child->children, $output, $level);
        }
        $output .= '</li>';
    }
    $outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
    return "<ul class='$outerclass'>$output</ul>";
}

// 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);

...do something great with it.

Regards David

[szabesz]

Thanks for sharing!

(Just for the record: note that there are plenty of Bootstrap navigation related topics in the Forum https://www.google.hu/search?rls=en&q=site:processwire.com/talk+Bootstrap+navigation&ie=UTF-8&oe=UTF-8&gfe_rd=cr&ei=BUlEV_nTNNOv8wf4pKi4Ag )

[JeevanisM]

On 5/24/2016 at 2:33 PM, psycho666 said:

Anyone else looking for a solution for bootstrap navigation?

I have found this wiki but it´s not working:

http://wiki.processwire.com/index.php/Bootstrap_Navbar#The_Navbar

Here is my modified solution, I hope there are no bug´s.

The Navbar

<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="#bs-example-navbar-collapse-1" aria-expanded="false">
         <span class="sr-only">Navigation ein-/ausblenden</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#"><img src="#" alt="Logo"></a>
     </div>
          <div lass="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php include("topnav.inc"); ?>
          </div><!--/.nav-collapse -->
        </div>
    </nav><!-- /navbar -->

The Menu

content of ('topnav.inc')

<?php

/*

Navigation for ProcessWire using the Bootstrap 3.5 markup

This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss | modified by David Schmidt

*/

function renderChildrenOf($pa, $output = '', $level = 0) {
    $output = '';
    $level++;
    foreach($pa as $child) {
        $atoggle = '';
        $class = '';
        if ($child->numChildren && count($child->parents) == 1) {
            $class .= 'dropdown';
            $atoggle .= ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" ';
        } else if($child->numChildren && $child->id != 1){
            $class .= 'dropdown-menu';
        }
        // Makes the current page and it's top level parent add an active class
        $class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
        $class = strlen($class) ? " class='".trim($class)."'" : '';
        if ($child->numChildren && count($child->parents) >= 1) {
           $output .= "<li$class><a href='$child->url'$atoggle>$child->title<span class='caret'></span></a>";
        }
        else{$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";}
        

        // If this child is itself a parent and not the root page, then render it's children in their own menu too...
        if($child->numChildren && $child->id != 1) {
            $output .= renderChildrenOf($child->children, $output, $level);
        }
        $output .= '</li>';
    }
    $outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
    return "<ul class='$outerclass'>$output</ul>";
}

// 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);

...do something great with it.

Regards David

Thank you,

 

this code works like charm....

[---Lukas---]

I just implemented this code. When I have all subpages hidden there is a empty dropdown showing up.
Any ideas how to fix this issue?

[flydev]

@---Lukas---

You might need to adjust the condition here (read below) or add another check just after (checking if pages are hidden) 

if ($child->numChildren && count($child->parents) == 1) {

or

you can use count($child->children) as it should exclude all your hidden pages. `numChildren()` include hidden pages.

if (count($child->children) && count($child->parents) == 1) {

 

try it ?

[daniel_puehringer]

Question: What solutions would you have to navigate to the parent page of a dropdown menu?

Hi, thanks for the great tutorial - I tried it out (slightly adjusted it) and it worked very smoothly ?

But I do have one question about the dropdown:
Imagine you have a site structure like:

• A
• B
  • B1
  • B2
  • B3
• C

Then B would be a Dropdown Menu because it has 3 Subpages.
If you click on "B", the Dropdown Menu opens and you can navigate to B1, B2 & B3.

Problem: How can you navigate to "B"?
 

Can you create a new Subpage of B and make a redirect within processwire like

1. B
   1. B1
   2. B2
   3. B3
   4. B4 (--> this page redirects to /B because B only opens the dropdown)

 

I would really appreciate your help, all the best!