Jump to content

Simple navigation


Mijo
 Share

Recommended Posts

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 :-)

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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 by kongondo
  • Like 1
Link to comment
Share on other sites

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 :-)

post-4349-0-89717400-1459984639_thumb.pn

Link to comment
Share on other sites

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 by kongondo
optimised code
  • Like 3
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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...