Hands-on Responsive Web Design 4: Navigation

1. Introduction to Responsive Navigation Hello, and welcome to another Hands-on course from Paul Cheney. This is the fourth in a series of four in-depth courses on Responsive Web Design. In this course, we will focus on different ways to handle small, medium, and large screen navigation. In this introduction, we will start with a pop quiz on some interesting history related to responsive navigation. And then we'll connect the quiz to what we will learn in this course. We'll make sure that you are in the right place, and we'll take peek at the projects that we're going to build together. I will quickly introduce you to some of the tools I use and the start file that we will work with. Before we start talking about navigation, code, and design, let's review four dates that are important to web developers. One important event happened in June of 2007 that forever changed the thinking of web developers. What in happened in April of 2010 that was related event? What happened on March of 2011 that tipped the tables? Finally, what happened in fall of 2013 that cemented in place the previous events? Well, Apple released the iPhone, which was capable of browsing the internet, which shrunk the screen size and instantly changes our approach to web design. About three years later Steve Job introduced the world to a medium- sized portable screen tablet. Less than one year later, portable devices outsold desktop computing platforms. By the fall of 2013, tablets alone were outselling desktop computers. So, how does this relate to our course on responsive navigation? Instead of tracking the largest screen we could safely design for, we now had to design for all screens from tiny phones to large desktops. The navigation of a site could no longer display all the options at once, but had to be an option that users of small screens could choose when they're ready to view another page. We had to come to grips with the fact that a significant part of our web traffic would now be small screens, and we could not just ignore it. We learned about things like mobile first, responsive design, and progressive enhancement. If all of these terms are making sense and you want to expand your navigation toolbox, then you're in the right course. In this course, we're going to learn to build several kinds of navigation for handling a few to many site links. We'll also explore how they display on small, medium, and large screens. As front-end web developers, we have lots of coding tools to choose from. Let me tell you about a few that I use. I've used Brackets, Sublime Text, Visual Studio Code for editing, and they all work great. For compiling my SCSS, I've used Koala app, Scout-App, and Compass.app. For FTP, there are usually plug-ins for most of these text editors that you can install. I also like to use Cyberduck and FileZilla. However, when I get away from teaching and I start working on my own client sites, I use Dreamweaver. It handles all three activities out of the box, and the latest version even automatically uploads my CSS when I make changes to the SCSS files. The only drawback is that it's not free like everything else. The start file looks like this, and as you can see, the entire page is styled except for the navigation. All the Sass partial files are included, as well as linked empty JavaScript file. I also have some images and CSS file which we will immediately overwrite with our new code. In this introduction, we took a pop quiz and reviewed the answers. We made sure that your are interested in responsive navigation and looked at the projects we will build. I also listed some tools I use, and we took at the start file. Now we're ready to learn about coding the navigation.


2. Coding the Navigation Building Primary and Secondary Level Navigation Using Unordered Lists Hello, and welcome back. I'm excited to have you with me for this module. First we will review why the unordered list is the de facto container for navigation. Then we will review single level navigation and two deep level navigation, followed by the typical CSS rules, and finally getting our start file ready to go. If you've used a content management system like WordPress or Joomla or Drupal or Adobe Business Catalyst or any of the other mainstream content management systems, you will have notices that they typically build the navigation using an unordered list with list items and anchors. Navigation links should be inside the navigation tag. Inside that we create an unordered list and a list item for each link. Each list item contains a link and the menu name. Pretty straightforward. For two level deep navigation, we start by removing the parent href, and we change it to a pound sign. Next we find the closing li of the parent link and insert some extra returns. In that gap, we insert a second unordered list and some more list items with anchors. These become the submenu items for our site. Here's some of the CSS rules that we will be using. The nav affects the background color of the entire bar. We'll use the ul to remove the list item bullets. The list items in this case will be floated. The active list item is the one that matches the page name. The anchors are clickable links, and here we still have the text and control the menu item size. These next three are for submenu items, and they inherit many of the parent properties. Now we will use the nesting power of Sass. We don't have to type all of these rules out. Grab a copy of the start file for this unit. Open it in your text editor, and make sure you have a CSS preprocessor running. Let's take a look at what we have. In the index, we have our navigation already built out. Notice that two of the menu items have submenu items, which we will style. Also notice that the parent links do not have href. I have also added a span tag around part of each link name, and we'll show you why in the next module. Normally the active class is assigned dynamically using a script or by code in the CMS. For now, please add class="active" to the first parent link the menu. When we view this on a browser, it's really ugly, but that's okay. Now we can go to work. First, we reviewed why the unordered list is used for navigation. Then we looked at single level navigation and two deep navigation, followed by the typical CSS rules, and finally getting our start file ready to go. Now that we're done with coding the navigation, let's move on to cover navigation.


3. Cover Navigation Overview of 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.


4. Small Screen Navigation Open the index page, and just after the opening nav add an empty open and closing button tag. Now switch to the small SCSS file, and let's talk to the nav tag. Remember to add a comment to the closing curly. Please set the background-color to the variable $menuColor. Remember that the menuColor variable was created in the variables partial. Now let's set the position to absolute. We will move it to the top using top:0, and then we'll set the width to 100% so it fills the screen width. Let's work on the button next. Let's add a background-image using the white icon. We also need to prevent it from repeating over and over. Since we can only see part of the icon, we need to resize the button and set the width and the height. Now we have a big button. Let's change the background-color to be 10% black using rgba. The A stands for alpha. The graphic is showing up, but it's too large, so we will resize it down to 86%. Then we will tell it to be centered in both directions. Now the line around the button is a bit harsh, so let's change it to 20% black and change the border-radius to 10px. The last thing we need to is add some margin around the button to move it away from the edges. Now that's a good looking button. I have included this CSS for this button in the snippets file in case you don't want to type it all out. Now let's move on to the navigation links. We will start by styling all the anchors. We want the items to be clickable across the entire width of the screen, so change the display to block. Let's set the text color to white and remove the underline using text-decoration: none. These are a little small for touching, so let's increase the size with the padding of .7rem top and bottom and 2% at the sides. This will match the hamburger icon above. A big part of good design is being consistent. Now let's add a border between the links to visually separate them using border-bottom, and, of course, an rbga color for the line. Now that looks good, but it's a little hard to tell the main menu items from the submenu items, so let's add a rule to the submenu items of ul li ul li a. Now let's increase the padding on the left to 8%. Between the uppercase of the main menu items and the extra indent of the submenu items, we have really good contrast. Remember during the last video we added class="active" to one of the primary menu links. Let's now add a CSS rule that talks to the active menu item. We'll change the background-color to the primayColor from our variables.


