How to create mobile style slide-in navigation

April 16, 2014

How to create mobile style slide-in navigation.

[“

$\"thumbnail\"$ In this tutorial we’ll look at the techniques needed to make a navigation menu that is hidden off screen until the user clicks on a menu icon, at which point the content slides over and darkens, and the menu slides in. The menu will also be responsive vertically, filling the height of the browser window on whatever size screen it’s being looked at in.<\/p>\r\n

To achieve this we will be using a couple different methods, one of which being flexbox, which is turning into a real ‘buzzword’ at the moment for being the holy grail of web layout methods. We will be using it to make the menu fit the height of the window. We’ll also be using jQuery for the actual functionality of the menu, making it slide out on a click event, and also providing a fallback for if the user doesn’t have JavaScript enabled in their browser (which we’ll detect with Modernizr).<\/p>\r\n

Here’s what it’ll look like when finished.<\/a>\u00a0And if you’d like to follow along with the full code you can download it here.<\/a><\/p>\r\n

<\/p>\r\n

Getting started with the markup<\/h1>\r\n

Let’s first of all look at out index.html file that will be used in our demo, I’ll show you everything that’s in there and then we can run through piece by piece and look at the important parts:<\/p>\r\n

<!doctype html>\r\n<html class=\"no-js\">\r\n<head> \r\n <meta charset=\"utf-8\">\r\n <title>Full-height Off Screen Menu<\/title>\r\n <link href='http:\/\/fonts.googleapis.com\/css?family=Montserrat:400,700","Open+Sans:400italic,400,700' rel='stylesheet' type='text\/css'>\r\n <link rel=\"stylesheet\" href=\"css\/styles.css\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <script src=\"js\/modernizr.js\"><\/script>\r\n <!--[if lt IE 9]>\r\n <script src=\"http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js\"><\/script>\r\n <![endif]-->\r\n<\/head>\r\n<body>\r\n <header class=\"cf\">\r\n <h1>Full Height Off Screen Menu<\/h1>\r\n <a href=\"#\" id=\"navicon\" class=\"closed\">&#9776;<\/a>\r\n <ul id=\"fallback-nav\">\r\n <li><a href=\"#\" class=\"current\">Home<\/a><\/li>\r\n <li><a href=\"#\">About<\/a><\/li>\r\n <li><a href=\"#\">Work<\/a><\/li>\r\n <li><a href=\"#\">Blog<\/a><\/li>\r\n <li><a href=\"#\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/header>\r\n <nav id=\"main-nav\">\r\n <a href=\"#\" class=\"current\"><div>Home<\/div><\/a>\r\n <a href=\"#\"><div>About<\/div><\/a>\r\n <a href=\"#\"><div>Work<\/div><\/a>\r\n <a href=\"#\"><div>Blog<\/div><\/a>\r\n <a href=\"#\"><div>Contact<\/div><\/a>\r\n <\/nav>\r\n <div id=\"main-content\">\r\n <article>\r\n <h2><a href=\"#\">Article Title<\/a><\/h2>\r\n <span class=\"date\">Published 25th February 2014<\/span>\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. <a href=\"#\">Read more &rarr;<\/a><\/p>\r\n <\/article>\r\n <article>\r\n <h2><a href=\"#\">Etc.<\/a><\/h2>\r\n <span class=\"date\">Published 25th February 2014<\/span>\r\n <p>... <a href=\"#\">Read more &rarr;<\/a><\/p>\r\n <\/article>\r\n <p><a href=\"#\" class=\"older\">&lt; Older Posts<\/a><\/p>\r\n <\/div>\r\n <div id=\"fade\"><\/div>\r\n<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/scripts.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\r\n

Let’s dig in! The only thing to note in the <head><\/em> tag is that we’re calling in some Google Fonts. We’re also linking to our css file as well as a modernizr.js file which you can

Harry Atkins

Harry Atkins is a front-end designer & developer originally from the south of England and now living in Paris, France. Passionate about all types of design, he loves to code and learn about new things online. He also is a massive lover of music, art and films. Follow him on Twitter @harryjatkins and go look at his website: http://harryatkins.me