How to Create Navigation for Mobile
Lesson 9 from: Creating Your First Web Page (with code!)Chris Converse
How to Create Navigation for Mobile
Lesson 9 from: Creating Your First Web Page (with code!)Chris Converse
Lessons
Class Introduction
05:05 2Evaluating a Web Design
09:43 3Adding Markup and Content
32:26 4Getting Started with CSS
30:09 5Styling the Header and Define Sections
21:04 6Styling the Main Section
21:09 7Creating the Navigation
35:30 8Adding Media Queries
11:33Lesson Info
How to Create Navigation for Mobile
So now that we have the mobile menu showing up, now we're going to hide the menu links, because if the user hasn't actually clicked on them, we don't wanna see them, so we're gonna take navigation space, we're gonna do a pound sign, pound sign is how we target the id, so we're gonna take mobile_menu_links, that holds all of our links, we put that on our main unordered list, we're gonna set a display type on that to none, so now we have our mobile menu showing up, but we don't see any of the links, now the menu icon is inside of a label, the label has a for attribute, if you remember, that targets everything that's in the unordered list, so what we're gonna do here is we're going to set it up, so that if you click on the mobile menu, that's going to set that check mark box we created earlier into a checked state and if that icon or if that input device is checked, then we're going to show the mobile menu and that's how we're gonna do this without using any Javascript and so what we're g...
onna do is we're going to type nav space pound sign mobile_menu and then to check to see if the input is in a checked state, we can use a pseudoclass for this as well, so just like a mouse has a hover state, all form elements in HTML have checked states or states to tell you whether somebody has selected something, if they've put text into things, so a check box has a pseudoclass called checked, so we'll say if the mobile menu item is checked, then we're gonna use a tilde, which is the way of selecting an adjacent sibling, which basically means if we look for, actually let me put this, let me put what we're doing here first and then I can explain it, so we're gonna come in here and type mobile_menu pound sign mobile_menu_icon, put in our brackets, so now what this is gonna do is this mobile_menu_icon, which is an id of the icon will only be targeted if it's next to, in the HTML, we have one item and another item, if they are siblings and next to each other and it's next to a menu item, that comes before it, it's in a checked state, so this is a really cool idea as well, this allows you to do something to one item only if its sibling, which means it's an item in the same parent, is in a certain state and so since HTML automatically gives us all of these form elements, this gives us a really quick way to just make a change for these pieces. So for the icon, we wanna change the icon image from the three elements, that look like a hamburger menu into a closed menu, so we'll do url semi-colon, inside of the parentheses, we're gonna do images/icon_menu_closed.svg, so let's save that, so if I come up here and click on this, if I click on it, it turns into an X, if I click it again, it turns in to the hamburger menu, so imagine, again with your Matrix vision, that input check box is in there, it's just hidden, every time I click this, that check box gets checked, if I click it again, the check box gets removed, if the check box is on, we're using the X SVG artwork in that element and so using this same idea, we can also show and hide all of the mobile menu links. Let's come up here and let's copy the mobile_menu_links, so down here, what we're gonna do is we're going to copy the nav mobile_menu checked, keep the tilde and then point to the mobile_menu_links, which has all of our links inside, we're gonna set the display type of this to a block, we're gonna set the margin-left to negative 30 pixels, we're gonna set a padding-left to 30 pixels as well, padding-bottom, I see it by the way (laughs), padding-left, padding-bottom, we're gonna set this just to 10 pixels and then finally we're gonna set a border-top, set this to one pixel, solid style and I just wanna use a semi-transparent white color here, so rgba, put in a semi-colon, 255 for red, green and blue will give us white, then a comma and then for the alpha, we'll set this to point four, so it gives us just a nice, little roll up here to indicate that the page is open, let's reload over here in our browser, so this is the closed state, click the open state, oh, what's up? All that stuff coming down from just that check box, that's showing up there, so that will give us a really nice user experience, also the navigation item is positioned above the header, it is not inside the header, so the overflow hidden doesn't take effect, so even though the cutting board is inside and the counter top is inside that header with that overflow setting, the navigation is below the header, positioned up to the top and then when we click this, this opens up, so even on a small screen, we'll still be able to scroll down and see all of the elements that are inside of our navigation system, without affecting the scrollability of the rest of the content within the page. I realize it's a little dense, it's kind of a lot to look at, but again, once you have this, or if you have the course and you get the files, you don't have to keep building something like this, it can get a little dense and there's a lot of nesting structure that happens here, but understanding that box model and how the HTML was structured and setting this up once means that you can reuse this for any number of projects, so it's little things like this, that will get you know, save this in your Snippets and this will get you much more proficient and able to build and design your layouts much faster and just keep on going, don't tell your clients, by the way how much faster you're gonna get by using all that content.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Christine Wigaard
A great course. Chris has a great way of explaining and making it seem very easy and fun.
Linda
I am so happy to have taken this course! Chris is very clear and knowledgeable about what code to use and why. He is very organized and made coding fun!
Matthew Chesebrough
Chris, thanks so much for having such a well organized an insightful class. I took the class because I'm working on some redesigns for my personal website and the hosting templates weren't quite getting me to the level of fit and finish I envisioned. To be honest, I was a little nervous and intimidated by html/css initially, but you helped me conquer the fear. I look forward to taking some of the lessons (after a few more views of the classes that is :) ) to my website achieve my vision. Wishing you all the best. Take care.
Student Work
Related Classes
Web Design