5. Medium and Large Screen Enhancement Now let's move on to the medium screen styling. We are going to build a horizontal menu for the medium screens that is beneath the header. Add a nav with open and closed curly. The first thing we'll do is move the navigation to its normal position in the flow of the page using position: relative. Next, we'll hide the button, which we don't need with a horizontal menu, using display: none. We need to change the menu to a vertical menu by having the list items float to the left. Now that made a royal mess of our page because the nav bar collapsed. Not only that, but now you can see my typo. Sorry about that. It should be fixed in your version. Let's go back to the index file and add class="clearfix". We learned about this in a previous course. This references a block of CSS at the bottom of the small SCSS file. It prevents the nav bar from collapsing. Now we can see the menu items. Notice that the first menu item is touching the left edge of the screen. We will slide the ul over with margin-left. Now we need to do some serious work to the links. First we need to remove the bottom border from the small SCSS. Then we need to add a border to the right to separate all the menu items. (Working) Let's also change the padding to .7, which is the same as it was before, but .9 at the sides. Now let's turn our attention to the submenu items. First we'll tell the submenu ul to move way off the screen using left at -999em. Now we need to ensure that when they are displayed they are above everything else, so let's set the z-index to 99 layers up. Let's also change the background-color of the submenu items to 10% lighter than the menu bar using SCSS lighten. In order to get them to come back on hover or touch, we need to set the submenu to position:absolute. To get the submenu items to display, we will wait for a hover on the parent list item and change the submenu ul to left: auto. Now they look a little funny. So let's talk to the submenu list items and prevent them from floating. We can also add a border-bottom to separate the submenu items from each other. (Working) Let's set the width of the unordered sublist to 10rems and see what that does. We are getting really close. I am sure that you have noticed that on my screen the menu bar is wrapping to two lines. This is completely unacceptable. If we look at the index file, we can see that I have added a span around one word in each menu item. If we hide the span, then the menu links will be shorter, and perhaps they will fit. Set the ul li a span to display as none, and sure enough they fit. Now all we're missing is some fancy stuff. Let's change the background-color on the anchors when hovering with the mouse, and we'll darken the menuColor by 10%. Right now the color instantly changes when we hover over it, but we can slow it down using a transition on the ul li anchor. We will transition the background over .3 seconds using linear. We also have to add a webkit version for some incompatible browsers. You can see the slowed down transition really well on the submenu items. Now we're ready for the large screen enhancements. All we need to do here is bring back the longer menu item names, now that we have more screen width to show them. Let's talk to the ul li a span and display it as inline. Now we can view our work starting from the small to the medium to the large and see how seamlessly our navigation works together. But wait. We're not done yet. Let's say that you needed this menu to match the red color scheme of your site. Let's go back to the variable's SCSS file and change the menuColor variable to #900, one change only. Wow, you see how beautifully that works on all three versions of our site, and it only took one change. You have to admit this is pretty cool. It worked because we used Sass lighten and darken and RGBA colors. Now we're ready for the JavaScript.


6. JavaScript for the Hamburger Icon We're going to toggle a class name on the unordered list using JavaScript. It's like flipping a light switch. If it is off, then it goes on, and if it's on, it goes off. We will tie our CSS to this switch. Open the index file, and notice at the bottom of the page there is a link to the JavaScript file already in place. Please open the JavaScript file, and let's create a function called toggleMenu. Remember to add a comment to the closing curly brace. Before we get to the fancy stuff, let's test it using console.log and send a message you clicked me. Let's return to the Chrome browser and open the Inspect tools. Select the Console tab, and clear any messages that may be there. Click the MENU, and you see that nothing happened. That's because we need to connect that button to the function. To do this, we need to add two IDs to the index of our page. An ID is like giving a name to one of your children, and JavaScript loves to work with IDs. Let's add an id of hamburgerBtn to the hamburger button. We'll also add an id of primaryNavigation, or Nav for short, to the unordered list. Now we can communicate with our page using JavaScript. Now you could add onclick="toggleMenu()" to the button, but then you have script mixed with our HTML. We will keep it separate by creating a variable called x and assigning it to getElementById for the item named hamburgerBtn. Now add x.onclick = toggleMenu, which is the name of our function. This line of code is just waiting around for someone to click on the hamburger button so it can tell the function to run. Let's save our work and see what happens in a browser when we click the hamburger icon. Do you see the message appearing? That means that JavaScript is talking to our button. Now let's change what the function does. Remove the console.log message. Instead, type document.getElementById('primaryNav').classList.toggle, and we will toggle a class name closed. This going to toggle the class list of the primaryNav, which is our unordered list. This will add the class closed if it's missing and remove it if it's there. Let's watch this in action. Watching this in action is a bit messy with live preview, so turn it off and open the index page directly in your browser. In the Chrome tools, click the Elements tab. Right-click to inspect the navigation. Look for the ul with an ID of primaryNav. Click repeatedly on the hamburger icon, and watch for class="closed". It will be added and removed. Pretty cool, right? Now all we have to do is tie this class to our CSS. Open the small file, and let's talk to the ul.closed and change the display to none. Reload the page, and click the hamburger icon several times. The menu closes and opens just like it should. Did you notice that when the menu is closed the top of our logo is covered up? In the small CSS, add margin-top of 44px to the header, refresh the page, and the problem is solved. You may have noticed that when you refresh the page the menu is open by default. Actually, we want it closed by default. So let's open the index file and add a class of closed to the ul. Now when we refresh the page, the menu starts out as closed. Watch this next part closely. When the navigation is showing on small screens and we widen the browser, the menu is still showing. So far, so good. However, when the menu is closed on small screens and we widen the browser, the navigation disappears completely. To correct this, open the medium file and tell the ul when it has a class of closed to display itself as a block. Now when we widen the page, the menu appears no matter what. Let's up load this to my sandbox website, and we can start running tests.


7. Testing We're going to start out testing our work on the oldest technology and assume that if it works there it'll also work on the newer stuff. This navigation scheme works on my iPhone 4 from June of 2010. It works on Internet Explorer 10 and the newer Edge browser. The horizontal navigation also works on my iPad from 2010. The JavaScript behind this is really basic, and so we are seeing success everywhere. Now that we know how to build the cover navigation, what would it be useful for? We can display all 10 items with room for a couple more, so this would work great for a site with say 12 links or less. It is possible scroll the menu and have more links, but the user may accidently activate the menu item when trying to scroll, and that could be frustrating. Using a mix for primary and secondary navigation items is no problem. The horizontal navigation for wider screen works great in combination with the smaller screen navigation. In this module, we started out by taking a look at the completed project. And then we built the small screen navigation using code that lightened or darkened the base color. Next, we engaged in a little progressive enhancement for medium and large screens. We then jumped into JavaScript and changed the class name to hide or show the navigation links. Finally, we quickly tested our work on some older devices and found that it worked great. In the next module, we're going to build navigation that expands instead of covering up the page.


8. Expanding Navigation Overview of 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 © or the hex value of ©. 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.


9. Styling the Small, Medium, and Large Screens Please open the index file in your text editor, and let's add an entity to the button using ☰. With the live preview running, we can instantly see the entity icon appear. Let's open this small SCSS file and add nav with open and closed curlies. Please set the background-color to the variable $menuColor. We will be using this red color for this module. Now let's style the button. Within the nav selector, add a button selector, and let's change the size of the hamburger icon. Because we are using an entity, we can change its size using font-size. Let's use 1.5rem, and now we have a large ugly button. Also because we are using a font, we can change the color using CSS instead of building a different Photoshop graphic. Please use the color white. The rest of these changes are identical to the previous module. We change the background-color to 20% black using rgba. We use a border of 30% black. (Working) Let's increase the width of the button, add margin to give us some space around the button, and finally specify a radius just in case the browser does not round it by default. Styling the navigation items is identical to the last module, so I've provided the code in the snippets file for this module. Please copy the first three selectors and paste them just above the button selector. If you look in the index file, you will see the second menu item has a class="active". In our browser, the main menu item and the children have changed to black. In order to get only the main menu item and not the children to change to black, we will use a greater than symbol between the class name and the anchor, like this. Now the medium SCSS is identical to the previous units, so rather than repeating myself, please open the snippets file and copy the code for MEDIUM. Paste it starting on line 2. Then copy the three lines of code for large screens from the snippets file. Paste it into the large file, also starting on line 2. Now let's preview our work starting with the small screen and expanding it out to medium and then to large. Notice that the page title stays below the navigation instead of being covered up as in the last module. Now it's time for JavaScript.


10. JavaScript for Switching Classes In the last module, we toggled a class of closed with a class of nothing. In this module, we will swap classes using a class of closed with a class of open. If you check the index file, you'll see that I've already added an id of hamburgerBtn to the button and primaryNav to the unordered list. We will use these in our JavaScript. We also have a link to the external JavaScript file already in place. Please open the JavaScript file. Let's start out by building a function called toggleMenu. Inside it we'll send a message to the console.log of It Worked. Now we need to create a variable and assign it to the button with an ID of hamburgerBtn. Then we type x.onclick, which waits for a button click and triggers the function toggleMenu. When we test our work, we can see our message in the console. So far everything is working out as it did in the previous module. Please remove the console.log statement. Now let's create an if/else switch using normal English. If the className is closed, then change the className to open; otherwise, change it to closed. Not too hard, right? Here is the JavaScript version. If the document element with an ID of primaryNav has a className of closed, then change the document element with an ID of primaryNav to a class of open; otherwise, assign the document element with an ID of primaryNav to a className of closed. Notice how we're using the reference to the document element with an ID of primaryNav over and over. Let's see if we can shorten this down a little bit. We will create a new variable called y and assign it to the document element with an ID of primaryNav. Now we substitute y in our if/else condition, and we're ready to go. Now that you've seen the code, you can either type it in or you can get a copy from the snippet's file and simply paste it over the entire script like this. If we take a look at the unordered list, we can see that the class name changes each time you click the button. Now all we have to do is tweak the CSS. From the top of CURRENT DEALS to the bottom of AWESOME CRUSIES is the unordered list. When the class for unordered list is closed, we will set the max-height to 0. When the class for the unordered list is open, we'll change the max-height to 31rem, which is 496 pixels. That's enough for the 10 menu item switch we have. If you have more, you may have to increase this value a little bit. Now when we click the hamburger icon, the red color opens and closes, but you'll notice that the menu words are still there even when it's closed. To correct this problem, we need to add to the nav ul overflow of hidden. Now watch this carefully. We still have a problem of the menu disappearing on medium screens when the menu is closed on small screens. Let's open the medium file and add ul.closed, and we'll set the max-height to 31rem. This will make it show up. You probably already noticed that when the page first loads the menu is open by default. We want it to be closed, so let's add class="closed" to the ul. This works great for all three screens. But wait. We're not done yet. Let's return to the small file. To the unordered list, let's add a transition so that it animates open and animates closed. We'll have to add a webkit prefix and a moz prefix, as well as the default transition for max-height property. This is what we now have. As we move between the small and medium screens, you may notice that the menu animates. If you think this is cool, then you're done; however, if this bothers you, then all you need to do is move the three transition statements from the ul to the ul.open selector. The result is no animating between views; however, you also lose the closing animation. This may not be a big deal since most of the time when a user selects a menu item you don't see the animation anyway. Well, now you know how to do it both ways.


11. Adding CSS Grids Before we test our work, let's take a look at using CSS grids to move the menu around. It's really easy. First we will duplicate the start folder and rename it startGrid. Load the startGrid folder into your text editor and refresh your live preview. We want to have the nav bar at the top of the small screen and below the header for medium and large screens. Let's start by displaying the body of the HTML as a grid. The body contains the header, nav, main, and footer semantic elements. Next, we'll set the rows to auto even though this is the default. Finally, we will create grid-template-areas called myNavigation, myHeader, myContent, and myFooter. Then we'll assign the header to the grid-area: myHeader, which is actually the second row down. Next, we'll assign the nav tag to the grid-area: myNavigation, which is the top row. Then we assign the main tag to display in myContent. And finally, assign the footer tag to display in myFooter grid-area. Now when we look at the page, the navigation has moved to the top just like it should. When we review the medium screen, the menu is still at the top. We want it below the header. Please copy the grid-template-areas from the small file. Open the medium file and add a selector for the body tag. Paste into the body tag. Switch position with myNavigation and myHeader. Save and refresh, and let's check out our finished page starting with small, then medium, and finally large. You've got to love CSS grids. Now it's time to upload both of these to the sandbox and test our work.


12. Testing Once again we'll test our work on the oldest technology and assume if works there it will also work on newer technology. This navigation scheme works on my iPhone 4 from June of 2010. The second version using CSS grids completely failed; however, as you can see, the fallback position looks just fine. My iPhone 6 from September of 2014 is also working well with the start file. The second version using CSS grids also works great. It works on Internet Explorer 9, 10, and 11, as well as the Edge 15 browser. The second version using CSS grids totally fails on Internet Explorer 9, 10, 11, as well as Edge 15, but the fallback position, as you can see, is acceptable. We finally have success with the Microsoft Edge 16 browser recognizing CSS grids. Now that you know how to build expanding navigation, what would it be useful for? We can display nine items above the fold on small screens when the navigation is below the header. Using flexbox allows 12 items without any scrolling. You should really try to avoid scrolling if possible. Using a mix of primary and secondary navigation items is no problem. The horizontal navigation for wider screens works great in combination with the small screen navigation. In this module, we started out by taking a look at the completed project, and then we built the SCSS for all three screens. We then jumped into JavaScript and switched the class name to hide or show the navigation links. Next, we built a version that uses CSS grids. Next, we tested our start file on older devices, and it worked great. The second version with CSS grids failed on older technology. Finally, we reviewed where this navigation would work well. In the next module, we will build navigation in the footer that is completely JavaScript free.


13. Footer Anchor Navigation Overview of Footer Anchor Navigation Hello, and welcome back. In this module, we'll build a navigation system that is totally JavaScript free. This navigation is sometimes called footer anchor navigation. First, we'll look at the completed project and then all the source materials. Next, we'll build out the Sass for the small screen view. Then we'll make some minor changes to the medium and large screens. Then we'll test our work and talk about the application of this navigation style. Let's take a look at where we're headed for this module. The small screen to hamburger icon will be at the top of the screen, and it looks like this when viewing the menu links. Notice that I did not use the word expanded because we are not expanding the menu. We're also using the words open and close with the hamburger icon to indicate what action will occur when the icon is clicked. The medium and large screen navigation will be a horizontal menu just like the previous units. In the demos for this unit, I have provided four carefully crafted menu icons. There are two PNG files in white and two more in black. They are 19px tall by 93px wide. We will be using the white versions in our tutorial. In this unit we will implement Sass extend, in case you haven't used it before. In this example, we will have a class of face, which has a gray border with a radius of 30 and a width and height of 60px. The angry class is the same as the face, but with a background-color of orange added. The sad class is the same as face, but with a background-color of blue added. When it renders, the final CSS will look like this. Notice that the classes of angry and sad have been added to the face class. Please grab a copy of the start file. You will notice that the js folder is missing, and we've removed the linked in the HTML to the external JavaScript file. Also notice that we've moved the navigation section to the bottom of the page below the footer tag. With the changes I just mentioned, our current start file is missing the hamburger at the top of the page. The unstyled links are at the bottom of the small screen. The medium and large screens also have the links at the bottom; however, they are mostly styled from what we learned in the previous modules. With that introduction, let's get started.


