Menu icon Foundation
Check out this Sidebar Off-canvas Icon Menu

Hey Everyone! Alex emailed a really nice menu plugin he created using Foundation components. It features a sidebar that collapses down to small icons on mobile, then when you open the off canvas the sidebar is revealed. Nicely done!

You can get the download here:
https://github.com/tipsforthings/foundation-sidebar-nav

Sidebar

sidebaroffcanvasmenuResponsive

Hey Everyone! Alex emailed a really nice menu plugin he created using Foundation components. It features a sidebar that collapses down to small icons on mobile, then when you open the off canvas the sidebar is revealed. Nicely done!

You can get the download here:
https://github.com/tipsforthings/foundation-sidebar-nav

Sidebar
Bridget over 4 years ago

Looks GREAT!!! KUDOS to Alex!!!

Alex Scott over 4 years ago

Thanks Bridget.

Rafi Benkual over 4 years ago

Tried this out today. Have to say this is pretty sweet! There should be an easy way to make this a plugin.

Hans McMurdy over 4 years ago

Alex this really cool. I've added it to the static site generator i'm working on.

Matt Price over 4 years ago

Hey, so this looks really cool, but I am not quite sure how you're doing it -- would you be willing to add a README that does some explaining? or anyway can you separate out your code from standard Foundation install?

thank you for a really neat tool!

Alex Scott over 4 years ago

I'm looking into it, I've forked a copy of Foundation and hopefully I'm going to be able to modify the off-canvas code to turn this into a plugin.

@matt price I'm going to create a readme file for it, but it's merely some simple javascript to add/remove a class of 'toggled' on some elements. In the CSS, the toggled and non-toggled states just have different margins and widths, with some CSS animations thrown in for good measure.