Front-end Project: Creating an off-screen navigation menu

In this tutorial, we’ll be creating an off-screen menu using some simple HTML and CSS techniques. Get the code for the tutorial here: https://github.com/codebubb/drop-down-menu-tutorial Use git checkout mobile-nav to see the completed project. Front-end Project: Creating an Off-screen Menu 00:00 Introduction 00:33 Recap 01:42 Off-screen menu 05:42 Making the menu respond to the button 07:55 Adding the hamburger 10:55 Customising the hamburger 16:11 Wrap up — Follow Me — Twitter: https://www.twitter.com/codebubb Facebook: https://www.facebook.com/juniordevelopercentral/ Blog: https://www.juniordevelopercentral.com/ — Thanks! — In this tutorial, we’re going to be creating an off-screen menu to hide the navigation of a particular site or web app when viewed on a mobile device. We’ll provide a ‘hamburger’ icon to get the navigation back on to our screen. This web development tutorial picks up from the last tutorial where we created a drop-down menu. We left our example page in a state of being able to respond to mobile device screen sizes but it didn’t really make good use of the available screen space and still took up a lot of the page. In this follow-up tutorial, we’ll create an update version of our menu which is hidden ‘off-screen’ when the device screen size is limited. When the user clicks an icon, the menu will be brought back to the screen for the user to interact with again. We’ll start off in the tutorial by creating the extra markup for the hamburger icon and the rest of the responsive menu. Then we’ll move on to working of pushing the navigation off the screen and see how we can hide this content from view when the user doesn’t need the navigation menu. We’ll then work on the hamburger or icon button to bring the menu back into the page before finally finishing up by customising the hamburger icon itself and then animating the whole process to give the navigation a nicer look and feel. #HTML #CSS Channel Handle @codebubb