14. Building the Small CSS Please open your index file. The first thing we need is a division at the top of the small screens to hold the hamburger navigation icon. Let's give it a class name of smallNavBar. Inside that we need an anchor that the user can click to see the menu. Let's give it a class of hamburgerOpen. Let's set the href to #footerLinks. This is an internal page link. We will build this destination here in a minute. Let's temporarily type the word jump just before the closing anchor tag. Now we need to scroll down to the bottom of the page and add an id="footerLinks" to the opening nav tag. Now let's save and reload the page. When you click Jump, the page scrolls down as far as it can to display the links. We need to get current deals to appear at the top of the screen. Let's open the small file and add a nav selector. Please set the height to 100vh and set width to 100%. We cannot use view width for the width because it will not work right if your page has a scroll bar. Using view height will ensure the navigation tag exactly fills the screen regardless of whether we're viewing the page on a small iPhone 4 or a larger iPhone 5 or a Nexus 6 or even an iPhone 10. By using view height, we are future proofing our code to work on any device that will come out in the future. Now when we reload the page and click Jump, the first navigation link jumps to the top of the window, just as it should. Our next goal is to get the hamburger button to display full width at the top of the screen with a hamburger icon the left side. Here is the HTML we will work with. The division will be full width and have a background color. The button will be just wide enough for the background graphic, and it may or may not have a color depending on your design. Please open the HTML file. Now let's style the Jump button. First remove the word jump from the HTML file. Open the small file, and let's create a class for hamburgerOpen before the navigation tag, not inside it as we did before. Before we can even see the anchor on our web page, we need to do four things. First, display it as a block. Then set the width as 7rem. Then set the height as 2.75rem. Finally, assign it a background-color of red. We will remove this later. Now we have a button that is 44px tall, which is the right size for a finger. Remember that we have four carefully crafted graphics in the images folder. Let's add a background-image as menuOpenWhite. We will set the background-repeat to no-repeat. You see how the graphic is touching the top and left edges. This is simply not acceptable. Let's set the background-position to 2vw, which is 2% from the left edge, and we will center it top to bottom. Now that looks pretty good. Remember that the anchor is living inside a division. Let's style that division, which has a class of smallNavBar. We will assign the background-color to the variable menuColor. This is what we now have. Please remove the red background-color and refresh the page. At this point we could be done; however, if you like the hamburger icon a different color, you could add a background-color of secondaryColor. It's your design choice. Now let's set the background-color of the navigation tag to the variable menuColor. When we click the nav icon, we instantly see the links appear. These links really need some design help. Let's style them just like the previous module. I have provided the code for you in the snippets file. Please open the snippets and copy the three selectors for small screens. Paste it below the existing background-color. Now refresh the page, and the menu links are done.


15. Optimizing the User Experience Now let's solve a user experience problem. I pull up the site on my phone and click the OPEN menu icon. Instantly I see a list of pages. But what if I change my mind, and I want to close the menu? Now you and I both know that all we have to do is scroll up the page, but this is not obvious to the end user. When the user clicks the OPEN button, they expect to still see the hamburger icon, perhaps with the word CLOSE next to it. The last thing they're looking for is the button to disappear, which is what we have now. We need to build a close hamburger icon at the top of the menu to solve this problem. Please open the index file. Let's scroll down to the nav area and add a division. Inside that division we'll add an anchor, this time with a class of hamburgerClose. When this link is clicked, we want to automatically scroll to the top of the page, so let's add a internal href of #top. Then we'll scroll to the top of the page and add an id of top to opening body tag. Before this will become visible, we need to style the new link. Please open the small file. The hamburger CLOSE button should be identical to the hamburger OPEN button that we already made so that the user experience is seamless. Let's copy the code for the hamburgerOpen and paste it below itself. Please change the word Open to Close in the selector. Also change the image link from menuOpenWhite to menuCloseWhite. Now return to the browser, and after refreshing, click on the hamburger. Notice that it seamlessly appears to show and hide the navigation even though it is really only sliding the page up and down. I promised you earlier that we would implement Sass extend, and this is the perfect place. Notice that all the rules for hamburgerOpen and hamburgerClose are identical with one exception. Please copy the hamburgerOpen selector and paste it above itself. Remove the word Open so the selector just says hamburger. Remove the reference to the background-image. Now in the hamburgerOpen remove everything except the background-image line. Type @extend .hamburger;. Now do the same thing with hamburgerClose. Reload your page and test the results. If you open the CSS file that is built by the CSS preprocessor, you will find a section for navigation and see the hamburger, hamburgerOpen, and hamburgerClose. They all share the same five statements. That's the beauty of Sass nesting. Now let's go back to our project.


16. Building the Medium CSS As you can see, currently the medium and large screens are messed up a little bit. Please open the medium file. The first thing we're going to do is talk to the a.hamburgerOpen. Type a comma, and then talk to the a.hamburgerClose, and then display both of them as none. Now our navigations are working great, but it's at the bottom of the page. Let's now move it to the top of the page. Please add position: absolute and then top at 0. Now it's at the top of the page, but it's too tall. We need to change the height from 100vh to automatic. Now we're making real progress. Notice that the navigation is covering up the top of the logo. Let's add a header section in the medium file, then add margin-top of 2.75rem. Now let's look at our page starting from the small, which has an OPEN and CLOSE button, to the medium, and then finally to the large. Now just for fun, let's add a background-color of secondaryColor to the hamburger class. Because we are using Sass extend, it changes the color for both the OPEN and CLOSE buttons. Let's upload this to our server and do some testing.


