How to use Foundation Navigation?

I use display suit http://drupal.org/project/ds to apply the classes.

Shouldn't this be handled by the theme? If you do not use display suite to anything else, it seems like overkill?

Could one use the same navigation for both mobile navigation and regular navigation?

@derMatze yes use the function below, I'm using it and it works just fine and I have committed it to the STARTER/template.php but left it commented out for themers to use it or not.

/**
 * Implements theme_links() targeting the main menu specifically
 * Outputs Foundation Nav bar
 * 
 */
function THEMENAME_links__system_main_menu($vars) {
  // Get all the main menu links
  $menu_links = menu_tree_output(menu_tree_all_data('main-menu'));
  
  // Initialize some variables to prevent errors
  $output = '';
  $sub_menu = '';

  foreach ($menu_links as $key => $link) {
    // Add special class needed for Foundation dropdown menu to work
    !empty($link['#below']) ? $link['#attributes']['class'][] = 'has-flyout' : '';

    // Render top level and make sure we have an actual link
    if (!empty($link['#href'])) {
      $output .= '<li' . drupal_attributes($link['#attributes']) . '>' . l($link['#title'], $link['#href']);
      // Get sub navigation links if they exist
      foreach ($link['#below'] as $key => $sub_link) {
        if (!empty($sub_link['#href'])) {
          $sub_menu .= '<li>' . l($sub_link['#title'], $sub_link['#href']) . '</li>';
        }
        
      }
      $output .= !empty($link['#below']) ? '<a href="#" class="flyout-toggle"><span> </span></a><ul class="flyout">' . $sub_menu . '</ul>' : '';
      
      // Reset dropdown to prevent duplicates
      unset($sub_menu);
      $sub_menu = '';
      
      $output .=  '</li>';
    }
  }
  return '<ul class="nav-bar">' . $output . '</ul>';
}

@micheas I agree with lsolesen DS for something like this is way overkill and it's nice to have a responsive dropdown menu out the box.

@lsolesen please use the function above or please provide suggestions to improve. Also in general there are different modules for handling menus: superfish, nice_menus, megamenu, so I still want the theme to be flexible to support those options along with core menu rendering.

I activated the code lines in the template.php in my template folder with following code but it works not.

function neofelis_links__system_main_menu($vars) {
  // Get all the main menu links
  $menu_links = menu_tree_output(menu_tree_all_data('main-menu'));
  
  // Initialize some variables to prevent errors
  $output = '';
  $sub_menu = '';

  foreach ($menu_links as $key => $link) {
    // Add special class needed for Foundation dropdown menu to work
    !empty($link['#below']) ? $link['#attributes']['class'][] = 'has-flyout' : '';

    // Render top level and make sure we have an actual link
    if (!empty($link['#href'])) {
      $output .= '<li' . drupal_attributes($link['#attributes']) . '>' . l($link['#title'], $link['#href']);
      // Get sub navigation links if they exist
      foreach ($link['#below'] as $key => $sub_link) {
        if (!empty($sub_link['#href'])) {
          $sub_menu .= '<li>' . l($sub_link['#title'], $sub_link['#href']) . '</li>';
        }
        
      }
      $output .= !empty($link['#below']) ? '<a href="#" class="flyout-toggle"><span> </span></a><ul class="flyout">' . $sub_menu . '</ul>' : '';
      
      // Reset dropdown to prevent duplicates
      unset($sub_menu);
      $sub_menu = '';
      
      $output .=  '</li>';
    }
  }
  return '<ul class="nav-bar">' . $output . '</ul>';
}

Sorry, now it works. It was the cache :)

Should this nav-bar be enabled by default?

@chrisjlee I have thought about this and gone back and forth. On one hand it's nice that it would work out of the box, on the flipside what if you wanted to use the Vertical Nav or the Top Bar then you have to suppress that Nav Bar functionality.

Also what if the themer wanted to use a module like megamenu, superfish, nice_menus or some other module that handles just the responsive part of the navigation. That's kinda why I have the logic in the page template to use the block navigation first and if that's not available output the main menu. Your thoughts?

@ishmael-sanchez I think we should leave it on.

