Menu icon Foundation
F6 Responsive Menu Suggestions

Hey everyone! Lot's of important issues were addressed in a discussion about Foundation 6 issues. One of the larger issues is the new responsive menu and it looks like a lot of people are struggling with the new component. We'd love to get a discussion going on issues you have experienced or workarounds you've discovered with the new F6 menu.

One of the most pressing issues is the position of the dropdown on responsive menu as shown in a demo. Hovering over the dropdown reveals the dropdown over the menu rather than underneath it (also the arrow is in the wrong direction). Russel Porosky and Vladimir highlighted this problem.

Here is the challenge:


- Right now some of the menu's configuration is controlled in the CSS and some in the JS.
- What is needed is a way for the JS to be aware of the CSS classes and change the menu behavior accordingly.
- Example: if you added .vertical and .medium-horizontal classes, the JS could read the breakpoint the menu is on and apply the correct menu behavior from these classes.

We've added this issue about the responsive menu dropdown position to the 6.2 milestone. We're going to push a Release Candidate 2 weeks ahead of the point release to thoroughly test changes before they go live (there is an open GitHub issue here: https://github.com/zurb/foundation-sites/issues/7978 There were some CSS solutions posted that Jaaann shared. We're working on a more robust JS solution that will work for more use cases).

We'd love to hear more about how you're using the new menu in F6 and your experience with it.

Rafi

foundation 6responsive menumenunavigation

Hey everyone! Lot's of important issues were addressed in a discussion about Foundation 6 issues. One of the larger issues is the new responsive menu and it looks like a lot of people are struggling with the new component. We'd love to get a discussion going on issues you have experienced or workarounds you've discovered with the new F6 menu.

One of the most pressing issues is the position of the dropdown on responsive menu as shown in a demo. Hovering over the dropdown reveals the dropdown over the menu rather than underneath it (also the arrow is in the wrong direction). Russel Porosky and Vladimir highlighted this problem.

Here is the challenge:


- Right now some of the menu's configuration is controlled in the CSS and some in the JS.
- What is needed is a way for the JS to be aware of the CSS classes and change the menu behavior accordingly.
- Example: if you added .vertical and .medium-horizontal classes, the JS could read the breakpoint the menu is on and apply the correct menu behavior from these classes.

We've added this issue about the responsive menu dropdown position to the 6.2 milestone. We're going to push a Release Candidate 2 weeks ahead of the point release to thoroughly test changes before they go live (there is an open GitHub issue here: https://github.com/zurb/foundation-sites/issues/7978 There were some CSS solutions posted that Jaaann shared. We're working on a more robust JS solution that will work for more use cases).

We'd love to hear more about how you're using the new menu in F6 and your experience with it.

Rafi

Robert Stark over 3 years ago

Most clients like shiny moving transitions. Here's my latest attempt and it has css3 animation:

http://taichungdesigner.com/meemo/html/

My main issue was by using display: none on classes vs visibility:hidden, opacity: 0 - which would more easily allow CSS3 transitions. The problem is when you display: hidden - then Zurb Equalizer seems to count the hidden class as part of the height. There probably is a work around - but I ended up going with matchheights library instead.

On a smaller screen - the items were inline. So - I edited that to make it 100% width. Then of course I wanted to trigger Motion UI - so you get this nice smooth animation - and it half works on open - but not on close - so I will look at it.

Clients like a nice shiny animated hamburger button - which was pretty easy to implement.

I know I've missed something as this is only my 2nd Foundation 6 site. The last one I avoided it: http://rubber-manufacturer-taiwan.com/ and went with https://codyhouse.co/gem/css-mega-site-navigation/ - which seemed simpler to implement.

I really loved F5 Menu - it was just what I needed.

Hannes Lehner over 3 years ago

This is my solution, based on the „F6 Top Bar“ in the Building Blocks.

HTML
<div  class="title-bar"  data-responsive-toggle="main-menu"  data-hide-for="medium">
      <button  class="menu-icon"  type="button"  data-toggle=""></button>
      <div  class="title-bar-title">Menu</div>
    </div>

    <div  class="top-bar"  id="main-menu">
      <div  class="top-bar-left">
        <ul  class="dropdown menu"  data-dropdown-menu="">
          <li  class="menu-text">Site Title</li>
        </ul>
      </div>
      <div  class="top-bar-right">
        <!-- Changed -->
        <ul  class="menu vertical medium-horizontal"  data-responsive-menu="drilldown medium-dropdown">
          <li  class="has-submenu"> <a  href="#">One</a>
            <ul  class="submenu menu vertical"  data-submenu="">
              <li><a  href="#">One</a></li>
              <li><a  href="#">Two</a></li>
              <li><a  href="#">Three</a></li>
            </ul>
          </li>
          <li><a  href="#">Two</a></li>
          <li><a  href="#">Three</a></li>
        </ul>
      </div>
    </div>

CSS:

.dropdown.menu .submenu {
  border: none; }


.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
  border-color: #ffffff transparent transparent; }


.is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent #ffffff; }


.js-drilldown-back::before {
  border-color: transparent #ffffff transparent transparent; }

James Cocker over 3 years ago

One of the first things I tried to do in Foundation 6 was to create a simple responsive navigation menu.

I just wanted it to be an accordion on small screens and a basic horizontal menu with dropdowns on medium and larger screens.

However, I ran into both of the issues above, with the dropdowns appearing in the wrong place, and with the arrows pointing in the wrong direction.

This wasn't a great first impression, especially as I think this is a pretty common navigation pattern and from what I could see I was using the Responsive Menu component as expected, in a pretty basic way. I spent quite some time trying to work out what I was doing wrong, before eventually deciding it must be a bug in Foundation.

I'm also struggling to get Responsive Menu to work when manually including the required JavaScript files, instead of just including the whole foundation.js.

Glad to see this has got some attention, and looking forward to the fix.

E. Smythe over 3 years ago

Here's how I worked around a significant problem with it:

    <div id="fp-hamburger-small" class="title-bar">
      <button class="menu-icon" type="button"></button>
      <div class="title-bar-title">menu</div>
      {{!-- the mobile drilldown menu is added dynamically in app.js on first click here. this is because, when it was part of the initial DOM, i was not able to hide it initially without significant trouble. the menu *must* be shown on first load else it never displays properly as of Foundation 6.1.1. I tried many, many things over many hours on different days. this is the best solution for now. --}}
    </div>

and then...

var firstBurgerClick = true;
var navMenuPrefix =
  '<div id="fp-small-navmenu"><ul id="fp-small-navmenu-ul" class="vertical menu" data-drilldown>',
  navMenuSuffix = '</ul></div>';

$(function() { // on doc ready,
  $("#fp-hamburger-small").on('click', function() {
    if (firstBurgerClick) {
      firstBurgerClick = false;
      $(this).parent().append(navMenuPrefix + $("#jaxWasHere").html() + navMenuSuffix);
      $("#fp-small-navmenu").foundation(); // init the plugin
    }

Fun, right?

Vladimir over 3 years ago

Since I was invited to say something about my problems here are they, in short version.
I was in the first stage of making a website for a client when F6 was released. I "jumped the train" thinking that it will be evolution and a big step forward. And it will be in future revisions like 6.2 or maybe 6.x (depending on how we all help each others).
My biggest problem is documentation and not documentation in whole but in the matter that some parts are missing and we are supposed to figure it on our own (which is a time consuming job since I have a tons of work on the back-end, databases, auth procedures, crawling... and the last thing I want is to spend hours and hours figuring why that arrow is pointing right and not down).
I have a live example of my work on new project so everyone can take a look here http://zlajo.webfactional.com/
There I have number of problems:
1) About us arrow; if I change it to point down it breaks the mobile view and vice versa
2) Tablet view; portfolio link "eats" blog and the only way to solve this is to make tablet view same as mobile, with "hamburger" icon for navigation, which is something I don't want to do but in the end will have to do...
3) had an issue with height of top-bar and hero image blow, so they both combined have 100vh. @Rafi Benkual made a suggestion how to deal with that but it kind a worked on desktop but broke on tablet and mobile view, so I abandoned that idea for now

One more thing I do not understand. Boys and girls from Zurb made few examples of navigation, basic ones. In F5 it was just enough for us to go from that point and make more complex menus, and share that with others so they can learn and improve it further. Looking at post on forum regarding F6 menu system @Rafi Benkual wrote dozens of post but none of them did finished on F6 examples pages, polished and for everyone to look/improve/make better.
Right now I am finishing improving back-end solutions which I used on F5 sites waiting for 6.2 version to solve some problems, so I can decide weather I stick to F6 in future projects or switching to another framework.
To sum everything, bad documentation and bugs leads to developers abandoning framework which leads to lack of finished projects and examples which ends with simple user not even finding this framework in sea of others. So Zurb people, help developers help you.

Jeremy Englert over 3 years ago

For me, the largest issue with the menus has been the little bugs, which has prevented users from really being able to play with them. With that being said, I absolutely love the concept behind the menu - having the power to chose different menu types and the screen sizes they are displayed on is wonderful.

However, the new menus are also quite complex compared to the F5 topbar and the documentation isn't always clear. This line is a great example:

"Our three Menu patterns form like Voltron into one responsive Menu plugin, which allows you to switch between patterns at different screen sizes."

  1. "Three Menu Patterns" is somewhat confusing. If you look at the documentation in the sidebar, you will see links for "Menu", "Dropdown Menu", "Drilldown Menu", "Top Bar", "Responsive Navigation", "Megellan", "Pagination" and "Breadcrumbs" - which of these is considered a menu pattern? After using it, I understand it, but it took some time to wrap my head around.

  2. I think even the term "Plugin" is somewhat confusing. It sounds as if an additional "plugin" is necessary for this to work. Maybe "component" is a better term?

  3. Having the three "patterns" completely separate from the "Responsive Navigation" docs is also somewhat confusing - as you need to completely understand the patterns to properly use the Responsive Navigation component.

I also think it would be great to have some "preset" type menus that require minimal code and a few CSS classes/JS attributes to make the magic happen. They wouldn't need to be as flexible as the menu patterns, but it would be nice for prototypes or basic menus (similar to the F5 topbar).

tl;dr - I think the concept behind the new menu is solid, but the small bugs and somewhat confusing documentation lead users to become frustrated with the menu before they get a chance to really enjoy it. I think clearer/restructured documentation would go a longgggg way in solving a lot of these "bugs".

Brett Mason over 3 years ago

Thanks for the prompt to contribute on this Rafi. In summary I agree with Jeremy, but I'll go into more details.

I think the whole concept is a fantastic one, and since closed beta testing is the component I was most excited about using as it has huge potential. To me the navigation is the single most important aspect of Foundation (ahead of even the grid) as I think its a crucial part of any website.

However the small bugs introduced in various point releases have really been a problem (but you know that already!). I think more of a priority should be put on getting the navigation components bullet proof, as I'm sure this would cut down on the number of support requests.

Also some more fully working examples would be great for users, as I see requests all the time on the forums - I try and help when I can with a codepen, but some more solid examples, clearly signposted would be a help.

In terms of the docs, yes they are a bit thin and probably not super clear. I think breaking the responsive menu and related components up in the navigation into its own section might help a bit.

Lastly my main issue (other than bugs) is not being able to navigate to parent links on mobile. I see this as a massive usability issue. I'm happy to see my PR for the parent link for drilldown is getting included - this will fix the drilldown component for me. However I feel like a similar take on accordion menus is essential to make them useable in the real world. I mentioned it before, but an option to make it work like this is a must imo: http://samikeijonen.github.io/responsive-nav.js/demos/multiple-levels/index.html

That's all for now!

Ole Fredrik Lie over 3 years ago

Case 1: I've also had some challenges with navigation in F6. One specific thing that I've noticed is that submenu-item in a dropdown menu will overflow the screen when the menu is placed to the right of the screen.

http://s12.postimg.org/ld45h47p9/subnav_element_offscreen.png

Case 2: I'm using the dropdown button as a menu. I have specified that the dropdown panel should be displayed under the button. But when the button is aligned right on the screen, the panel is rendered on the left side.

http://s21.postimg.org/5vrcpo6nr/dropdown_button.png

Case 3: It should be possible to allow the title-bar to be visible for all screen sizes. As far as I understand, the current workaround is to use the data-hide-for attribute on the title-bar and specify a breakpoint where it should not display. You could define an insanely large breakpoint and use that. But why not just add the possibility to use a data-show-for="all" or similar? More details on this issue can be found here: https://github.com/olefredrik/FoundationPress/issues/726

Jan Slusarczyk over 3 years ago

Let me add my 3 cents. I am using Foundation for Sites 5.5 with love and devotion. I felt I was doing good with my modifications and I got everything I wanted from it. I was very excited about F6 as it seemed to solve my biggest gripe with F5, namely the overabundance of not needed classes. I jumped to tests as soon as it was released, and I hit the wall pretty hard. With no migration guide, scarce examples and lacking documentation I got stuck early on. I need a fairly straightforward responsive megamenu (dropdown) and for F5 there was a great university example ideal as a starting point. But I cannot find a working example of a more complicated responsive drop down menu that I could change into a megamenu. Same went for my migration plans - a lot of strange errors caused me to abandon my plans for now and I keep working on F5.5 peeking to the F6 side from time to time. I feel like I can't climb this knowledge curve and it gets me really frustrated.

If I may suggest something - can you share a little more on migration from F5 (there were mentions of a guide of some sorts) and also some more templates/building blocks available for real life situations? F6 seems to me so much more difficult then F5 ever was...

Thank you for your great work and sorry to whine, but you've asked for opinions.

E. Smythe over 3 years ago

It's not possible to hide the menu for large screens without it "flashing". That is, it shows on first load and only after the DOM is loaded does it hide. Why?

Georg Kleinert over 3 years ago

I'm using a similar approach like Hannes above (based on the F6 Top Bar in the Building Blocks).

Worked ok for Foundation up to 6.1.1, pulldown menus now are 'broken' in Foundation 6.1.2 (screen shots in my post here: http://foundation.zurb.com/forum/posts/38214-foundation-612-submenus-of-responsive-menus-now-shown-right-to-parent-menus)

At the moment I'm stuck at 6.1.1.

Vladimir over 3 years ago

I must add something on what @Jan Slusarczyk said here : "But I cannot find a working example of a more complicated responsive drop down menu that I could change into a megamenu."
My process for learning F5 was to go to websites that sell templates and to find good example and examine its code and learn from that. If you go to, lets say themeforest, and try to find any template made with F6 you will find none. There are plenty of them made with F5 but not a single one with F6. And for me that says all. No good examples (I do not count those generic ones on Zurb website) no ability to learn and advance. If I wasn't lucky and find good class on Udemy on F6 I would be still in dark.

Kevin Ball over 3 years ago

Hi folks,

I'm working on fixing some of the positioning and arrow issues highlighted by @James Cocker and @Georg Kleinert in this branch: https://github.com/zurb/foundation-sites/tree/fix-opens-left-styling

I believe it has addressed those particular issues... We started adding visual test cases to reproduce these issues and provide us with a way to do regression testing so future fixes won't break existing plugins, so I'm basing my sense that this has fixed the bug on this file in that branch of the repo: test/visual/responsive-menu-left-dropdown.html

Would any of you be able to check out the branch and see if it fixes your issues, or if it creates any new issues? I'd like to get these fixes into 6.2.

Thanks!
-Kevin

E. Smythe about 3 years ago

Who will give me back the many hours I lost by debugging Foundation 6 bugs?

Jeremy Englert about 3 years ago

@E. Smythe - I'll pay you for those hours. I'll pay you the same hourly rate that you paid to use Foundation.

Really though, don't consider those hours "lost". By helping find bugs, you helped contribute to a large open source project used by thousands (millions?) of people. That's gotta be worth something! :)

James Cocker about 3 years ago

@Kevin Ball Thanks for working on this Kevin, I've been testing out your branch and have some feedback:

While it fixes the down arrows and dropdown menu positioning for the Responsive Menu, it seems to have broken the position of the normal Dropdown Menu dropdowns, see here: http://www.pswd.biz/foundation-navs/6.2-open-left-fix/

The dropdowns for the normal Dropdown Menu are now appearing to the right, instead of below.

Here is the same code using 6.1.2 for reference: http://www.pswd.biz/foundation-navs/6.1.2/

Also, if you enable the $global-flexbox mode, a couple of things break: http://www.pswd.biz/foundation-navs/6.2-open-left-fix-FLEX/

The dropdown menus are always visible, and the dropdown and accordion menu items become centered.

E. Smythe about 3 years ago

I'll pay you the same hourly rate that you paid to use Foundation.
Actually, I did pay them for support. I think it was $99 per incident? Thanks, I'll send you my paypal email address.

By helping find bugs, you helped contribute to a large open source project used by thousands (millions?) of people. That's gotta be worth something! :)
It sure is. Until they launch F7, rending all contributions useless.

Geoff Kimball about 3 years ago

Hey friends! Thanks so much for giving your feedback and airing your frustrations. Responsive navigation is a challenging problem to solve, and as we continue to see how the patterns are being used in the real world, we get closer to being able to provide solutions that work better for more of our audience.

Here are a few themes I'm seeing in these comments:

  • It's buggy, although that's a given. Most recently we've had issues with dropdown menus not fanning out in the right direction, which @Kevin Ball and I are working to resolve.
  • The various pieces aren't explained well enough. We set out to create a modular system of navigation components, but it sounds like we haven't done a good enough job laying out the pieces. We have a Navigation overview page that breaks down every piece, so we likely need to refine this page and steer more people to it first.
  • There aren't enough examples showing how it all fits together. For example, the pieces to make the old Top Bar are in there, but we don't have a concrete example living on the documentation itself. Ideally we'd have a set of various navigation recipes that we can direct people to. We have Building Blocks, but that's a big site with a lot of patterns, so important stuff like this could get lost. And we also don't currently promote Building Blocks in the documentation.

We're releasing Foundation 6.2 at the end of next week, which will have some of these fixes implemented. After that, we'll take a hard look at these patterns and how we can better illustrate their value for our developers.

Thanks again for the feedback! :)

Rafi Benkual about 3 years ago

@James Cocker Thanks, that really helps! It looks like this menu position should be the same for a horizontal dropdowns regardless if it's in a responsive menu. Thoughts?

We'll look at the flex-mode next after the positioning is reworked.

James Cocker about 3 years ago

@Rafi Benkual Yep, dropdown menus should behave the same, whether part of a responsive menu or not. It looks like the issue with the non-responsive dropdown menus appearing on right instead of below, is a regression caused by Kevin's fixes to Responsive Menu, as if you look at 6.1.2, you'll see the normal dropdown menus appear correctly below: http://www.pswd.biz/foundation-navs/6.1.2/