17. Testing Before we see the results of this navigation style, let's talk about how to test your web pages. Chrome has a nice set of emulation tools that you can use to see what your page may look like on various devices. You can access these by clicking the Toggle device toolbar. Once it is active, you can choose from a list of different devices. You can also edit this list to add your favorites to the mix. The top option, Responsive, allows you to change the width of the browser to see all possible breakpoints. I like to use the devices that have device frames and then do screen captures for my videos for Pluralsight; however, these are not always accurate, as I will now demonstrate. Let's pull up an iPhone 6 in Chrome emulation. Now let's display my real iPhone 6 on the screen and see the difference. Notice that the real phone has browser address bar at the top and another bar at the bottom. Neither are showing in the Chrome emulation version. If I was trying to see how many menu items would fit on screen, I would get two different numbers. It is for this reason that when I do testing for my courses I upload my site to a real server, then open the page a real phone or tablet. I have lots of each. Then I do screen capture and email it to myself. Then I open it up in Photoshop and place it in a pretty frame so it looks nice. Then I save it as a PNG, and it's ready to load into PowerPoint, and it's 100% accurate. This navigation scheme works when I open this web page on my iPhone 4 using the Safari browser. Then I click the OPEN button to see the submenu items. It also works when I open the page on my iPhone 4 using the Chrome browser and I click to see the submenu items. Now let's try it on a newer device, the iPod 6, which has a really small screen. When using FireFox, the open and close navigation buttons work beautifully. Here we have the same device, but with the Chrome browser, and it's still working well. It also works great on a first generation iPad, and it works on Internet Explorer 11, back to 10, and even all the way back to 9. It works on Edge 15 browser in small and wide widths. Because the design is so simple, this may be the most backwards compatible version we have built yet. Now that we know how to build the footer anchor navigation, what would it be useful for? Because we're taking the whole screen, we can have up to 9 links without any scrolling, even on this tiny iPhone 4. It's JavaScript free, so it works on lots of browsers. As you saw, it's really easy to use. I also like the combination of the OPEN and CLOSE words next to the hamburger icon. It improves the user experience. In this module, we first looked at the completed project and then at the source materials. Then we built the CSS for the small screen view and tweaked it for the medium screen. Then we tested our work and talked about where this would work really well. In the next module, we will build a small screen navigation that expands the submenu items on touch.


18. Expand on Touch Overview of Expanding on Touch In this module, we will build a menu that expands the submenu items on touch. First, we will look at the completed project and then get a copy of the main menu from GitHub. Next, we'll add pieces to the start folder, and then we'll connect all the pieces together. Then we'll make some simple changes and finally test our work and talk about the best application for this approach. Let's take a look at where we're headed for this module. We are going to have a hamburger icon at the top of the small screens with the word OPEN. When it is touched, it will drop down and display the main level navigation items above the web page content. Notice that the POPULAR DESTINATIONS and FAVORITE RESORTS both have down pointing arrows to indicate there are submenu items. If any menu with a submenu is touched, it will expand further to show the related submenu items. We will use the same navigation scheme for medium screens. The largest screen will still have a horizontal navigation with drop-downs on mouse hover. In the previous units, we used progressive enhancement so that small screen rules were in effect across all browser widths. The medium rules were added to the small rules starting at 35rem. Then the large rules were added to the small and medium rules starting at 64rem. In this module, we'll do things a little different for the navigation CSS. We're going to add another SCSS partial file just for the small screen navigation. It will have a max width of 64rem. This means that any screen wider than 64 will not be affected. The large file will still contain the standard horizontal menu bar. Let's take a look at the code we'll need to make this work. On GitHub I have a repository for mobileMenu that expands on touch. It is based on the work of this designer developer. You can download a copy from github.com/paulcheney/mobileMenu, or you can use the version in the demos for this unit. If you open the mobileMenu from the GitHub or from the demos folder, you will see this sample index file, which is pretty ugly on wide screens. When you make the window narrower, the CSS kicks in, and you see the nav bar at the top of the screen. When you click or touch the menu, it expands down to show only the main navigation links. When you click or touch the parent link, it expands to show the subnavigation links. In the demos folder for this unit, there is a start folder we will be working on. The second folder you will need can either be the mobileMenu-Github from the demos, or you can download the latest version from my GitHub account. As we build this unit, we will demonstrate the following items: You need to have your navigation links in a nav tag. You need to have a button with an ID inside the nav tag. The links need to be anchors, which are inside the list items, which are inside an unordered list, which has an ID. Any list items with submenu items also needs to have a class called parent assigned to it. Let's go ahead and get started.


19. Building the Small Screen Navigation Our first step is to get a copy of the start folder and move pieces from the GitHub repository. Move the four menu icons to images inside the start folder. You will either use the black set or the white set depending on the background color of your menu. Now move the mobilemenu file to the sass folder. Let's rename the file to _mobilemenu.scss. This will turn it into a partial. Finally, copy the JavaScript folder and file to the start folder. Now that JavaScript, the style sheet, and the four images are in place, we need to connect them together. In your text editor, open the styles file. On line seven add an import for mobilemenu. Now let's switch to the index file. Just above the closing body tag, type an open and close script tag. Set the src to js/menuToggle.js. In order for the JavaScript to work, it needs to be connected to a button, as well as to an unordered list. We will make these connections using two IDs. Now open the menuToggle.js file. On line one, we can see that we need to add a button with an ID to the HTML. Please open the index file. Around line 29 add an open and close button. Please set the id to hamburgerBtn. If we look at the JavaScript file, we can see on line seven that we are assigning that button to a variable of x. Then on the next line we're waiting for someone to click the button so we can trigger the toggleMenu function up here. Now on line two we can see instructions to add an ID of primaryNav to the unordered list. Open the index page, and we'll add it right here. Notice that neither the button nor the ul currently have a class assigned. Please open the JavaScript file. You can see on line four and five that we are toggling a class of open to both the button and the unordered list. This will allow us to not only open and close the menu, but also change the words on the hamburger icon by changing the background image. Let's check out our work. When we open the web page and click on the hamburger, the menu opens and closes properly. When we touch the parent menu, we can see submenu items appearing beneath. If we open the Chrome tools and inspect the page, we can see the class of open is being added and removed from both the button and the unordered list. Now make the page wider. Switch to Responsive. Notice that the menu changes from red to blue. That's not going to work. Now it's time for some more tweaking.


20. Modifying the Navigation Open the variables file, and notice that we have a menuColor variable. Let's copy it. Open the mobilemenu file again, and replace the hex color value on line 23 and on line 49. Now when we view our page from small to medium to large the menu is the same color. Not bad, right? Let's try something else. Open the variable file, and change the color for the menu to #654. Again we'll look at the small window with the OPEN and CLOSE menu button, to the medium, and finally to the large. Notice how simple that was. Now let's change the menuColor to #c6dfe6. By the way, that's a sampled color from the water down here. Notice that while it worked, the white menu doesn't have enough contrast. Please open the mobilemenu file. On line 30 and 37 change the name of the background image from White to Black. We should also go down to line 63 and change the color of the text to black as well. Finally, open the large file, and on line 19 change the color to 90% rgba black. Now here's what we have for small, medium, and large screens. We still have one more problem to solve. This problems only appears when the screen width is exactly 1024 pixels wide. It cannot be seen if all you do is look at different devices from the drop-down list. That is why scaling the browser width is so essential to pick up these kinds of errors. Type 1024 in the width. Notice that the menu items are displaying funny. This is because the max width of 1024 is still in effect when the min width of 1024 has already started, so the CSS is overlapping. We will fix this is in the styles file. Grab a calculator and take 64rem times 16 basefont, and then add 1 pixel. Now divide by 16 to get the new rem value for 1025. Change the value on line 15 to 64.0625rem. Open your browser and refresh the page. Notice that the navigation is now working properly. Now let's upload and do some testing.


