Zurb Foundation - problem with topbar-navigation

[daerias]

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

[Joss]

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

[daerias]

Thanks! And this is the easiest way? 

[Joss]

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!

[daerias]

<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

[totoff]

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.

[daerias]

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

[totoff]

<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

[totoff]

Further reading (sorry, German only): http://www.peterkropff.de/site/php/arrays.htm

[daerias]

thank you so much  and German is perfect

[GeraldSchmidt]

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