Simple navigation

[Mijo]

Hello everyone,

I'm trying to build a simple navigation, but I have a small problem.

My HTML looks like this:

<div class="collapse navbar-collapse navbar-right">

       

          <ul class="nav navbar-nav menu navbar-right">

                            

                            <li><a href="index.html">home</a></li>     

                            <li><a href="contact.html">Contact</a></li>

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">About us 

                                    <i class="fa fa-caret-down"></i>

                                </a>

                                <ul class="dropdown-menu">

                                    <li><a href="about.html">History</a></li>

                                    <li><a href="services.html">services</a></li>

                                    

                                </ul>

                            </li>

                        </ul>

         </div>

I'm stuck here:

<div class="collapse navbar-collapse navbar-right">

         <ul class="nav navbar-nav menu navbar-right">

                            <?php

                        $root = $pages->get("/");

                        $children = $root->children("limit=7");

                        $children->prepend($root);

                        foreach($children as $child) {

                        echo "<li><a href='{$child->url}'>{$child->title}</a></li>";

                         }

                             ?>

    

                        </ul>

         </div>

How to display subpages (dropdown menu), please help, Thanks everyone

[kongondo]

@Mijo,

I have previously advised you to wrap up your code in code blocks. Otherwise it makes it hard to read (and maybe even get a response in some cases)

[Mijo]

Oh sorry, my mistake  

Here is my html code from above:

<div class="collapse navbar-collapse navbar-right">
       
          <ul class="nav navbar-nav menu navbar-right">
                            
                            <li><a href="index.html">home</a></li>     
                            <li><a href="contact.html">Contact</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">About us 
                                    <i class="fa fa-caret-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="about.html">History</a></li>
                                    <li><a href="services.html">services</a></li>
                                    
                                </ul>
                            </li>
                        </ul>
 
         </div>

Right now I'm stuck here, I'm trying to display sub-pages (the drop-down menu):

<div class="collapse navbar-collapse navbar-right">
 
         <ul class="nav navbar-nav menu navbar-right">
                            <?php
                        $root = $pages->get("/");
                        $children = $root->children("limit=7");
                        $children->prepend($root);
                        foreach($children as $child) {
                        echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
                         }
                             ?>
    
                        </ul>
 
         </div>

[kongondo]

By sub-pages you mean the children of each $child? 

Edit:

I'm too lazy to write code at this time ..Have a look at this recursive navigation topics/posts:

https://processwire.com/talk/topic/563-page-level-and-sub-navigation/?p=4490

https://processwire.com/talk/topic/110-recursive-navigation/

Even if you menu is simpler (say 2 levels deep only), it's probably still a good idea to use a function...you never know when you might need to change things...

Edited April 6, 2016 by kongondo

[Mijo]

Hello, 

Yes @kongondo I mean that, for example  my structure is:

 About us

      History 

      Projects 

I'm trying to display a subpages (projects, history) in a drop-down menu

Screenshot for backend

[kongondo]

The topics I linked to should be able to help you (@see my edited post above yours). The code at the first link is pretty straight forward and solid...
 
Edit:
 
If you don't want to use a function and you'll have no more than 2 levels, you could probably get way with this:

<div class="collapse navbar-collapse navbar-right">
 
         <ul class="nav navbar-nav menu navbar-right">
                <?php
                    $out = '';
                    $root = $pages->get("/");
                    $children = $root->children("limit=7");
                    $children->prepend($root);
                    foreach($children as $child) {
                        $out .= "<li><a href='{$child->url}'>{$child->title}</a></li>";
                        if($child->numChildren) {// @note: you could do some more checks here;
                            foreach($child->children as $c) {
                                 $out .= "<ul>";
                                 $out .= "<li><a href='{$c->url}'>{$c->title}</a></li>";
                                 $out .= "</ul>";
                            }
                        }
                    }

                    echo $out;
                 ?>    
       </ul> 
</div>
 

Edited April 7, 2016 by kongondo
optimised code

[Mijo]

Thank you very much for your answers @kongondo, you helped me a lot

Also, an excellent solution for bootstrap navigation:

https://processwire.com/talk/topic/5680-bootstrap-3-navigation-with-multiple-leveltier-fix/?p=55504

Again thanku you Processwire is awesome

[kongondo]

@note: optimised code above (use numChildren instead)