Grow your CSS skills. Land your dream job.

How to get this type of responsive menu hide/show on click

  • # June 12, 2013 at 3:12 pm

    Hello,
    I primarily have worked with joomla (wordpress too but not nearly as much) and before that my first sites were stict html/CSS pages. I have put together many sites from personal to corporate, eCommerce as well. I build all my sites now using Joomla and start with the Gantry framework and completely customize the work. I do not consider myself a developer though I have edited some modules and php files, htaccess, configuration.php, basic javascript as well.

    My question is this – can someone please point me towards which language, I imagine it’s either javascript, jquery, CSS3, or a combination of one or the other of the first two and CSS3 – that is used to create this functionality of this menu on this site:

    http://www.squarespace.com

    I like how when viewed on a mac/pc you have the option to click and the page shifts over to show the menu on the side. It’s also the same swipe/shift function when viewed on iPhone, which I love.

    I’m wanting to do this as I’m trying to learn more about adding newer forms of interactivity within my site(s). I’d love to know what coding was used to accomplish this as well as how you can find out by inspecting the page. I do use the Chrome web developer tool to inspect pages, as well as Firebug for Firefox if those can help learn this..?

    # June 12, 2013 at 3:37 pm

    I’m fairly certain this is known as “Off Canvas Layouts”. Some googling around on that term should find you a tutorial or two and some high level “what exactly is this?” kind of stuff.

    Zurb packaged up some add-ons for Foundation framework if you happen to use it. If not, it’s probably a good place to start digging in regardless.

    [Zurb Off Canvas for Foundation](http://zurb.com/playground/off-canvas-layouts “Off Canvas Layouts – Zurb”)

    # June 12, 2013 at 4:44 pm

    Cool thanks mcjohnst. Pretty cool stuff!

    # June 13, 2013 at 8:09 am

    Actually, does anyone know how squarespace made it so that if the menu is open and you scroll down far enough is disappears again? That’s a pretty nice feature.

    # June 14, 2013 at 4:20 pm

    Bump. Sorry I know its marked as solved but I’d really like to know how you do it and I’m not advanced enough with javascript yet.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".