Help with Bootstrap Menu

[Joss]

Hi There,

I am just at the very beginnings of working with Processwire - which is interesting because I am not much of a programmer!

I have been creating a Twitter Bootstrap front template and have got stuck with working out the menu.

Boostrap navbars have very specific classes for the various elements. Importantly:

• The top level menu <li> that have children need to have the class "dropdown",
  
• the <a> tag for that top level item needs to have class='dropdown-toggle' data-toggle='dropdown
  
• the child <ul> needs to have the class "dropdown menu"
  

By bending a bit of code I found in another post, I have got part of the way there:

<?php 

function listChildrenTree($children, $current, $w) {

       echo "<ul class='nav'>";

       foreach($children as $page) {

               $class = '';

if($page->numChildren && $page->id != $rootid) {
$class = "class='dropdown'"; 
}

               $rootid = $w->pages->get("/")->id;

$dropclass = "class='dropdown-toggle' data-toggle='dropdown'";

               echo "<li $class><a $dropclass href='{$page->url}' >";

               echo "{$page->title}</a> ";
               $subchildren = $page->children;
               if($page->numChildren && $page->id != $rootid) {

echo "<ul class='dropdown-menu'>";
foreach($subchildren as $page) {
echo "<li><a href='{$page->url}' >";

                echo "{$page->title}</a></li> ";
}

echo "</ul>";
               }

               echo "</li>";
       }
       echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire); ?>

But this is not completely right.

$class = "class='dropdown'" - is currently populating all the top level <li> rather than just the ones with parent.

I have defined $dropclass = "class='dropdown-toggle' data-toggle='dropdown'"; - but I do not know what to do to put this into the <a> tag that belongs to the <li> that is a parent (but isn't "home")

The current code is sort of working, but because I am not getting all the right classes in the right place, it is not working properly.

The final rendered html should look something like:

<div class="nav-collapse collapse navbar-responsive-collapse">
	 <ul class="nav">
		    <li class="active"><a href="#">Home</a></li>
		    <li><a href="#">Link</a></li>
		    <li><a href="#">Link</a></li>

		    <li class="dropdown">
					  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						    <ul class="dropdown-menu">

[indent]						  <li><a href="#">Action</a></li>
					  <li><a href="#">Another action</a></li>
[/indent]

						   </ul>
		  </li>
    </ul>
</div>

Thanks in advance if anyone can help me out. With Bootstrap being so popular, this might be a useful bit of code to have floating around!

I have another related question, but I will ask that separately.

All the best

Joss

[DaveP]

This is from a working site that uses Bootstrap. (The only caveat might be that it might be an earlier version of Bootstrap.)

<ul class="nav">
<?php
foreach($children as $child) {
 if($child->numChildren > 0 && $child<>$homepage){
 $class = $child === $page->rootParent ? " active" : '';
 echo "<li class='dropdown$class'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>{$child->title}<b class='caret'></b></a>";
 echo "<ul class='dropdown-menu'>";
 foreach($child->children as $grandchild){
 $class = $grandchild === $page ? " class='active'" : '';
 echo "<li$class><a href='{$grandchild->url}'>{$grandchild->title}</a></li>";
 }
 echo "</ul>";
 echo "</li>";
 }else{
 $class = $child === $page->rootParent ? " class='active'" : '';
 echo "<li$class><a href='{$child->url}'>{$child->title}</a></li>";
 }
}
?>
</ul>

[Joss]

Thanks Dave

Will go and paste it in, stand back, and light the blue touch paper .....

[Joss]

Hi Dave,

That hasn't worked, though I a not sure why.

All it is displaying is the <ul class="nav">, but no contents.

Is there something missing, like defining what $children is or something?

Sorry, I am rather new to this

Joss

[DaveP]

Aah, my bad. Put this somewhere before the code in my earlier post.

<?php
$homepage = $pages->get("/");
$children = $homepage->children;
$children->prepend($homepage);
?>

[Joss]

Hugs and kisses all round ....

Oh, okay, just the hugs.

Or maybe just a firm, manly pat on the back.

Thanks mate!

Nice hat, by the way.

Joss

[Joss]

Dave or Someone - Can you check through the following?

The most recent version of bootstrap allows for the menu to so go one extra level, so, Top, Dropdown, dropdown-submenu.

So, I have been playing with Dave's script to add Greatgrandchildren!

It seems to be working, but I would really appreciate someone who actually knows what they are doing to check it through and make sure I have it right. I am a professional composer and copywriter, not a programmer!

Joss

<ul class="nav">
<?php
foreach($children as $child) {
        if($child->numChildren > 0 && $child<>$homepage){ 
         $class = $child === $page->rootParent ? " active" : '';
       echo "<li class='dropdown$class'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>{$child->title}<b class='caret'></b></a>";           
        echo "<ul class='dropdown-menu'>";           
        foreach($child->children as $grandchild){
        if($grandchild->numChildren > 0 && $grandchild<>$homepage){
        $class = $grandchild === $page ? " class='active'" : '';           
        echo "<li class='dropdown-submenu$class'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>{$grandchild->title}</a>";

echo "<ul class='dropdown-menu'>";

        foreach($grandchild->children as $greatgrandchild){
        $class = $greatgrandchild === $page ? " class='active'" : '';
        echo "<li$class><a href='{$greatgrandchild->url}'>{$greatgrandchild->title}</a></li>";
} 

echo "</ul>";

echo "</li>";

        }else {
            $class = $grandchild === $page->rootParent ? " class='active'" : '';
         echo "<li$class><a href='{$grandchild->url}'>{$grandchild->title}</a></li>";
        }
}

        echo "</ul>";

       echo "</li>";

}else{
        $class = $child === $page->rootParent ? " class='active'" : '';
        echo "<li$class><a href='{$child->url}'>{$child->title}</a></li>";
        }
}
?>
</ul>