21. Testing Remember that the screenshots you are looking at are from real phones not Chrome emulation, so they should be pretty accurate. On my iPhone 4 from June of 2010 we have complete success using the Safari browser. It also works on Chrome on that same iPhone 4. However, if we back up just 6 months to January of 2010 when the iPad was released, we have problems with the menus. As you can see, the CSS for the menu is not working at all. I went back and changed the media query max-width value from rem to em, which is an older unit. After that, I was able to get the menu to show. It looks like the Safari browser predates the introduction of the rem unit. I checked to see if the problem was limited to Safari, but Chrome doesn't work any better. I went back into my code, and I removed all rem units and replaced them with em or pixels, and now it works pretty good. The browser is still struggling with positioning the background image correctly. Our navigation works on Edge 15 in both wide and narrow widths. It also works on Internet Explorer 10 and 11. When viewing this on Internet Explorer 9, the JavaScript on our button doesn't work to change the class, which means I could click all day and the menu will simply never appear. So, how far can we push this navigation? Well, we could easily have 10 items showing at one time. If you had 5 main menu items and each one of those had 5 submenu items, you could have a site with 25 pages even on this small screen. Of course, using a newer phone would get you many more pages without scrolling. It's also a winner because the color is so easy to update, and it's lightweight because we're not using the bloated jQuery library. In this module, we started out by viewing the completed project. Then we grabbed a copy of the menu from GitHub. Next, we added stuff to the start folder, and then we wired all of the pieces together. We made a few simple changes and then finally tested our work and found that they had some trouble on really old devices and browsers. Finally, we decided that we could have as many menu items as most normal sites would require. In the next module, we're going to do something very cutting edge with CSS flexbox and CSS grids.


22. Single Level Navigation Overview of Single Level Navigation In this module, we will build single level navigation using all modern technology. First, we will review what you'll learn in this module and look at the finished page. Next, we'll build the small screen version, followed by the medium screen version, and finally the large screen version. After uploading our work, we'll test it on modern browsers and newer devices. In this module, we move from two level deep navigation, which we've been using, to a single level navigation. We will also use flexbox and grids instead of floats and positioning, as we did before. Instead of focusing on seeing how far back our navigation will work, we'll only be looking forward to what is possible using the new technology. This means that we'll have to vote some of the noncompliant browsers off the island, so to speak, because they do not support the new stuff. What we learn should be usable in the near future as the older browsers are updated. Finally, just because it's so easy, we will introduce a new approach for medium screen navigation. Let's take a look at where we're headed for this module. We are going to have a hamburger icon at the top of the small screen with the word OPEN. When it touched, it will jump down to display the navigation items, which are at the bottom of the page below the footer. When the page width is above 35rem, we will move the menu items to a fixed width sidebar. Now this may not be something you personally like, but using grids, this is so easy that I wanted you to at least see it as a possibility. On large screens, we'll then move the navigation links again and place them between the header and the main content. We'll also demonstrate how easy it is to have centered and right navigation links. I think you'll be impressed. The HTML of our start file has five distinct areas within the body tag. First is the standard header tag, followed by a division with an ID of navBar. This is for the hamburger OPEN icon. Next is the standard navigation tag with all the links, followed by a standard main tag with the page content, followed by the standard footer tag. Since we will be using CSS grids to lay out this page, the order of these five areas is completely irrelevant. The only consideration I took into account is the unfortunate user who's on a dumb browser that does not understand grids. They would be displayed in the order you see here. The nav tag contains an unordered list with 10 links. There are no sublinks in this module. Notice that the deals menu has a class of active so we can implement the design principle of wayfinding.


23. Building the Small Screen Navigation For the small screens, we will create five grid template areas. Here you can see the five HTML areas. We'll then assign each area to display in one of the grid cells. Because list items are block elements by default, we will not need to use flexbox just yet. Grab a copy of the start file from the demos, and let's get started. Notice that there is not a JavaScript folder and no JavaScript dependencies. Please open the index file, and notice that the body has an id equal to top, and the division has a href of top. These two work together to show and hide the navigation links as we demonstrated in the previous module. Notice that although the division has an anchor with a href, when we pull up the web page, it does not show up. Let's start by styling the open hamburger icon. In the small file, we are going to style a class called hamburger and then extend it using Sass to change the icon that is being displayed. Since we did this exact thing in the previous module, I have provided the code in the snippets file in the demos for this unit. Please copy and paste the code starting on line 27. When we look at the results, we have a clickable gap below the header, but we need to add a color to the division to make it show up. In the HTML, you can see a division with an id of navBar. In the small file, create a selector for the div#navBar, and give it a background-color of menuColor, which is a variable. When you refresh the page, you will see our golden navBar is ready to go. Clicking it now will move the Home button to the top of the screen, just as it should. What we need now is the companion hamburger CLOSE icon at the top of the site links above Home anchor. Open the HTML file, and you can see on line 38 another division with an anchor inside. This anchor has a class of hamburgerClose. Let's style this to become the CLOSE hamburger icon. In the small file, copy the selector for hamburgerOpen and paste it right below itself. Please change the selector to match the hamburgerClose class from the HTML. Then change the graphic to menuCloseWhite. Using Sass extend, which we covered earlier, allows us to reuse the rules from hamburger and add a background image. Once again we can see the space created by the hamburger icon, and when we click it, the menu jumps up and down as it should. What we're missing is the background color behind all the links. In the small file, create a selector for nav. Add a background-color of menuColor. Also add a width of 100% and set the height of 100vh. Now when we refresh the page and click OPEN, the menu fills the screen. Styling the links is identical to the previous module, so open the snippets file and grab the code for the ul li a and paste it below the height statement. Save and refresh, and there are the links each separated by a line. What I want next is a line between the top link of Home and the CLOSE hamburger icon. Now watch this closely. Add a ul li a with a border-top that matches the other border. This added the border we want above the Home button; however, it also creates a double border on all the other links. So let's go back and add a pseudo class of first-child to the list item. Now we have a single border separating all of the items, and it looks great. Let's now put all of these pieces in the correct place using CSS grids. In the small file, in the body tag add display as a grid. Then create grid-template-areas of hamburger, logo, content, footer, and links. Yeah, I just made up these words. Now we need to assign our elements to the correct area. Please assign the header to the grid-area: logo. Then assign the division to the grid-area: hamburger. Next, assign the nav to grid-area: links. Then assign main to grid-area: content, and finally, footer to grid-area: footer. Now refresh your page and be amazed. Remember that in the HTML we have a class of active assigned to the deals menu item. Let's add CSS for the active state by setting the color to black and the background-color to rgba 40% white. Now the Deals menu item is visually changed. Next, we set the hover to a background-color of 30% black. To see this effect, we will switch to Responsive. Now on mouse hover we'll get a nice smooth transition. Now everything is working as it should. Let's move on to the medium screen.


