search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.66k stars 5.48k forks source link

Two Improvements for Off Canvas #7932

Closed LDigital84 closed 8 years ago

LDigital84 commented 8 years ago

There are two improvements that I would like to see with Off Canvas

1) The default setting is to have the page scroll to the top when Off Canvas opens. I would like to see an option to enable smooth scrolling when this happens. In other words, when Off Canvas opens the page smoothly scrolls to the top versus jumping to the top of the page.

I realize there are problems with scroll events in Safari and I do not know if adding this would cause those problems to rear their ugly head or not but regardless, I would like to see it as an option for those of us who would like to use it.

2) I would like to see the Overlay option added back into v6 for Off Canvas. I know that v6 went bare bones but I would like to see the option included again.

zurbchris commented 8 years ago

2 is there, as a configurable sass variable: https://github.com/zurb/foundation-sites/blob/develop/scss/settings/_settings.scss#L386 As for 1, we're having a scrum/bug burn this afternoon and I want to talk about what's going to happen with offcanvas. Browser inconsistencies have plagued it from the get-go, and I am supremely annoyed by this.

LDigital84 commented 8 years ago

@zurbchris - I wasn't clear on 2. I mean overlap...where Off Canvas overlaps (or overlays) the content on the page. Sorry about not being clear on that.

I have faith that you and the ZURB team can solve the browser inconsistencies! :)

zurbchris commented 8 years ago

Ahh, that's more of a Panel than an Off-Canvas, not that I'm trying to be contrary. The plus side is panels are much easier to do than an Off-Canvas element.

Here's a demo codepen of creating a Panel element from scratch with the Toggler plugin: http://codepen.io/zurbchris/pen/obgwGe

LDigital84 commented 8 years ago

Ah okay! Cool!

LDigital84 commented 8 years ago

@zurbchris - Just a thought, you should turn your pen into a building block so the whole world can see it and use it when needed. :)

Ne-Ne commented 8 years ago

:+1: Great example

zurbchris commented 8 years ago

btw, this panel has gotten out of hand. Will be a BB or add-on plugin in the near future... http://codepen.io/zurbchris/pen/adEJJg

andycochran commented 8 years ago

Nice! @zurbchris, you should add max-width: 100%; to @mixin simple-panel. Then it works for small screens no matter how large you set $panel-width.

rafibomb commented 8 years ago

I did this in a media query - so small screens will be 100% and the fixed width will be medium-up. Is that what you meant @andycochran ? http://codepen.io/zurbchris/pen/adEJJg

andycochran commented 8 years ago

If you add max-width: 100%; to @mixin simple-panel, it doesn't need to be in a media query.

The value of the max-width property overrides width. via http://www.w3schools.com/cssref/pr_dim_max-width.asp

berlindave commented 8 years ago

Thank you @zurbchris for the hint about this panel solution. After some weeks off hassle with off-canvas in F& I switched to this panel solution. Unfortunately I'm not really a JavaScript or jQuery expert. So I have two questions:

  1. Is it possible to have an overly over the rest of the page when the panel is active? And if yes, how?
  2. Is it possible to stop the rest of the page from scrolling when the panel is active? And also if yes, how?

Many thanks in avdance for your thoughts!

JeremyEnglert commented 8 years ago

@berlindave, you may have better luck getting those questions answered on the Foundation Forum.

Closing this issue for now as the original issues have been addressed.