Menu icon Foundation
Dropdowns in Foundation for Apps

Hello,

I've been using Foundation for Sites to build a number of prototypes over the last couple of weeks. I've built a layout that looks good for my client's intranet site, where the top bar has a number of dropdown menus and the content is in a 3-column layout. We believe there's some WordPress themes we can leverage to take this prototype and make it happen.

We're also hoping to integrate a custom application we're writing with AngularJS. I've done some research to see if it's better to use Foundation for Sites or Foundation for Apps with AngularJS. I've written up my findings in the following blog post:

http://raibledesigns.com/rd/entry/best_practices_for_using_foundation

Summary: It seems like the natural thing to do is to use FA for any webapps we create and FS for any websites (e.g. WordPress sites).

To prove that we should use Foundation for Apps for our AngularJS app, I've started creating some new prototypes. The first thing I wanted to recreate was a top bar menu with dropdowns. However, it doesn't seem that the FA's CSS supports dropdowns. Is this true? I expected whatever HTML/CSS I wrote for the first prototype (with Foundation for Sites) to work with Foundation for Apps. Am I missing something?

Thanks,

Matt

dropdown

Hello,

I've been using Foundation for Sites to build a number of prototypes over the last couple of weeks. I've built a layout that looks good for my client's intranet site, where the top bar has a number of dropdown menus and the content is in a 3-column layout. We believe there's some WordPress themes we can leverage to take this prototype and make it happen.

We're also hoping to integrate a custom application we're writing with AngularJS. I've done some research to see if it's better to use Foundation for Sites or Foundation for Apps with AngularJS. I've written up my findings in the following blog post:

http://raibledesigns.com/rd/entry/best_practices_for_using_foundation

Summary: It seems like the natural thing to do is to use FA for any webapps we create and FS for any websites (e.g. WordPress sites).

To prove that we should use Foundation for Apps for our AngularJS app, I've started creating some new prototypes. The first thing I wanted to recreate was a top bar menu with dropdowns. However, it doesn't seem that the FA's CSS supports dropdowns. Is this true? I expected whatever HTML/CSS I wrote for the first prototype (with Foundation for Sites) to work with Foundation for Apps. Am I missing something?

Thanks,

Matt

Rafi Benkual about 2 years ago

It should work. You would need to copy over all the Scss and global mixins that you used in top-bar or at least all the output CSS from it. Otherwise there is no reason the components won't fit into the grid.

Matt Raible about 2 years ago

Shouldn't the CSS from Foundation show up when I do the following in my client/assets/scss/app.scss file?

@import "settings";
@import "foundation";

I figured the 2nd line would import all the CSS needed for the top bar component, but it doesn't appear to do that.

Matt Raible about 2 years ago

If I create a new app with "foundation-apps new myApp", then start it with "npm start" and view source, the app.css file does not have any references to "top-bar". This makes me think that Foundation for Apps does not include the same CSS as Foundation 5.5.0.

To prove there is no top-bar in Foundation for Apps, I changed my app.scss to contain the following:

@import "settings";
@import "foundation/components/top-bar";

When I ran "npm start", my console showed this component does not exist.

[09:07:47] gulp-ruby-sass: directory
      error app.scss (Line 2: File to import not found or unreadable: foundation/components/top-bar.
Load paths:
  /Users/mraible/dev/prototypes/search-fa/client/assets/scss
  /Users/mraible/dev/prototypes/search-fa/bower_components/foundation-apps/scss
  )

If I look in bower_components/foundation-apps/scss/components, there is no "top-bar.scss". Here's the list of components:

_accordion.scss
_action-sheet.scss
_block-list.scss
_button.scss
_button-group.scss
_card.scss
_extras.scss
_forms.scss
_grid.scss
_iconic.scss
_label.scss
_list.scss
_menu-bar.scss
_modal.scss
_motion.scss
_notification.scss
_off-canvas.scss
_panel.scss
_popup.scss
_switch.scss
_tabs.scss
_title-bar.scss
_typography.scss
_utilities.scss

Jason Demitri about 2 years ago

This wont work as foundation for apps is using angular and the old foundation for sites doesnt,
And for some reason the foundation.js for the topbar wont work along side it

However :-

Have a look at the angular release of foundation5 here >> https://github.com/pineconellc/angular-foundation

They created angular directived for foundations old componenets such as top-bar and some old parts of foundation that I think foundationSites is missing . . .I mean no dopdowns in a topbar . . is it just me that thinks thats crazy . . might just be as thats the thing I found foundation through. . .

anyways only other option would be to use the dropdown scss mixin the the titlebar or menubar

other than that good luck ive tried and tried again I did get topbar working but then everything pulled to the left

Hope its pointed you in the right direction

Matt Raible about 2 years ago

I was able to make the top-bar and dropdowns work with the following technique.

After creating a new app with Foundation for Apps, add "foundation" to bower.json:

   "dependencies": {
    "foundation-apps": "~1.0.2",
    "foundation": "~5.5.1"
  }

Add the new path to gulpfile.js:

var sassPaths = [
  'client/assets/scss',
  'bower_components/foundation/scss',
  'bower_components/foundation-apps/scss'
];

In my app.scss, it has an @import for "foundation". The "foundation" that's imported is the one from "foundation" rather than "foundation-apps" (determined by the order of paths in the sassPaths variable). It's too bad they don't have different names for their main scss files.

After making this change, the top-bar renders and the dropdowns work. There's no jQuery in the page. Is this a viable option or are there issues I might experience?

