Welcome back to KnowledgeCity's course on Cascading Style Sheets. I am Cliff Brozo, I am your instructor. And today, you guessed it, we're going to talk about menus. We'll look at some drop down menus, we'll look at animation in the form of a circle, we'll swipe the sidebar menu, we'll explore what a sticky bottom menu is, and there will be a bonus at the end. Are you hungry to learn? I am, let's go. We're going to start off with a simple drop down menu. And the drop down menu can feature as many dropdowns as you like. In this case, this one just at the right side of the screen, we'll look at animation. And when you can click on a hamburger menu, and all of a sudden, we have sub menus that pop up. And I'm going to ask you to try to remember some of your 10th grade geometry as we discuss the x, y and z planes in 3D space. Sliding navigations come out from the side when you click on an open menu, and you have a choice of sub menus once that menus open. Of course, then you can close the menu. Sticky bottom menus are things that we're used to if you ever used your phone, all the navigations down at the bottom. And true to form, we can do that on a webpage as well. Finally, I talked a little bit about a bonus, we'll look at how to put icons as part of your menu. Let's take a look at how all of this stuff works. We're going to start off with a drop down menu. The code for it has straight HTML unordered list, which features one, two, three items, and a fourth item that does the drop down. I've created a class called drop button. And that is in CSS. And that's what I'm gonna call on, in order to make this drop down feature work. Let's take a look at how it works. Nothing happens when I hover over knowledge city. Nothing happens when I hover over computer programming. Nothing happens for the icon navbar. But when I get to CSS, that is the one that has the class drop button. What it allows me to do, is choose sub menus from this list. As I hover over them, the colors change, and that's what's handled in CSS. Here's the code. The main part of this code deals with the drop down content. The rest is similar to normal navigation menus. But our drop down content allows me to hover over something and change the colors because of this hover section. Whereas normally my background color is lemon chiffon in the drop down list. When I hover, I changed the background color to Dodger blue. That happens in line 56. In the CSS, the color becomes lemon chiffon, and the background color is Dodger blue. As I move away, and I'm not hovering over those items, then the background color is lemon chiffon, and the text color is Dorger blue. One more thing about this drop down list box. We've got some background shading. And as you can see, I have a box shadow in line 41 here. You'll remember box shadow from a previous lesson where we talked about how far out the shadow goes to the right, how far down, how much dispersion, and what the color of the shadow actually is. And that allows us to create a drop down list menu. Next up is our circle menu. Our circle menu is displayed in a full sized browser. In the middle, I have a circle with three lines in it, and that looks like a normal hamburger menu. And I've added in the x, y and z plane to show how these lines are actually going to move. As I hover over the menu, it grows in size. When I click on it, the sub menus pop up. When I click again to close it, the menus disappear. Let's take a look at the HTML code behind this. The code is standard. I start off with the image that shows me my little graph of x, y and z. And then I use the input type of checkbox so that I know when something has been clicked and when they click on the Open menu, I know that I am supposed to call that function, when they click on the X, I know that I'm supposed to close the menu. The part about 10th grade geometry comes in now. We have three lines, and those three lines are going to move, the middle one is gonna disappear. The other two are going to rotate up and down. And you have to watch carefully as that happens. The items that will pop out are the items in my links to other pages. Let's click on this several times to see it happen. Now you have to watch carefully, what's going to happen is the top right corner is going to drop down 45 degrees. The bottom right corner is going to rise up 45 degrees, and that's going to form the letter X. As that happens, the middle line is going to disappear. Let's watch a couple of times. Look closely as I click on this a few times. (upbeat music) Let's look at the CSS code. We start off with our open button. And the Open button is coded with a border radius of 100%. And that gives me a perfect circle. I create the width and the height of that circle at 80 pixels, and I put it in an absolute position. I'm moving it 85 pixels from the left margin, and as it opens, I want to ease the transition. Now you'll notice that this code from line 32 to 37 appears to be written twice. And that's because different browsers need to see the code in different ways. The dash WebKit section is designed for browsers that need to see it that way, as the other browsers can just deal with a straight transform. I'm going to translate things into three dimensional space. And I have an x location, a y location, and a z location. If you think of x as back and forth, y is left and right, and z is up and down, you'll get the idea of how these things move around in three dimensional space.