24. Building the Medium Screen Navigation For the medium screens, we'll create four grid template areas. Here you can the see the four HTML areas. We'll then assign each area to display in one of the grid cells. Notice that there is not a place for a nav bar with the hamburger icon. We're going to hide it using display:none. For the medium screen, we will change the height of the links to auto and change the alignment to right just to see if we like it or not. There are two elements that we're not going to need on the medium screens, the OPEN hamburger and the CLOSE hamburger. Please open the medium file, and let's create a selector for div#navBar, as well as nav div a.hamburger. Then we'll display both of them as none. Now you can see they're both gone, deleted, zapped. Let's take the remaining stuff and push it into different location using grids. Remember that our wireframe shows two columns like this. In the medium file create a body tag. Next add grid-template-areas with logo and logo, links and content, footer and footer. Let's take a look, and you can see the header is at the top, the navigation to the left of the content, and the footer at the bottom. Notice that the gold nav color seems to fill all the way down to the footer; however, when we switch to landscape tablet, the gold color stops way too soon. Open the medium file and create a selector for the nav, and set the height to auto. Now when we look at the page, the gold color goes all the way down to the footer. Now this next problem you cannot see unless you use the Responsive option. Notice that as we scale the page from small to large that the menu bar changes width. Well this is not a big problem now. If we're to remove all the content from the main tag, the menu would get really wide like this. Not good. Let's go back to the medium file and set the grid-template-columns to a fixed value of 9rem and auto for the remaining space. Now when we scale the page the menu stays the same width. Let's put back our content and save our page. Let's try one more thing to see if you like it or not. In the medium file, add a nested ul li a and set the text-align to right. This is what it looks like. It creates a nice visual line with the nav links on one side and the content on the other side. Now let's move on to the large screens.


25. Building the Large Screen Navigation For the large screens, we'll create four grid-template-areas. Here you can see the four HTML areas. We'll then assign each area to display in one of the grid cells. For the large screens, we'll set the unordered list to display as a flex item. Then we can tell the list items inside to display as a row so they create this nice horizontal navigation row. Let's open the large file, and inside a body selector set the grid-template-areas to logo, links, content, and footer, just as we saw in a previous slide. Notice that everything is smashed into a narrow strip down the left side. This is the 9rem column from the medium file. Let's change the grid-template-columns to auto, and that problem is removed. Now let's take care of the navigation using flexbox. Please create a selector for nav and a nested selector for ul. Set the display to flex. Set the flex-direction to row. This will affect the children of the ul, which are list items, and make them display horizontally. If you look close, you can see a thin line above Home and a longer line below the menu items. These are leftover from the small screen styling. Let's add another nested selector for ul li a and remove all previous borders. That worked great on the bottom line, but there's still a line above Home. Let's reopen the small file and see where that line is coming from. Notice down here we have first-child reference and border-top. Please copy that line. Return to the large file and paste it here. Change the border-top to none, and now the line is gone. Now let's put a line between each menu item using border-right, 1px, solid, and 30% black. This is the result. If you inspect the Home menu item, you can see it touches the left edge of the page, but we need it indented to match the logo and the page content. Let's add margin: 0 for top and bottom and the variable gutter for the sides. The Home button is slid over a little bit. However, to be consistent with the end line after Rewards, we need to add a left sideline to Home. Let's copy and paste the border-right and change it to left and save. Now we have symmetry, and our sense of design is happy once again. So what if your design calls for centered navigation? Not a problem. Just add justify-content and center. Yep, it's that easy. And to right align the menu, just change it to flex-end. Here's the result. You could use flexbox to place your social icon at the right of the screen, as in this example. Let's go ahead and upload our file and do some testing.


26. Testing As we test, we will focus on a wide variety of screen widths and the latest version of modern browsers. One of the smaller modern devices is an iPod touch, which still has a screen width of 320px. As you can see, the navigation works great on Safari for both portrait and landscape modes. This is what it looks like on Chrome, and here's what it looks like using FireFox. Now let's look at a Samsung phone using the Chrome browser. As you can see, it works great. When we move up to a tablet, we can see the portrait view is different than the landscape view, but they both work well on Safari. They also both work well on Chrome. Firefox also works with CSS grids and flexbox. Now let's move up to the desktop using Chrome, and we have complete success. Success also with FireFox, and Safari also works correctly. On my PC using Edge 16 I have success as well with flexbox and grids. We're not going to talk about Internet Explorer or even Edge 15 because they were both voted off the island for not supporting grids and flexbox. In this module, we reviewed what you would learn, and then we looked at the finished page. Then we built the small screen version, followed by a medium screen version, and finally the large screen version. After uploading our work, we tested it on modern browsers and newer devices. In the next module, we will build small screen navigation that uses icons. Now that's going to be a lot of fun.


27. Icon Navigation Overview of Icon Navigation Hello, and welcome back. In this module, we are going to build two level deep navigation with a twist. First, we will review what you will learn in this module and then take a look at the finished project. Next, we'll build the small screen version, followed by the medium screen and the large screen version. After uploading our work, we'll test it on older browsers and older devices to see how well it works. In this module, we will use icons for the navigation. We're also going to place the navigation in a fixed position at the bottom of the small and medium screens. We will create two new SCSS files to isolate the navigation from the rest of the page styling. We will use min-width, as well as max-width in our media queries. And the submenu items will appear above the navigation on small screens. Our completed project will have fixed navigation at the bottom of the screen as shown with submenu items popping up from the bottom. For the medium screens, we'll add text to the icon just for clarification. On large screens, we'll move the navigation links to the top of the page. Because the navigation is so different between the medium and large screens, we're going to tweak our progressive enhancement. The page content will be the same as it has all a long with the small styles running through the entire site, medium screen enhancements for tablet, and large enhancements for large screens. Since the small and medium screen navigation is at the bottom of the screen and looks similar, we will create a new SCSS file and terminate it at 64em using the max-width media query. We will enhance the tablet just a little in another new SCSS file, which has both a min width and a max width and fits between 35em and 64em. The styling for the large screens will all happen in the large file, which is already set up with a min width media query of 64em. In order to make this work, I have already made some changes in our styles.scss file. The first three imports are identical to the previous modules. The medium files kicks in at 35em, and the large file, which also has the navigation styling for large screen, starts at 64em. Now the small-nav file ends using a max-width 1px shy of 64em, which happens to be 63.9375em. What this means is that the CSS will not overflow from the medium to the large screens as it has done in previous modules. The medium nav styling will kick in at 35em using min-width, and it will also terminate 1px before the large screen navigation rules kick in using max-width. This gives us a clean break so we are not writing rules in the large file that are trying to undo everything we did in the small and medium files. That will be a headache. In the demos for this unit there are some icons, which we'll look at in a minute. There is also a snippets file, which will save you typing code that we've already covered in previous modules. There is a start file, which has two additional SCSS files for small-nav and medium-nav. We just talked about those. I purchased and assembled four icons in separate Photoshop layers. Each layer has a name with a .png at the end. When we generate assets in Photoshop, each layer is exported to a folder as a separate icon ready to use in our web page. We covered this in depth in the second course in this series on responsive images and sliders. Please get a copy of the start file and open it in your text editor. Then make sure that your CSS preprocessor is running, and let's get started.


