Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

Double off-canvas, sliding, navigation

November 20th, 2013
Categories: Blog, CSS, Development, Hand coded, HTML, JavaScript, jQuery, Mobile, Plugins | Tags: , , , , , , , , , , , ,

Whilst working at my current contract, at LuxDeco, I was tasked with creating a, mobile optimised, Magento theme where the design featured two slide-out/in info panels. These were to act similar to the slide out/in panels featured in the new Facebook mobile-app where the user is able to view a hidden panel that’s hidden off the left and right hand side of the main content page.

Here’s a sketch of what I was looking to create:
image

And here’s the final version:
Screen Shot 2013-10-15 at 14.06.25

Annnd here’s a working demo.

Before I even started to figure out how it was going to work I thought I’d start looking for a plugin, or tutorials, as this design is seen on a fair few websites now, especially as more and more sites are being optimised for smaller screens. I looked for plugins/tutorials that offered near-similar functionality. I assumed it would be a short search but what I found was a bunch of ‘plugins/tutorials’ that had ‘issues’. These were issues that I found after implementing them and wasted an hour or so on each plugin/tutorial.

The main issue I had was that some of the menu’s didn’t think of what would happen if a menu was slightly longer than the main content/page. The menu’s would then get cut off at the bottom. There was no way of seeing the rest of the menu with either scrolling or zooming out. This brought me on to the next big issue!. I found they had disabled the users ability to ‘pinch-to-zoom’!

This is a big NO NO for mobile sites; why takeaway a, now everyone knows how to do it, natural gesture from the user? It’s not a nice user experience and if this was going to be used on a e-commerce store, like I was planning to use it, I didn’t want visitors to not have the ability to zoom in to product images.

After all the searching and testing I did come across one very useful resource, this is what I’ve based my version on, from Smashing Magazine. Their final demo sold it for me, I knew I could manipulate it in to how I wanted it to function with ease 🙂

Now, the bit you’re looking for; the code!

THE HTML:

Pretty straightforward here; you’ve got wrapping DIV’s that hold the content together with some hidden over flows. This hidden overflow helps hide the slide out/in navigation panels for us. It looks a little more complicated as I’ve got the #phone wrapper on this example.

THE CSS:

I’m hoping the comments in the CSS file are self explanatory here. I’ll aim to comment my CSS a little more later tonight and update the post…

THE JAVASCRIPT:

There’s a lot there to go through and as much as I wish to talk through it all I think the comments you’ll find in the code are pretty straight forwards.

One important ‘thing’ to point out is that this is pure JavaScript. Not jQuery. I’ve added & modified the JavaScript to introduce the second navigation and added to & modified the CSS to match.

To achieve the smooth animation of the sliding effect you’ll need to add the following jQuery library called Fastclick, available here. As well as a custom version of Modernizr.

Add the modernizr library in the of the document and then the following before the closing tag.

With all the above copied or downloaded, images included, you’ll have a working double slide-out/in navigation enabled, mobile optimised, website!

DEMO

p.s: I’ve added some Media queries for you too so it’ll appear different on mobile and desktop 🙂

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

  • Option

    This is exactly what I am hunting for!! do you have a download link with all files?

  • Hi, sorry for the delayed reply. I do have a copy of this working somewhere and I’ll try and dig it up of you.

    The code above should work if you copy and past it out though – have you tried that?

  • Option

    Hi there, I did try but it seemed to not work for some reason. Much appreciated on finding it for me though 🙂

  • Hey Option, I’ve finally had a chance to look at this today. Try the following: http://scriptedpixels.co.uk/playground/doubleNavSliding.html.

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd