CSS click screen to hide menu

User 2879688 Photo


Registered User
173 posts

Hi Forum

put this on RSD forum by mistake but i guess the end result will be the same....

If you look at the attached file 'unzipped'!!, the 3 bar menu opens up the menu to the left. i just need to add a bit of code so that the menu hides if you click anywhere on the screen instead of having to go back to the 3 bar menu. This is a mobile menu i want to work over the whole site. I am aware its not working on lower break points. I'm just trying to get things to work at this stage!
if anyone knows how to get it to slide in from the side that would be amazing!!!
I'm aware of the 'off canvas navigation' in FF that will do this, but it pushes all the page content to the side and i would prefer it to overlay the content......

ta tc
Attachments:
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 232214 Photo


COO
827 posts

You use a absolute positioned (semi-transparent) container that overlays the screen. Set the data-close attribute on that container and it will close on click (and tab for that matter). You can look at the gallery pop-ups in the Festival theme for examples.

The menu is placed in that container. Hope it helps!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2879688 Photo


Registered User
173 posts

Hi Bob
Thanks for the reply.
Very frustrating! Not sure about some of the context here....
Did you look at the break point over 1024?
The container is on absolute and semi transparent but only moves vertically. Did you mean this would give me a horizontal, right transition?
Also tried the data close attribute and it didn't seem to work. What is the value that needs adding?
Also could it be the existing added code in settings is stopping that. I had thought there might be a quick line of code that might do it. As a non coder this is all a bit foreign.
Have looked for the Festival theme but can only find pictures and nothing live!
Ta. T
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 232214 Photo


COO
827 posts

Look at this http://rff.coffeecup.com/themes/festival/index.html theme at a width below 600px and you can see an example where the navigation slides in from the left. Then go to the gallery page and click any of the images. Clicking anywhere will close the image.

From what I understand from you post these are exactly the things you want....if not I am not sure I understand...

You can see how these elements have been created by looking at them in the Festival theme in Foundation Framer.

One thing, from your project I get the feeling that you are designing for a wide screen 1st. Foundation 6 is mobile-first which means you have to start building and designing on the left of the 1st breakpoint. If you prefer a larger canvas select 'disable all breakpoints' from the 'Modes' icon on the toolbar.

Let us know how that goes!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 232214 Photo


COO
827 posts

I think this short tutorial has all the answers you are looking for as well Tim:

http://framer.coffeecup.com/tips/index.html#tip_016
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2879688 Photo


Registered User
173 posts

Hi Brilliant Bob
Yes that's the baby....
Is that theme downloadable, then I can spend as long as I like messing about with it and save everyone's time....
T.
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 2879688 Photo


Registered User
173 posts

Hi Bob
Found it!!!!
Had no idea it was already installed. Derrrr!
Had been looking online for ages and couldn't find it.

Thanks
T.
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 232214 Photo


COO
827 posts

The included themes have all types of components and interesting descriptions :P

Glad that helped Tim!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.

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.