No need for jQuery Mobile, twitter bootstrap, or anything like that.
Let’s be honest here, mobile is a pretty big part of everyday life nowadays and with smart phones and other mobile devices becoming cheaper and more readily available as time goes on, having a mobile web design friendly website is a must.
Like everyone with a mobile device, I’ve experienced my fair share of good and bad mobile sites. I’ve also experienced my fair share of mobile navigation, some easy to use, some broken and buggy. I’ve come across a few different mobile navigation methods, the plain old select dropdown, the more advanced yet, in my option, kinda worse jquery dropdowns, and the pretty cool Facebook style slide menus.
I’ve been working with mobile web design for a while now and I have only recently started using the side navigation. It all came about while making a responsive Opencart 1.5 template for work. I had seen the facebook menu and did everything I can to replicate it and implement it into the template.
Hell bent on a mission I scoured the web for a little while trying to find out just how to create such a menu and was then pretty disappointed to find that a lot of the methods out there either needed a framework such a jQuery Mobile implemented or the menus just slid in from the side over the content. Now I’m a pretty stubborn person when it comes to getting someone working the way I want it to work and I sometimes spend a little too long on things just to get things looking or working the way I want them to.
Hell bent on a new mission and with the help of Bjorn (our Senior Technical Lead) here in the office, I decided to begin creating it myself from scratch. During the course of development we ran into a log to issues trying to get the content to shift with and in line with the side menu. We never had the time, with our busy schedules and all, to just sit down for a few hours and nut this out and we were only working on this sporadically in amongst other work and by the end of it all we almost gave up and conceded to just having the menu slide from the side over the content. But then Bjorn had an idea that I’m going to take credit for now I’ve decided. Anyway, moving on, have a look at the code below and see the final product.
The HTML
CSS and Javascript Calls
[snippet id=”16″]
The Mobile Menu
[snippet id=”17″]
The Content
[snippet id=”18″]
The Javascript
[snippet id=”19″]
The CSS
[snippet id=”20″]
There you have it, a super quick, super simple and super easy way to create a sidebar menu similar to Facebook.
