Jump to content

Zurb Foundation - problem with topbar-navigation


daerias
 Share

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

Link to comment
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
Link to comment
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!

Link to comment
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

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

  • 6 months later...
<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>
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

×
×
  • Create New...