Foundation 6 Reveal as a mobile navigation

Mar 2016 / Uncategorized

There’s a native responsive navigation that Foundation 6 provides and it’s great. I use it in most of my projects for quick mock-up. The only backdraw of this is that you get to add several divs that will sometimes interfere with your layout. 

For example I wanted to put a header on my site that is removable with a close button and will slide up. The div doesn’t animate as I wanted to because it’s inside a div that has an overflow property. 
Another problem that I had with off-canvas container was when a certain page that I was working with would consistently show the end of the hidden menu and therefore hides half of the content and shows shadow at the edge of the divs.

So there are those problems and instead of fixing it, I realised maybe I could use the Reveal function to open my mobile navigation. It would be much modern too because the off-canvas nav is getting a bit old in my opinion. Having only few items in my menu makes this a very good choice.

I also added motion-ui to create sliding effect on my navigation. I know there are plugins to make this kind of nav but I want to make my site as light as possible and use available functions that Foundation 6 already has.
I’ll write the codes below soon.