News

Create a cool sliding and scrollable mobile menu in CSS

Emulate this neat and clever navigation solution from Osborn Barr that will work across all screens

css logo

Osbornbarr.com is a digital agency that’s set in the very heart of rural USA. Your first impressions of the site may lead you to believe that it is in fact promoting agriculture, and you would be forgiven for thinking this. However, as soon as you explore the actual content it becomes obvious that this digital agency specialises in telling your story to your clients.

The site is beautifully designed with clean sections of content, textured side panels, and footers that provide good contrast. The site is fully responsive and loses only the textured sidebar when scaling down, and the only content found in the said sidebar is the logo. This really is a great design experience for mobile and desktop browsers alike.

DOWNLOAD THE CODE

TECHNIQUE

Create mobile-friendly navigation

Link up to the libraries

Download the nano scroller and the CSS file from http://jamesflorentino.github.com/nanoScrollerJS/. Place these in your website root folder and then create a new HTML5 page. In the head section, link up the jQuery library, the nanoscroller plug-in file and the nanoscroller CSS file as shown in the code below.
These will power part of the menu.

Style up the content

We will now add our CSS for the menu. We are making the page black and creating a panel that will slide on and off from the left. This will contain the nano scrolling section of the project. A button will hold the controls to move the menu on and off the page.

001 body, html
 { background: #111; color: #fff; height: 100%; overflow: hidden; font-family: Helvetica, Arial, sans- serif;}
 002 #panel
 {background-color: #555; width: 180px; height: 100%; padding: 10px; position:absolute; top: 0; left: -200px;}
 003 #switch
 {background-color: #555; position: absolute; padding: 10px; top: 0; left: 0; cursor: pointer; font-size: 3em;}
 004 .nano
 { width: 180px; height: 300px; }

Add the document content

Now simply move your cursor to the body section of the document and then add your content div tags as shown in the code below. Here we have the overall side panel menu and inside that is the nano scroll section. Everything that can scroll goes into the content class. Any other menu elements can go below the scrolling section.

Make it work

Under the last code add the JavaScript tag as shown in the code below then the JavaScript code. It’s here that we initialise the nano scroller and we then add a click function to the switch, which will subsequently allow the menu to slide on when it is pressed, thus revealing the scrolling list and any other menu goodies that might exist.

Finish the code

Here we set the panel to animate in if it’s not on the screen already, which is in fact the complete opposite of the last step, which had it animate out. Now you need to save your work and test it in your browser to see the panel sliding in and out of the screen revealing a scrollable section. And, mobile-friendly navigation has been created.

001 } else {
 002 $("#panel").animate({'left':'0'}, 'easeOutSine');
 003 $('#switch').text('< '); 004 onScreen = true; 005 }  006 });  // ]]>
×