How to create mobile style slide-in navigation

Default avatar.
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


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:\/\/\/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:\/\/\/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\/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

Read Next

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…

15 Best New Fonts, January 2023

Your choice of typeface significantly impacts the tone of voice your designs adopt. Heritage, ambition, freshness, ener…

The Pros and Cons of Responsive Web Design in 2023

Responsive web design has been such a success for many web designers that it is generally seen as the default approach …