How do I? (Off-Canvas overlay panel)

User 2706435 Photo


Ambassador
444 posts

I am trying to recreate the example on this page in Foundation.
http://zurb.com/building-blocks/off-can … rlay-panel

But I think I get into a problem when I try to code this as a style:
.simple-panel.is-active {
box-shadow: 0.01em 0 0.5em #737373;
transform: translate(0, 0); }

I don't think one can just add the .is-active class to the off-canvas panel, because it will start out on the canvas because the .is-active resets the transformation.

So - how can I do this? Is this just a matter of changing the signs of the transformation, and then recreating the container? Or will I need a custom stylesheet?
User 188640 Photo


Registered User
895 posts

Bill,

I was trying to figure out what off canvas meant and then I went to the link you gave and still didn't understand. So I Googled off canvas and got this link to Zurb: http://foundation.zurb.com/sites/docs/v … anvas.html

You have to scroll down to get to the good stuff. A lot of apps use this type of navigation. Hope that helps.
A Rose is Just a Weed in a Corn Patch!
User 2706435 Photo


Ambassador
444 posts

Many of those examples shift the page content. The example I was using would not shift any page content. Might act more like a fly-out or whatever. The example on that page I linked to is bland. But I envision for example, a flyout menu, info panel, or whatever, that also has a transparency to see what's underneath. Perhaps an info panel for an image that would be useful on a mobile device.

I was just now able to recreate it, but it does require a custom stylesheet for that .simple-panel.is-active style. If there is no other way to do this in FF without having to create a custom style sheet, I hope CC comes up with a solution to do this sort of styling within FF, because it seems it would be integral to a lot of the toggle stuff.

I messed up my first try, but tried it again, and if one does reverse the transformation for x for the panel, it also works - I don't know exactly why though. So, instead of starting off canvas, start on canvas, adding the .is-active class to the container, and instead of making it on canvas, take it off, it works - there must be some sort of toggle that is happing and that adding the class to the panel starts a toggle - or something. I still hope for a "normal" way of doing this for other complicated applications.
User 188640 Photo


Registered User
895 posts

I read on one of those two pages that you have to style it. It is a plain Jane menu.
A Rose is Just a Weed in a Corn Patch!
User 2706435 Photo


Ambassador
444 posts

The example I was originally working from.was from Zurb University. I am trying to use the page you linked, but most of those foundation classes are not in FF. The page you linked might be for an older version of Foundation. And, the rendered html in all the examples has panel pushing the main content across the screen. Examples used by Foundation 6.2.3 for off-canvas containers have different classes, but in the rendered html do the same thing, slide the main content to make room for the panel. Maybe there is is some other combo of attributes, I just haven't figured it out how to toggle a panel to slide in, without moving any content of the main page - except the Zurb University method, which requires changing things around as in a previous post. If you can figure it out, please post a file.
User 188640 Photo


Registered User
895 posts

I just checked the weather app I have on my phone and it does push the content to the right when the slide in opens. If I have time I will see if I can find any updated information and maybe get one working.
A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
895 posts

Here's one I found:
http://www.jqueryscript.net/menu/Creati … anels.html

Scroll to the end of the code and there's a link to the demo page:

http://www.jqueryscript.net/demo/Creati … -jQPanels/

Up on the top where it has file size, total views, etc. you can click on the 'Go to website' text and download the entire project with the files required. I'm just starting to play with this to see if it will work with FF or RSD.

In the demo the background is a solid color but I set it for transparent and you can see the page text behind the overlay when the browser width is reduced.

Is this what you've been trying to do? If you figure it out before I do please let me know.
A Rose is Just a Weed in a Corn Patch!
User 2706435 Photo


Ambassador
444 posts

Thanks for the post and find that. But I was looking for a way within FF to do that. With Foundation, the core components and javacript that goes with it should work on the classes themselves. But FF does not allow one to create a double class selector (that I know of)

I am not javascript or even Foundation fluent, but I in this example, I believe Foundation uses the data toggler attribute and javascript to remove/add the .is-active class to the panel. The double class selector either exists, or it does not. But at some point, it has to start somewhere, or end. And I don't know if just reversing the starting/ending positions for this panel is appropriate for FF, because this toggler might effect other things than can be done with Foundation. I think the best thing, is for Coffeecup to add a way to create such classes that can be used by Foundation attributes. Maybe there is a way in FF and I don't know about it.
User 188640 Photo


Registered User
895 posts

I'm beginning to think that the off canvas stuff won't work in FF. Maybe if one was using the entire Foundation from Zurb but I'd like that to work with FF. I like my Coffee. :D
A Rose is Just a Weed in a Corn Patch!
User 434929 Photo


Ambassador
938 posts

Check Off-Canvas out
Attachments:
Guys at coffeecup are awesometacular.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.