Jump to content
daerias

Zurb Foundation - problem with topbar-navigation

Recommended Posts

hi @all :)

could somebody help me and show me the right way to create easily topbar-navigation PW+ZurbFoundation please?

This is my HTML for the navigation:

<nav class="top-bar" data-topbar>
    <ul class="title-area">
       
      <li class="name">
        <h1>
          <a href="#">
            1. BGC-Celle
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
    <section class="top-bar-section">
       
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Main Item 1</a>
          <ul class="dropdown">
            <li><label>Section Name</label></li>
            <li class="has-dropdown">
              <a href="#" class="">Has Dropdown, Level 1</a>
              <ul class="dropdown">
                <li><a href="#">Dropdown Options</a></li>
                <li><a href="#">Dropdown Options</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
              </ul>
            </li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><label>Section Name</label></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all →</a></li>
          </ul>
        </li>
        <li class="divider"></li>
        <li><a href="#">Main Item 2</a></li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Main Item 3</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all →</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>

how can I render this in PW easily?

Thanks :)

Share this post


Link to post
Share on other sites

There are at least three foundation profiles on the forum - this is mine. Out of date so you might need to mess with it if any of the classes has changed

https://github.com/jsanglier/foundwire/blob/master/templates/includes/navigation.inc

(from an original code by Soma)

EDIT:

You can probably also use Soma's markup navigation module. Probably a better solution

  • Like 1

Share this post


Link to post
Share on other sites

See my edit to my post about Soma's module.

The problem with both the Foundation and Bootstrap markup is that they have used all kinds of different classes. That means you have to change classes depending what level you are on. Not very convenient!

Share this post


Link to post
Share on other sites
<nav class="top-bar" data-topbar>
    <section class="top-bar-section">
      <ul class="right">
        <li class="divider"></li>
          <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
          echo $treeMenu->render(); // render default menu ?>
        </li>
      </ul>
    </section>
</nav>

but css is broken

OJHxfFr.jpg

Share this post


Link to post
Share on other sites

Foundation requires its classes (e.g. "has-dropdown") in order to work fine. Please see the Readme section of Somas module to learn how to apply classes to the elements of the menu.

  • Like 1

Share this post


Link to post
Share on other sites

sorry I am php beginner and I do not understand this readme  :mellow:  could somebody show me an example please?

Share this post


Link to post
Share on other sites
<nav class="top-bar" data-topbar>
    <section class="top-bar-section">
      <ul class="right">
        <li class="divider"></li>
          <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
          $options = array(
          'has_children_class' => 'has-dropdown'
          );
          echo $treeMenu->render($options); // render default menu ?>
        </li>
      </ul>
    </section>
</nav>

The pattern is very easy. The above example will attach the class "has-dropdown" to every list item that has a submenu. Try to understand the Readme by comparing it to my example and you will understand quickly.

Edit: Misspelling corrected

  • Like 3

Share this post


Link to post
Share on other sites
<nav class="top-bar" data-topbar>
    <section class="top-bar-section">
      <ul class="right">
        <li class="divider"></li>
          <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
          $options = array(
          'has_children_class' => 'has-dropdown'
          );
          echo $treeMenu->render($options); // render default menu ?>
        </li>
      </ul>
    </section>
</nav>

The pattern is very easy. The above example will attach the class "has-dropdown" to every list item that has a submenu. Try to understand the Readme by comparing it to my example and you will understand quickly.

Edit: Misspelling corrected

Are you sure that this one is the full solution? :-)

Your solution is missing the <ul class="dropdown"> dropdown class value. This was the reason why it was not working for me

My solution looks like this: (Adding inner_tpl Option)

<nav class="top-bar" data-topbar>
    <section class="top-bar-section">
      <ul class="right">
        <li class="divider"></li>
          <?php $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
          $options = array(
              'has_children_class' => 'has-dropdown',
              'inner_tpl' => '<ul class="dropdown">||</ul>',
          );
          echo $treeMenu->render($options); // render default menu ?>
        </li>
      </ul>
    </section>
</nav>

Share this post


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 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.


    • By JimSee
      FIRST: I am brand new and am trying to add a Navigation Tree to the beginner site. When I put renderNavTree($page, 4) into _head.php, I get a menu list like the graphic.
      This is great EXCEPT, I don't know how to make a horizontal menu out of it with CSS. Can someone help (please) or direct me to an example of the css?
      SECOND: That list is great for the Home page but when I click "program," the list only shows:

      How can I get the whole (visible) menu on every page?
      Thank you in advance! jim
       
×
×
  • Create New...