Hands-on Responsive Web Design 4: Navigation

This course will teach you how to build and deploy responsive apps for several different kinds of phone, tablet, and desktop navigation schemes with HTML5, CSS3, Sass, and even a little JavaScript.
Course info
Level
Intermediate
Updated
Jan 22, 2018
Duration
1h 36m
Table of contents
Description
Course info
Level
Intermediate
Updated
Jan 22, 2018
Duration
1h 36m
Description

At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and Sass. In this course, Hands-on Responsive Web Design 4: Navigation, you will learn the skills you need to build responsive navigation for single level and two level deep navigation for small screens, medium screens, and large desktops. You will use jQuery, JavaScript, icons, and Sass as you work your way through each example. You will discover the appropriate use and limitations for each navigation type. You will also explore browser support and how far back each approach will work. By the end of this course you will know how to build navigation for simple toggle, multilevel toggle, footer anchors, and icons with popups.

About the author
About the author

Paul Cheney is a professor of Web Design and Development at Utah Valley University, where he teaches Responsive Design. He also owns his own web design company, which allows him to keep current in the field and share the latest technology with his students.

More from the author
Best Practices for Responsive Web-forms
Beginner
1h 10m
31 May 2018
More courses by Paul Cheney
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello. My name is Paul Cheney. Let me tell you about this fourth in the series of Hands-on Responsive Design courses. At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, Sass, and even a little JavaScript. In Responsive Web Design 4, Responsive Navigation, you will gain the skills you need to build and deploy several different kinds of small screen navigation options including the simple toggle, multilevel toggle, footer anchors, and icons with pop-ups. Some of our projects will rely on JavaScript, and others will be completely Javascript free. Some will use graphics, and other will use font icons. In addition, we will learn to build Suckerfish drop-down menus for large screens. At the end of each module, we will look at the browser support and how far back each approach will work. We'll also build one navigation project using only the latest technology of flexbox and CSS grids. Then, just for fun, we'll explore Sass include when we build our hamburger icon. All of these modules will be built using Sass and ready to include in your next project. Please join me as we explore responsive navigation for small, medium, and large screens in this, the last of four Hands-on Responsive Design courses from Pluralsight.

Cover Navigation
In this module, we will build cover navigation for small screens and horizontal navigation for larger screens. First we'll look at the completed project so you have the end in mind. Then we'll build an expanded small screen navigation. Next, we'll enhance the CSS for the medium and large screen CSS. Then we'll add the JavaScript to make the hamburger icon work, and finally, test our work on multiple browsers and devices. Let's take a look at where we're headed for this module. First, we will style the small screen navigation so it looks like this when it's expanded. Then we'll build the medium screen navigation as a horizontal menu. Then we'll make minor modifications to build the desktop navigation. Finally, we will turn to JavaScript and write a simple function that shows and hides the small screen navigation by changing the class of the unordered list. Let's get started with the small screen nav. We will continue building on the start file that we already have open. In the demos for unit, you have two icons, which you can use for the hamburger navigation. The menu white PNG is for dark menu backgrounds, and the menu black PNG is for light backgrounds. Please move both of these from the demos to the images folder in your start folder.

Expanding Navigation
In this module, we will build expanding navigation for small screens and horizontal navigation for larger screens. First, we will look at the completed project and then build out all the SCSS for all three views. Then we'll add JavaScript to make the hamburger to work. Next, we'll build a second version using CSS grids. Then we'll test our work and talk about the pros and cons of this method of navigation. Let's take a look at where we're headed for this module. The small navigation will be below the header and looks like this when it's expanded. The medium and large screen navigation will be a horizontal menu. We'll also build a new version using CSS grids so that we can easily move the navigation to the top of the screen. In the last module, we had a black menu icon and a white menu icon, which we built in Photoshop. Using Photoshop allows us complete control over the look and feel of the icon. In this module, we will use an entity instead. If you do a Google search for HTML entities, you will find massive charts of things you can type into the page that are not on a standard keyboard. You may be familiar with the copyright symbol, which you can use by typing the entity name of &copy or the hex value of &#169. In our case, there are two symbols that look a lot like the hamburger icon. You can display these using entity name or hex value. For this tutorial, we will use the 9776 entity. Grab a copy of the start file for this module, and let's get started.