Eventually, we could have a theme setting turn navbar on and off. I think we should please 80% of the users not the 100%. Especially if this theme has to compete with bootstrap.

IMHO, by default, zurb foundation should look slick out of the box. Someone shouldn't need to do too much work to have it look like the foundation theme found on the zurb foundation documentation site. Also, if we can help them avoid using another module for menus i think that's a win for the zurb foundation theme.

Would you agree?

@chrisjlee good point ok I will implement this.

Great. Be sure to pull before you start working. I did some major changes to the template file that would cause you a huge merge conflict.

yeah I saw that, thanks for the heads up.

Ok the fix has been committed, now by default navbar styling is applied to the main menu.

dumb question... but do you need to use a menu module in addition to the code above? I added the code to my template.php and it looks like Foundation, but I can't get the 2nd level flyouts to show...

@billyroebuck no you do not need another menu module did you flush cache after adding the code to your template.php? Also make sure in your main menu you have two levels of menus i.e.

-Fruits
--Apples
--Oranges
--Lemons
-Cars
--Big car
--Small car
-Whatever

@derMatze actually the official documentation uses the flyout see http://foundation.zurb.com/docs/navigation.php are you sure you aren't thinking of buttons, http://foundation.zurb.com/docs/buttons.php. Using has-dropdown seems to omit the downward arrow and extra spacing next to the menu item and still works (at least in Chrome) but I don't know if that's legit.

Do you have a link or more documentation that supports the class name change you posted about?

@derMatze Check out the implementations of each on the foundation page that ishmael listed above:

http://foundation.zurb.com/docs/navigation.php

THEMENAME_links__system_main_menu breaks the Menu Attributes module when trying to add classes to individual menus:

I believe the Drupal call menu_tree_output() (includes/menu.inc) incorrectly ignores class names injected by menu_attributes.module.

Here is how menu_attributes.module adds it's class:

/**
 * Implements hook_menu_link_alter().
 */
function menu_attributes_menu_link_alter(&$item, $menu) {
  if (isset($item['options']['attributes']) && is_array($item['options']['attributes'])) {
    // Filter out blank attributes.
    foreach ($item['options']['attributes'] as $key => $value) {
      if ((is_array($value) && empty($value)) || is_string($value) && !drupal_strlen($value)) {
        unset($item['options']['attributes'][$key]);
      }
    }

    // Convert classes to an array.
    if (isset($item['options']['attributes']['class']) && is_string($item['options']['attributes']['class'])) {
      $item['options']['attributes']['class'] = explode(' ', $item['options']['attributes']['class']);
    }
  }
}

Looks kosher to me.

The supplied call THEMENAME_links__system_main_menu function calls menu_tree_output(menu_tree_all_data('main-menu')) - that's where the trouble begins.

If you trace the actual class array that is created there, and subsequently returned, you will find it ignores any classes present in it's named param $tree.

When I cribbed and hacked this call - I check for classes present and include them when found - and I get success.

See the PDF walk-thru supplied.

Thank you.

Hi @erinclerico,

Thanks for the detailed bug report. I took a look, so I was clobbering those attributes in the function because I wasn't passing them to the l function when creating the links. Attached is patch that adds them back, I tested and it seems to work with the menu attributes module. If someone else could verify I will commit.

i get warning with that patch.

Notice: Undefined variable: link_attr in zurb_foundation_links__system_main_menu() (line 159 of /home/parallels/workspace/zf/sites/all/themes/zurb-foundation/template.php).

cleared the cache twice too and installed menu_attributes beforehand.

I fixed the warning by adding the variable $link_attr; but the flyout stops working after that.

The HTML markup is just wrong- I will post a patch that fixes the main menu in just a moment.

Okay, to get this to work and be nearly 100% of the markup found on this doc page:

http://foundation.zurb.com/old-docs/f3/navigation.php#btopCode

1. Add your links to main menu
2. Add some children links, and add some children to them
3. Use the 'Main Menu' block and place that in the Navigation region.

The one catch I saw was that any link that had children has to have Expanded checked off, or Drupal will not pass them off to the theme functions.

With this change, I was able to:

