Menu icon Foundation

My Posts

No Content

My Comments

Andrew J. Holden commented on Scott Henning's post over 3 years
Andrew J. Holden commented on Tim Martin's post over 4 years

I've been using headroom.js for similar problems - working nicely for me.

Andrew J. Holden commented on Jo Fra's post over 4 years
Andrew J. Holden commented on Fedil Grogan's post over 4 years

I've created a solution here: http://foundation.zurb.com/forum/posts/22587-dropdowns-in-foundation-for-apps

Certainly not perfect, but it works for me! Hope that helps.

Andrew J. Holden commented on Matt Raible's post over 4 years

About the above:

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

Andrew J. Holden commented on Matt Raible's post over 4 years

@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 commented on Matt Raible's post over 4 years

@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 commented on Jo Fra's post over 4 years

Sort of related: This is some starting code to place an action sheet in a menu-bar. (inline styles used here for brevity)

            <li class="position:relative;">
                    <div zf-action-sheet="" style="position:absolute; top:0; right: 0;">
                        <div zf-as-button="" title="I'm an Action Sheet"></div>
                        <div zf-as-content="" position="left">
                            <p>Tap to share</p>
                            <ul>
                                <li><a href="#">Twitter</a></li>
                                <li><a href="#">Facebook</a></li>
                                <li><a href="#">Mail</a></li>
                            </ul>
                        </div>
                    </div>
            </li> <!-- TODO - making dynamic, add dropdown -->

Andrew J. Holden commented on Dave's post about 5 years

Thanks Wing-Hou!

I was using your code with a Foundation-based Wordpress theme, so I changed the "$" to "jQuery" to acommodate for no-conflict mode:

<script>
    jQuery(function(){jQuery(".scroll").click(function(){jQuery("html,body").animate({scrollTop:jQuery("#target").offset().top},"1000");return false})})
</script>

Worked great. I also tested out this code from CSS tricks which automates the scroll behaviour for any anchor link. Note that I added a scroll offset of 25px. If anyone would like to use this code, you may wish to remove the "-25" value entirely.

http://css-tricks.com/snippets/jquery/smooth-scrolling/

<script>
    jQuery(function() {
        jQuery('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = jQuery(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    jQuery('html,body').animate({
                        scrollTop: target.offset ().top -25
                    }, 1000);
                    return false;
                }
            }
        });
    });
</script>

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Scott Henning's post over 3 years
You commented on Tim Martin's post over 4 years

I've been using headroom.js for similar problems - working nicely for me.

You commented on Jo Fra's post over 4 years
You commented on Fedil Grogan's post over 4 years

I've created a solution here: http://foundation.zurb.com/forum/posts/22587-dropdowns-in-foundation-for-apps

Certainly not perfect, but it works for me! Hope that helps.

You commented on Matt Raible's post over 4 years

About the above:

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

You commented on Matt Raible's post over 4 years

@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>

You commented on Matt Raible's post over 4 years

@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

You commented on Jo Fra's post over 4 years

Sort of related: This is some starting code to place an action sheet in a menu-bar. (inline styles used here for brevity)

            <li class="position:relative;">
                    <div zf-action-sheet="" style="position:absolute; top:0; right: 0;">
                        <div zf-as-button="" title="I'm an Action Sheet"></div>
                        <div zf-as-content="" position="left">
                            <p>Tap to share</p>
                            <ul>
                                <li><a href="#">Twitter</a></li>
                                <li><a href="#">Facebook</a></li>
                                <li><a href="#">Mail</a></li>
                            </ul>
                        </div>
                    </div>
            </li> <!-- TODO - making dynamic, add dropdown -->

You commented on Dave's post about 5 years

Thanks Wing-Hou!

I was using your code with a Foundation-based Wordpress theme, so I changed the "$" to "jQuery" to acommodate for no-conflict mode:

<script>
    jQuery(function(){jQuery(".scroll").click(function(){jQuery("html,body").animate({scrollTop:jQuery("#target").offset().top},"1000");return false})})
</script>

Worked great. I also tested out this code from CSS tricks which automates the scroll behaviour for any anchor link. Note that I added a scroll offset of 25px. If anyone would like to use this code, you may wish to remove the "-25" value entirely.

http://css-tricks.com/snippets/jquery/smooth-scrolling/

<script>
    jQuery(function() {
        jQuery('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = jQuery(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    jQuery('html,body').animate({
                        scrollTop: target.offset ().top -25
                    }, 1000);
                    return false;
                }
            }
        });
    });
</script>

Posts Followed


Following

  • No Content

Followers

  • No Content