Jump to content

Bootstrap nav


psycho666
 Share

Recommended Posts

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 2 years later...
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....

Link to comment
Share on other sites

  • 1 year later...

@---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 😉

Link to comment
Share on other sites

  • 6 months later...

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!

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...