Jump to content

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 post
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 post
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 post
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 post
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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By louisstephens
      I have not really had to make a site from the ground up in quite a bit as I have been mainly focused on internal apps using processwire. However, I have now been tasked with creating a site and I was quite excited. I started down the path of using bulma as it seemed like a good fit. I got the whole site coded statically and was not moving on to porting it over to processwire. I pretty much have the the whole site figured out save for tackling the navbar. My current navbar is set up as so:
      <section id="nav"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item is-size-3 has-text-primary" href="#">Logo goes here</a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-end"> <a class="navbar-item">Home</a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">Services</a> <div class="navbar-dropdown"> <a class="navbar-item">Subpage</a> <a class="navbar-item">Subpage</a> <a class="navbar-item">Subpage</a> <a class="navbar-item">Subpage</a> </div> </div> <a class="navbar-item">Gallery</a> <a class="navbar-item">Contact Us</a> </div> </div> </nav> </section> I guess my question is how would you go about setting this up in processwire? All pages will obviously be subpages of Home with the following structure
      Home
      --Services
      ----Subpage
      ----Subpage
      ----Subpage
      ----Subpage
      --Gallery
      --Contact Us
       
    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By anderson
      Hi,
      Please take a look at this:
      https://templatemag.com/demo/Good/
      The upper nav bar, including dropdowns like "pages" and "portfolios", what do you call this whole thing? At first I guess it's called "dropdown nav bar", but seems not.
      AND of course, what's the simplest way/module to achieve this in PW?
      Thanks in advance.
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I was wondering if there is a way to restrict user navigation to specific pages.
      Login (home.php - not to be displayed)
          |__  About (not to be displayed)
          |__  Clubs (not to be displayed)
          |            |__ Club (to be displayed)
          |                       |__  Club Members (to be displayed)
          |__ League (not to be displayed)
          |            |__Season (not to be displayed)
          |                       |__  Match (not to be displayed)
          |__  News (blog.php -  to be displayed)
          |
      etc, etc
      Based on the above the navigation needs to appear simply as:
      ---------------------------------------------------------------------------
                           Club    Club Members    News    
      ---------------------------------------------------------------------------
      Any thoughts appreciated.
    • By joe_ma
      Hi
      Trying to setup a customized navigation.
      Page tree looks like this:
      home
      – upcoming exhibitions
      –– exhibition 1
      –– exhibition 2
      –– …
      – about
      – archive
      –– arch 1
      –– arch 2
      –– …
      – impressum
      Now I'd like to have a navigation, that lists only the subnav of "upcoming exhibitions" but not the one of "archive".
      I modified a snippet I found here in the forum. It looks like this so far:
      <nav class="mainNav"> <ul> <?php $homepage = $pages->get('/'); // first item links to the homepage echo "<li><a href='$homepage->url'>Aktuelle Ausstellung / current exhibition</a></li>"; $children = $homepage->children(); // render an <li> for each top navigation item foreach ( $children as $child ) { if ( $child->id == $page->rootParent->id ) { // this $child page is currently being viewed (or one of it's children/descendents) // so we highlight it as the current page in the navigation echo "<li class='active'><a href='$child->url'>$child->title</a></li>"; // if upcoming page has children, list them } elseif($child->id == 1020 && count($child->children)){ // build the subnav and list all items echo "<li><a href='$child->url'>$child->title</a><ul class='upcoming'>"; foreach($child->children as $c){ echo "<li><a href='$c->url'>$c->title<br>{$c->date_from}–{$c->date_to}</a></li>"; } echo "</ul><li>"; // otherwise list only main items } else { echo "<li><a href='$child->url'>$child->title</a></li>"; } } ?> </ul> </nav> This puts out the navigation as wanted, but only for main items (see fig. nav-open.png).
      As soon as "upcoming exhibitions" or one of its children is active, the navigation collapses (see fig. nav-closed.png).
      I cannot find out, where I went the wrong way.
      Thanks for help.


×
×
  • Create New...