28. Building Small Screen Icon Navigation The first thing we need to do is copy the icons from the assets folder to the images in our start folder. Open the index file in your browser, and notice that the navigation is at the bottom of the page below the footer. We want persistent navigation stuck to the bottom of the screen. To make this happen, we need four lines of code. Please open the small-nav file. Add position: fixed and then bottom: 0. These two will keep the nav at the bottom of the screen regardless of page scrolling. Now add width of 100%, and also give it a background-color of primaryColor. Notice that the blue blends a bit with the page blue. Let's add border-top, which is solid 1px at 50% black. Now it's a little easier to separate the nav from the page. Now let's take the four main menu items and display them horizontally using float:left and width of 25%. Now you can see the four blocks of text. It's a bit of a mess, but creativity has never been a clean endeavor. Now let's style the anchors using display: block, which we always use with anchors as links. This allows us to use a height of 50px and a width of 100%. Now the 100% is the full width of the list item, which we already set at 25% of the page width. This does not make a big change, but these are essential before we throw in the graphics. In order to display the background image properly, we need four statements. First, we display one of the icons using background-image and a url to the deal.png file. This is what it looks like. Let's tell the image to display only one time using no-repeat. We will center the icon inside the anchor both horizontally and vertically. We will reduce the size using auto for the width and 36px for the height. Using auto maintains a correct image proportion. Now when we look at it, the deals icon looks good in all four main menu anchors. Now let's change the icon for the remaining three anchors. If you look at the code, three of the four statements are true for all four of the icons. Only the background-image statement needs to change. Let's come down here, and using an li with nth-child of 1, let's talk to only the first menu item. We will remove the background-image statement from up here and move it down here. Now the deals icon only appears on the first main menu item. It also shows up on the first submenu items, but we'll take care of that later. Copy this line and paste it three more times. Change the child number to 2, 3, and 4. Now change the icon to destination, resort, and cruise. Now the icons are all showing up properly in the four main menu items. Open the index, and notice that I have a span tag around the text for each main menu anchor. In the small-nav file, let's hide the text using display: none. Now we see only the icons. Let's work on the submenu items using ul li ul. We have already set the height of the top level icons to 50px up here, so let's position the submmenu items as absolute and set the bottom at 50 so they are just above the main menu links. Now you can see them above the others. We should set their z-index to 99 just make sure they are always above anything else on the page. We will move them so they line up at the left edge of the screen. While we're at it, we'll set the background-color to 50% black. This way we can see them a little more clearly above the page content. Now add width of 100%. Now we can see both submenu items stacked together above the main menu links. You can now see that the submenu items are also taking 25% of the page width. So let's remove the float and set the width to 100%. Now we're ready to style the anchors. Let's create a new selector for the primary ul li and then submenu ul li followed by an a. Please set the background-color of the anchor to the variable menuColor and the text color to white. Now we can see some real progress. Let's remove the background-image and remove the text-decoration underline. Notice that the submenu items are inheriting the parent height of 50px. Let's change that height to auto. Now they're all smashed at the bottom of the screen. Let's add some padding to increase the size of the button to make them clickable and separate them using a margin of .5rem at the top and bottom and 0 at both sides. At this point, we could be done with the sublinks as long as we like them; however, let me show you something else just in case you want to try it. Set the margin right and left to 5%. This means that we now need to reduce the width to 90%. Now let's round the edges using 5px. Finally, add a box-shadow of 0 to the right, 2px down, a 1px blur, and a 50% rgba black color. This provides you another option just in case you like it better. What we are seeing is both sets of submenu items exactly stacked on top of each other. Now it's time to show them only on touch. Please create a new rule for ul li:hover ul. This kicks into play when the user touches on mobile screens or hovers hovers with a mouse. Remember that earlier in the ul li ul we had set the bottom to 50px so that we could see the submenu items. Let's remove that statement and move it to the hover rule we just created. Now when we refresh and touch our submenu items appear. Let's change Chrome to Responsive and make a couple more changes. Notice that on mouse hover there is no color change. Let's add a ul li:hover a and set the color to the menu color. This way the active menu item matches the submenu color. Notice that the submenu items do not respond to mouse hover. Let's add another rule to darken the submenu item color using SASS darken by 10%. Now I'm not sure how many people will shrink their browser and view the page, but just in case, we are prepared to impress them.


29. Building Medium Screen Icon Navigation Now if you'll change your emulated device to a medium screen, you can see that I have to scale the page to 50% to see the bottom of the screen. That's too small to see clearly in this video; therefore, I'm going to be using Responsive and set the width to about 560px wide. This is just inside the medium screen range. Now I can use 125% scale, and you'll be able to see the icons at the bottom much better. For the medium screen, I want to add the text below the icons and reduce the icon size. Let's start by creating the two selectors we will need for the medium navigation. First add a ul li a and then below that a ul li a span. Let's show the text using display: block. The text is showing, but it's too large and the wrong color. Let's remove the default underline, change the color to white, and set the font-size smaller. Now we have descriptive text, but it's in the wrong place. Let's change the position of the anchors to relative, which will allow us to change the position of the child element to absolute. Now we can move the text to the bottom of each anchor at 5px above the bottom. Now, that's what I was looking for. Now we need to center the text within each anchor. Let's set the width of each span to full width, and then we can center the text. Now the text looks great. All we need to do is deal with the icon size. In the small-nav, the icons were auto and 36. In the medium-nav, let's use auto and 26. We will position the icons in the center horizontally and down from the top 5px. Now those are some pretty good looking icons. Now let's do the large screen. The large screen links are a standard horizontal list with drop-downs on hover. We've been doing this for the last several units, so I've provided a code for you in the snippets file. Copy everything from the snippets and Paste it in the large file below the body selector. Because the HTML position of the links is at the bottom of the page, we need to force the nav to the top using position:absolute and top: 0. Everything else here should look familiar. Change your page size to 100% and wider than 128, and you'll see the navigation links appear. Let's turn off the Inspect tool and look at this site from small to medium to large. Now pat yourself on the back and upload this to a real server for testing.


30. Testing During this module, I tried to avoid using the REM as a unit so that our page will work on older technology. The bottom icon navigation works when I open this page on my iPhone 4 using the Safari browser. Our bottom navigation also works using Chrome on the iPhone 4. Our site also works on this old iPad 1 using Safari. When we test our site using Chrome on this iPad 1 from 2010, there's a bit of a twitch. The menu bar jumps up when you select a menu with submenu items. It seems to jump up the same distance as the tab and URL bar, which are hidden when the jump occurs. Although this is not exactly what we wanted, it is still an acceptable fallback position for something as old as 2010. Our site also works on standard desktop browsers. Let's now pull up our site on Internet Explorer 9, and the top navigation works for large screens. We also have success on medium and small screens with the icons at the bottom of the page. Thankfully, it also works on the newer Microsoft browsers including Edge. This is truly something to celebrate. Our performance on older devices is great considering we tried something really different. If you had a site with four links or less and you could find appropriate icons, this would be a great option. As we demonstrated, it is also possible to have several sublinks and use this for a much larger site. In this module, we reviewed what you would learn, and then we looked at the finished project. We then took some time and built the small screen version, followed by a few tweaks with the medium screen, and then we pasted the code for the large screens. Finally, we tested our work on older browsers and older devices, and we had great success. Just look at everything we have covered in this course on responsive navigation. You are now fully prepared to build and deliver many different kinds of navigation, from those that work everywhere to the new stuff that will work in the near future.