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
