What do you want to learn?
Skip to main content
Hands-on Responsive Web Design 4: Navigation
by Paul Cheney
Start CourseBookmarkAdd to Channel
Table of contents
Introduction to Responsive Navigation
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.
Overview of Cover Navigation
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.
Medium and Large Screen Enhancement
Overview of Expanding Navigation
Styling the Small, Medium, and Large Screens
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.
Footer Anchor Navigation
Overview of Footer Anchor Navigation
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.
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.
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.
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.
Building the Small Screen Navigation
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.
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.
Building the Small Screen Navigation
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.
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.
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.
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.
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.
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.
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.
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...
Released22 Jan 2018