Flyover / Flyout / Mouseover / Dropdown Navigation Menus using the Fuel Navigation Module

eriklharper

Hello all Fuelifiers,

As my sites are expanding, I am increasingly in need of a way to integrate the power of storing navigation items in Fuel with the ability to generate "flyout" or "dropdown" menus (as opposed to collapsible). Anybody out there developed a way to create full-fledged flyout menus with the navigation items stored in the Fuel database?

Specifically, I am interested in integrating Zurb's Foundation navigation features into Fuel:

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

You'll notice that the markup is fairly standard unordered lists but it requires certain classes (.flyout and .has-flyout) to be tacked on to the list items that contain submenus that will appear on mouseover.

Am I better off just creating my navigation manually and foregoing Fuel's Navigation module altogether, or do you see any way with the current Fuel API that I can tweak the markup output with any of the fuel navigation functions to output my navigation markup like is shown above on the Foundation website?

Another thought is to add an option for "render_type" called "flyout" that would generate a flyout menu structure. Any plans for something like this?

Thanks,
Erik

Lance

I've used the the fuel_nav() with Zurb. Not the fly out yet however. Happy to look into that as it's likely to pop up for me very soon too.

Without Zurb, very easy to write a dropdown styled menu. I've used superfish in the past.

All that was needed for that was the container tag class:

fuel_nav(array('container_tag_class' => 'sf-menu'))

Zurb (without flyout's, yet..):
fuel_nav(array('container_tag_class' => 'nav-bar'))

There is the option to pass in a pre_render_func method in 1.0 which you could do some parsing on to add the necessary classes.

Hopefully get back to you with some better info soon. BTW, clearing Zurb's default nav bar styles can be a PITA. Can give you some scss to stick in an _override if you like.

eriklharper

Thanks for the tip. I think for the time being I'll go with a Superfish integration. I've used it in the past, and it will do the job while more can be done to accommodate these additional overrides to make the markup correct for something like Foundation.

I wonder the reason behind having to have the .has-flyout and .flyout classes in the foundation nav bar? There must be a reason they had to include those classes, otherwise it doesn't seem that these classes are needed because Superfish works without any classes like this that are part of the ul > li structure in the menu markup.

I'll have to pose this question to the Foundation guys to find out more behind the reason for their markup structure.

Thanks,
Erik

Lance

True, classes are pain. Worse than the classes however is this extra markup:

<a href="#" class="flyout-toggle"><span> </span></a>

IF the child ul didn't need the flyout class you could do this quite easily by adding 'class="has-flyout"' to the parent nav item(s) in FUEL's navigation area. Sure, you'd have to remember to do it but it'd work with no code.

For completeness:

FUEL renders:
<ul class="nav-bar"> <li class="first active"><a href="#">Nav Item 1</a></li> <li><a href="#">Nav Item 2</a> <ul> <li class="first last"><a href="#">Sub Nav 1</a></li> </ul> </li> </ul>

Zurb needs: <ul class="nav-bar"> <li class="active"><a href="#">Nav Item 1</a></li> <li class="has-flyout"> <a href="#">Nav Item 2</a> <a href="#" class="flyout-toggle"><span> </span></a> <ul class="flyout"> <li><a href="#">Sub Nav 1</a></li> </ul> </li> </ul>

Quite different..

Lance

I just did this super quick so FAR from complete, but it works or at least the above examples:

$nav = fuel_nav(array('return_normalized' => true)); $menu = $this->menu->render($nav, NULL, NULL, 'array'); function render_links($data) { $toggle = '<a href="#" class="flyout-toggle"><span> </span></a>'; foreach ($data as $k => $v) { if (array_key_exists('children', $v)) { $str[] = ' <li class="has-flyout"> <a href="'.site_url($v['location']).')">'.$v['label'].'</a>'. $toggle.' <ul class="flyout">'.render_links($v['children']).'</ul>'; } else { $str[] = '<li><a href="'.site_url($v['location']).'">'.$v['label'].'</a>'; } $str[] = '</li>'; } return join($str); } echo '<ul class="nav-bar">'.render_links($menu).'</ul>';

Lance

Looking at the Zurb js, their menu isn't built to handle any more levels so the recursion above is overkill.

Also if you don't like that extra toggle markup there, it could be added dynamically with this one liner of jQuery:
$('.nav-bar .flyout').before('<a href="#" class="flyout-toggle"><span> </span></a>');