Lessons

Lesson Info

Creating the Navigation

All of this properties we've been talking about, the positioning, the display types, we're going to use for creating the navigation system for our site. And if we remember back to the demonstration, we have an app system which we'll open up real quick. Where when we hover over certain items, like recipes for example, we have a menu system that drops down. We're going to be creating this by using an unordered list and nesting one list inside of another list. So, the top items of our list will become the navigation pieces across the top. The sub items will be the navigation pieces inside of the top level bullet list. So again, and this is just the bullet list and we look at those more sensibly in our introduction class. So let's switch back to our html file. Let's scroll up, lets find our nav element. I'm going to add a bunch of spaces here just we can really focus on just the navigation here. Let's go back to our snippets files, so we'll go back to our project files. Let's find the file...

called snippets nav markup.html. Let's open that up in our text header. So go ahead and setup a couple of properties inside of here. I've set up an anchor link at the top with a link to our website, Everyday Things. We're going to turn this into a clickable logo. But again, just to keep the html nice and clean, I want to have just this to be standard anchor length. So, a search engine will just see an anchor link that will link to the website here and we will hide the span and put a graphic in there instead. But again, this is nice and clean for search engine. Then we're going to have a div element, with an id of mobile menu links. So this id, we're only going to use it once in the page. And this is the way that we can name items in our document but only use that name once so we can target this specifically with CSS. And someday if you ever get into playing with Javascript, Javascript really likes id's because it makes it really quick and easy to target a specific item on the page. So then inside, we just have a standard ordered list, unordered list. We have our list items, everything is inside of an anchored tags so we're linking to our Recipes, linking to Kitchen Essentials and our Cookbook. And then inside of the of the anchor link, inside of the first list item, we start a brand new unordered list. So this is a nested unordered list inside of the parent list. So what this would look like in a browser, we would just see all of our different bullet list here showing up as nested items. And there's another thing in here which is kind of fun which is the aria-haspopup. This feature here, this is part of the aria specification and this really helps your html work across multiple devices including-- or specifically because devices that have mice and track pads have different input devices than touch screens. So what this does is this allow us to tell somebody on the touch screen, if somebody touches this event, we can basically trigger a hover state. So this allows our menus to be touch enabled. So if somebody touches on that menu, it will actually open up the menu underneath. This is something that we saw or this is something that became really important when we saw the Microsoft surface come out because this was a full computer and people had a mouse and a track pad and they could touch the device. So we've seen this sort of syntax grow and we're going to see more and more of this to make our websites accessible. So basically, any item that has a sub menu, I've put the aria-haspopup= true here. And we're going to target this later with CSS and add little arrows on this as well. So it will serve as tool function for us. So this is it, this is basically an unordered list. So we're going to copy this, go back to our index, that html file. Inside of our class of content, we're going to paste all this content. Look up in here and format this a little bit. Go over to our html page, which what we have so far. So when we look at this, this is what the nested unordered list will look like. All of this sub items under this item here, because we've used unordered list and list items, we're getting all of this bullet behavior. Okay, so now we're going to add in two more pieces of html content before we start adding in all of the rest of our content. So we'll go back here. I think I forgot to copy the logo, so let's come back and copy that. We're going to paste the logo here as well. And what we're going to do is after the logo, we're going to put in some html form elements so we can enable the menu for small screens. And what we're going to do is use an html checkbox to do this. So this is really sort of interesting technique. We can get the effect of a menu that you can tap on and open it up on a small screen. But we're not going to need any Javascript to do this. We can do this with an html element and some CSS by checking an adjacent sibling which is going to be pretty fun. So let's start by typing an input type. So this is another one of the self closing tags we have in html. So type input then a space, I'll close the tag real quick. Inside of input we're going to set an id equals two quotes. We're going to call this mobile menu then a space and then the type is going to equal a checkbox. Next, we're going to add a label. Labels typically go along with html elements and labels allow us to be more descriptive about what we are applying the label to. In this case, this label, we're going to relate this particular label to this input device. So for label, we're going to use a four attribute and use the same name as mobile. This way you can click on the checkbox or you can click on any text that's inside the label and that will also trigger the checkbox. And because people are on small screens for this and they're going to use their fingers, we want to make sure we get them enough area to tap on to trigger that input device to trigger the check box. So let's do, under label, let's give this an id. We're going to set this equal to mobile menu icon and then a space. Now, we're going to use the four attribute and we're going to say that this label is for that input device. So I'll come up here and just copy the mobile menu id name, paste it down here and then just for the moment, I'm going to put the words icon goes here just so we can see what's happening inside of our label. So these two items in placed back in our browser. Now, we have our Everyday Things logo which will turn into a label and a graphic in a few minutes. And here's our checkbox. So again, just a standard checkbox in html and we're going to use this to enable and disable our menu system. Okay, so now that we markup in place, everything that we need in html to make our menu work, we're going to back to our project folder and let's go back into our screen.CSS file. So back in our screen, lets scroll down. I'm going to put all the navigation after the header. I tend to like to organize my CSS in the order of my html goes. You don't have to do that, it just makes my brain feel good. So, let's come in here and let's target our nav elements. So start with nav, put in our brackets. We'll start with a background color. For the background color, we're going to use rgba color space. So we'll type rgba, beginning ending parentheses, put in our semi colon. Inside of the parentheses, we're going to separate our colors into red, green and blue. Just like we do for hex. But in this case, we're going to use values from zero to 255. So for red, we're going to set this to 134 then a comma, 167 for green then a comma, 42 for blue and then a comma. And then we're going to set an alpha color which is basically the amount of transparency. And we're going to set this to .85. So that's going to make a color here that's going to be 85% opaque on that color green. So when we position this over top of our menu system, I'm sorry, over top of the header, we're going to be able to see through this color. And so, when we're looking at our sketch course, we could-- semi transparent in color in sketch, sketch was actually doing this because we can do exactly the same thing in CSS. Have a semi transparent ink basically. Next, we'll set up position value. We're going to set this up to absolute. As soon as I do that, we're going to see this, I'm showing up right here. We're going to set the width property of the nav. We're going to set this to 100%. We're going to set a top property. We're going to set this to 40 pixels and what that means is it's going to be 40 pixels from the nearest parent in our page that has some CSS properties. So this navigational element here has an absolute position property and it was down here before we're done. And now it's going to jump up here and be 40 pixels away from the body element. Because the body is the first item that is the parent of this navigation item that it will position itself to. So again, the sort of stacking order of CSS takes a little bit of going used to. But once you kind of get the hang of it the absolute positioning will always be based on the individual parents of this device. And so now we can see this semi transparent background color in here as well. So now, we're really starting the sense of how this is coming together. Next property is going to be left and we can use top and left properties only on an absolute positioned object. We can also use bottom and right but you only want to pick either top or bottom or either left or right. So we set the left to zero pixels and then finally let's set the font size to .9ms. Next we're going to target the content class that's inside the nav. So nav space dot content. Put in our brackets, so put this open. We're going to set up position value of relative. We want to make sure that anything that's positioned inside that content is in relation now to the nav otherwise it will relate to the body element just like the main nav container. And let's set a padding left property of 175 pixels. That will give us room to position the logo later. Okay, so with this in placed, let's style the unordered list. So nav space ul, we're going to target the unordered list inside of the nav and all we want to do here is reset the margin and padding. 'Cause most elements in html get a default margin and padding properties so we want to zeros those out. So set margin to zero and padding on that to zero as well. With that change, you'll notice that now the unordered list goes right up to the top. We no longer have the indented aspect of the bullets. Everything is sort of flushed out. We're basically going to get rid of the bullets all together. We want the structure of the unordered list but we don't want to have all the bullets in place. We're going to style this ourselves. So, next we're going to target the list items inside of the unordered list. So nav space ul space li, so now we're going to target those individual elements. We're going to set up position relative on this as well. Because these are going to have sub menus and the sub menus need a line up underneath each list item otherwise it won't actually look like a menu. So to get those items to position in relation to the li, we're going to set the position relative on that item. Next we'll set up a margin property. We're going to set zero on the top, 12 pixels on the right, zero on the bottom and zero on the left. That way the items won't be touching each other. Next we're going to set a display type to inline- block. We want to make sure all of those list items behave almost like images that'll have a width and a height but they won't be a full block property, they won't go the full width of the page. And next we're going to come in here and set a float property of floleft. So now each one of these individual items will be allowed to sort of line up next to each other as there's room for them. Okay, so it looks like a little bit of a mess. So again, we'll hover matrix this and on. We can imagine that sort of box model and everything that's happening. So we'll continue on, we'll start to see how this different properties are going to rearrange all of this items. So next we're going to target nav ul space li colon hover. It's not only anchor tags that can have a hover a pseudo class. Anything can have a hover state. So this is going to give us ability to add a background color to list items that you hover over. So you do background color, rgba, we're going to use a 10% black. So that will just make the green look just a little bit darker. So zero for red, zero for green, zero for blue and then .1 for 10%. So not by hover over this, we'll see, as I hover over this items, we get a semi transparent black effect effect here which is very cool. Next let's target the anchor tags inside of the list items. So nav ul li space a. Let's come in here and let's add a color. Let's set this to black, so pound sign and three zeros. Let's do text transform, we're going to set this to upper case. Next we'll do letter spacing. I like the way the letter spacing look at the bottom so we'll just add one pixel of letter spacing just to sort of space it out just a little bit. We don't have to worry about text decoration because we took the underlines off. Let's do padding, we'll set 12 pixels for padding. That's going to really space out some of these pieces. We're going to set position to relative here as well. We're doing that because we're going to add arrows into that little aria tags. We want to make sure that we can position those inside as well. Next we'll do font size, we'll set this to .9ms and then finally we'll set-- actually the color, we don't want to do black, we want to do white. Let's come in here and set that to be white. So again, it might be looking like a little bit of a mess so far but we've changed the display type of the uls. Anytime those list items next to each other because of the float property these are allowed to sort of float next to each other so sub item one, two, and three get to line up.