Jason Demitri about 2 years ago

Try it mobile and I bet it wont work . . .

Foundation top-bar has a dependency on a js script that won play nicely with angular

I did the exact same had every component from sites in apps but due to the js requirements anything like orbit or topbar wouldnt work and when trying the topbar from the angular-foundation it worked and replaces the js dependencies with angular directives but then is still a bit glitchy mine was pushing the right ul of the topbar to the left along with everything else inside of it . .

This may just have been how i was working the code into foundationApps though

I just included the directive sheet and on the app.js add mm.foundation as a requirement and away it went just not to well IN FORMAT not function

Jason Demitri about 2 years ago

And as im not running mine as an angular project but a phpMVC with angular and foundation dependencies I dont have gulp file so have to manually included the scripts into the view tried concat all into one and that didnt work either . .

Rafi Benkual about 2 years ago

Good answers Jason!

Regarding dropdown in F4A, they are coming soon in a patch we're putting out.

Matt Raible about 2 years ago

@Jason - you're right. When I tried it in mobile, it did not work.

At first glance, I thought it would be best to use Foundation for Apps with Angular. However, after trying it, I don't believe it provides a consistent look and feel with a website that's written using Foundation for Sites. Furthermore, FA only supports IE10+.

My recommendation to my client is to use Angular directives for Foundation for now.

http://pineconellc.github.io/angular-foundation/

Mister J about 2 years ago

@rafi when is that patch coming out for dropdowns in F4A - kind of a required feature if we are to use Apps and not F5 with Pinecone directives.

I did try and hack an action sheet into menu bar groups, which was funny ;)

Andrew J. Holden about 2 years ago

@Mister J - I was able to get in action sheet in menu bar groups - see code below (this is just a starting point, but the principle will work with some tweaking)

http://foundation.zurb.com/forum/posts/23003-foundation-for-apps-off-canvas-multilevel-menu

Andrew J. Holden about 2 years ago

@Everyone - This isn't exactly a "fix", but...

I needed to create a "responsive menu bar" in F4A. After quite a bit of trial and error I found a few solutions.

Approach #1:

Use whatever I want for the menu itself (menu bar, just a grid, or just a unordered list) and then merge that with the responsive pure CSS menu using the "checkbox hack" to make something like the Foundation for Sites menu. References:

Next...

Approach #2:

Use "panels" and existing CS/JS in F4A to create a horizontal menu on medium-up screens and a menu with right-aligned toggle element (which brings in an off-canvas menu) on smaller screens.

I decided to go with this approach because:
- I prefer a vertical off-canvas menu on smaller screens.
- Adding submenu items is easy (just regular items with padding-left)
- I don't have to fight core F4A css for supremacy in the !important wars)

One negative, you have to duplicate your menu in the DOM. However, given how Angular works this doesn't seem too terrible and I suppose you could manage this via interchange, NG templates or even just a set of variables if you really wanted to.

Here's the code - hope it works for you!

<!-- main menu -->
<div class="menu-group dark">
    <div class="menu-group-left">
        <ul class="menu-bar small-expand medium-condense">
            <li><a ui-sref="home"   class=""                               ui-sref-active-eq="menu-item-is-active">LOGO</a></li>
            <li><a ui-sref="view1"  class="hide-for-small show-for-medium" ui-sref-active-eq="menu-item-is-active">item 1</a></li>
            <li><a ui-sref="view2"  class="hide-for-small show-for-medium" ui-sref-active-eq="menu-item-is-active">item 2</a></li>
            <li><a ui-sref="view3"  class="hide-for-small show-for-medium" ui-sref-active-eq="menu-item-is-active">item 3</a></li>
            <li><a ui-sref="view4"  class="hide-for-small show-for-medium" ui-sref-active-eq="menu-item-is-active">item 4</a></li>
            <li><a ui-sref="view5"  class="hide-for-small show-for-medium" ui-sref-active-eq="menu-item-is-active">item 5</a></li>
        </ul>
    </div>
    <div class="menu-group-right hide-for-small show-for-medium">
        <ul class="menu-bar">
            <li><a ui-sref="home" class="hide-for-small show-for-medium" ui-serf-active-eq="menu-item-is-active">my account</a></li>
        </ul>
    </div>
    <div class="menu-group-right hide-for-medium">
        <ul class="menu-bar">
            <li><a zf-toggle="dolly-the-menu">Menu [ICO]</a></li>
        </ul>
    </div>
</div>

<!-- off-canvas menu clone of main menu -->
<zf-panel id="dolly-the-menu" position="right">
    <a href="#" zf-close="" class="close-button">×</a>
    <ul class="menu-bar condense vertical">
        <li><a ui-sref="view1"  ui-sref-active-eq="menu-item-is-active">Home</a></li>
        <li><a ui-sref="view2"  ui-sref-active-eq="menu-item-is-active">item 1</a></li>
        <li><a ui-sref="view3"  ui-sref-active-eq="menu-item-is-active">item 2</a></li>
        <li><a ui-sref="view4"  ui-sref-active-eq="menu-item-is-active">item 3</a></li>
        <li><a ui-sref="view5"  ui-sref-active-eq="menu-item-is-active">item 4</a></li>
        <li><a ui-sref="view6"  ui-sref-active-eq="menu-item-is-active">item 5</a></li>
        <li><a ui-sref="view1">my account</a></li>
    </ul>
</zf-panel>

Andrew J. Holden about 2 years ago

About the above:

  • The example there is pretty complex because I'm using menu groups, etc. You can probably greatly simplify it.