• Get the Foundation navigation markup as per docs
• See the navigation top-bar work
• Use deeply nested menus and see them fly out
• Collapse the browser down, see the menu become 'mobile' and drilldown
• Use iOS Simulator for iPhone and see the same result for mobile
• Confirm menu_attributes module still functions correctly
• On desktop, the menu is sticky

With the markup output like this, the Foundation scripts 'just work' for me as far as navigation goes.

Of course, if you have more than one menu that needs this functionality (besides main menu) you'd have to follow suit in your subtheme and override as needed.

You'll see that I am also stripping the #theme_wrapper from links in this patch- that keeps the Drupal core classes (first, leaf, collapsed, expanded) from being applied, and interfering with CSS or other markup.

One thing that is not in this patch- page.tpl.php needs cleaning up after this, because we (or I, rather) am not using the provided variable from zurb_foundation_preprocess_page() for the menu. I couldn't figure out how to obtain the menu in that fashion and theme it with the same functions. Your mileage may vary with this- but this got me MUCH closer to what I expected from the documentation.

Screenshot (ignore the style - its not finished):

http://i.imgur.com/x0CouVy.jpg

It seems like if you'd want to have the vertical nav with flyouts, you would override this in your sub theme and change the classes appropriately. But the 'flyout-toggle' and 'has-flyout' does not seem to apply to Top Bar.

Here is a better patch that puts the section tag in page.tpl.php instead of return it as a wrapper from the theme override.

#29, here is a pastebin.

http://pastebin.com/KP8mZVyb

Beyond this, add the Main Menu block in the Block system to your Navigation area. Then, make sure any menu links with children (in the Menu system) are set to expanded. This will let you create a deep nested top-bar drop down.

Sounds like you're missing the flyout toggle?

@Giraldo:

I made a small mistake in the code. If you perform a git pull you should be able to see the difference. I'm assuming you're using the 7.x-4.x branch.

@giraldo: No problem thank you for reporting this.

P.s. if you're working on the 4.x dev branch there's an important update that should fix the theme menu. This was just completed over the weekend.

Kevin,

Your pastebin isn't working now. The patch is failing for me too, maybe because I'm using 7.x-1.0-alpha1 and not the dev version.

Apparently this change wasn't commit to 7.x-1.0-alpha1, because turning on the Main Menu block just gives me a standard Drupal Main Menu. Leaving the Main Menu bock off does give the Zurb Navigation bar with sub menus, but does not give me sub-sub or lower menus, no matter what my expanded settings are.

If you could share a new pastebin with the changes or supply a patch for the 7.x-1.0-alpha1 that would be great. This has been a huge block for me.

I'm aso reactivating this bug because it does not appear to be fixed in 7.x-1.0-alpha1.

Hi all

Am I missing something? I can't get the Main Menu to appear as top-bar style. Nav-bar style works both with or without the Main Menu activated in the Navigation part of Blocks. (& that's very confusing for a person starting in Drupal...)

Is there un update or do I need to install Zurb Foundation 7.x-4.x to be able to switch from nav-bar to top-bar? The issue regarding this is closed but seems to me it's not "fixed" https://drupal.org/node/1934076

Help would be nice!

Menu navigation is still not fixed because if you have more than 2 levels in the menu than it wont work

For example:
Parent
-- first child-- child of first child

Parent will get "expanded" and all classes required for drop down but first child will not and "expanded" class is stripped off

anyone has a working solution for this?

For me the mobile version of menu doesn't work at all :(

This has been fixed in the 7.x-4.x branch (which uses Foundation 4.x): #2020135: Basic theme settings for menu/mobile rendering

Not sure if it's an option to switch to it but that's where most of the work is going to be done for D7 going forwards...

I agree with Alex, in the 1.x branch the theme uses Nav Bar via a custom function and the 4.x branch use Top bar and that's implemented and Alex has done a great job adding features to that functionality.

So if your are using 1.x branch look at the STARTER/template.php file there is a STARTER_links__system_main_menu($variables) which works and if you need to customize you can modify that function since it's in your STARTER theme.

If you are using the 4.x branch you you can reference zurb_foundation_links__topbar_main_menu and zurb_foundation_links__topbar_secondary_menu.