Name: レスポンシブナビバーチュートリアル (Responsive Navbar Tutorial)
Uploaded: 2021-01-14T10:24:31.000Z
Duration: 13 min 35 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

動名詞

in today's video, we're going to create a fully responsive nab our that when it becomes too small, will show a hamburger menu that will drop down our options and expanding collapse as needed.

to 不定詞

現在進行形

I have an HTML file with the boilerplate HTML code to import are different style sheets we're going to create as well as our jobs.

Good Father, we're going to create and inside of the body, we just need to put our html for the knave Are so we're just going to use a knave element with the class of nah barks that we can use.

This is our nap bar and weaken reference it in our CSS and then inside of here.

We need to create sections for both our brand title as well as all of the buttons that we're going to have.

So the first thing we're going to do is just creative.

Give it the title of a class of brand title and in here we'll just put a brand name because this is going to be the name of section of our brand is, as you can see, that pops up in the top left, and then we need a second section which is going to contain our nap.

Lead another defer that Give it a class here of the nab our links.

And then instead of here, we're gonna put our different links and we'll put them inside of a nordeste just because they have list item.

And each one of these will be a list item with an anchor tag inside of them.

And inside of this anchor, take we have home is our 1st 1 on.

We'll just give it here on a trip of just a hashtag.

Since it's not actually going anywhere, I'm then going to copy this down twice more so that we have three links in total and this one is going to be in our about link and then finally, we'll have a contact linked.

And now, as you say that you see that we have all the different information on our page that we need, and we can actually start style in our sight for the desktop version first.

Nazi SS here and let's do a little bit of boilerplate says us that we need to make our project easier.

The first thing we're going to use this set up box sizing.

And this will make Stein when our wits much easier.

And then we're going to take our body and we're going to remove all margin and patting from the body.

So that way we can, but everything up right next to the border of our screen, just like this.

Now we can start actually styling our nab our element.

The first thing that we want to do is use flex box to display these objects because we're going to want them to line up side by side.

We then can justify the content with space between, and this will push them as far apart from each other as possible.

And then lastly, we want to line our items in the center so that our links since they're going to be smaller, will line up perfectly in the center of our brand name, which is going to be a larger Lastly, since this is going to be our have bar the top, we want to give it a background color that's going to be darker so we'll just give it a really dark gray color.

We want to make all the text inside of it white by default.

So now if you say that, we see that we have a brand name over here on the left, Wet, just centered on the right.

We have our links, which are centered as well.

So now we can move on to actually style in a grand title first, because that'll be the easiest of the two to style.

All we need to do is increase the font size of myth, since we want our brand name to stick out as opposed to our links.

So make it 1.5 times our route font size, and we'll add a little bit of margin on it so that it doesn't quite line up at the very end of our screen.

Now, if we say that you see it, we got a larger of brand name, which is going to be centered and pushed away from the edges of our screen.

Now let's move on to actually styling our nap Bart links in order to style and have our links, which need to use that knave bar links class that we created earlier.

Which is going to be that one ordered list, and we honor just remove all the normal styling to it.

So we're going to remove the margin and we're going to remove the padding on it.

And then we're also going to make it a display of flex, that we can easily align the items inside of Arliss side by side as we need to in space them out properly.

What we want to do is we want to select the actual allies inside of here, so we get it select, are now barred links again.

I just want to remove the list style from them because we don't want that underlined to be appearing or have any of the dots on it so we can remove that list style, and then we can select the actual eight tags, the anchor tags inside of our nab our wings here.

We could just do this by selecting L I and all the anchor attacks inside of it.

And here's where it connects to remove the different underlying.

We want to set the color to be white by default, and we also want to just give it a little bit of padding around.

Each one will just stay one R e m, and we'll just make them display block so that they show up as a larger size.

We now have our links on the right hand side here, and we have our brand name on the left side here pretty well space stuff from each other and these links When we click on a magic See, it adds that hashtag to our euro, which is perfect now we need to do is actually style these so that they have animation on hover so that we can tell that we're actually hovering over them.

So to do that, we're going to want to just select, aren't have borrowed links here, get our ally.

And when we hover over this ally, all we want to do is just change the background color.

So we got our background color and we'll just make this another.

That was great colors I can actually type and Now we hover.

You'll see that we get that light gray background behind our different anchor tags when we hover over them and we have a non responsive nab our complete.

But as you can see as we shrink this, it doesn't actually make our hamburger menu in the left hand corner.

So what's actually go about implementing that?

Now, the first thing that we need to do is actually add that hamburger menu inside of our HTML.

We could just put it right here in between our two current dibs, and we could just make this one an anchor tag.

We're just going to give it another H ref that is going to lead to know where I'm going to give it a class here toggle button.

So that way, we know that this is our button that we're using the toggle and inside of here.

We just want to put three different spans that are going to represent the three lines of our hamburger menu.

So we're going to have a span give it a class here of bar work.

We don't want anything in this span, since we don't actually want any text, and that's all we need to do with our HTML.

Now we could go back into our styles and we can work on styling that toggle button.

So what's first select a toggle button actually style how we want this to look, the first thing they're going to do.

We're gonna want a position this absolutely so we can force it to be all the way on the right side of our screen without messing with the flow of the rest of our elements.

We also want to make it so it's positioned not quite at the very top of our screen, so we'll push it 0.75 R E m from the top of our screen, and we're going to do the same thing, but one r e m from the right side of our screen.

We want to make sure this does not display by default because we don't want this to show up on our larger screens.

On Lee are smaller screens and inside of here we're going to change our flex direction to be calm so that all of our different spans line up on top of each other from one of the very top of the 3rd 1 at the very bottom, and we're going to justify its are content with some space between them again so that we have as much space as possible in between these different elements inside of our taco button.

And lastly, we just want to set a width and a height, or just do 31 pixels as the width, and we'll set the hate here to be 21 pixels.

So now if we change this display known to this wife ex and notice that it doesn't actually do anything, and that's because our taco buttons don't actually have any bars inside of them.

So let's select the bars inside of our toggle button.

So we'll just like that bar class here, and all we need to do is just add a little bit of styling here to make these extra show up so we'll make him three Pigs was tall.

We're gonna make him take 100% of the with inside of the container of our toggle button.

We want to give them a background color, fear of white so that they show up looks white, and then, lastly, just a little bit of a border radius around these so that we can see a little bit of a rounding off the corners would just say 10 pixels, for example, like this before the radius.

And if you say that, we see with our have a hamburger and you up here in the top right hand corner, which is perfect and it looks exactly as we wanted to.

But we don't actually want this to display on our larger screens.

So what changes Display flex back to display nut.

And now when we shrink this menu down, we want to actually change this to be our hamburger menu.

So that here we're gonna use what's called a media query, which allows us to say when a certain condition is met, run the code inside of here.

But if it's not met, Ethan, don't win our case if the max with of our screen is 400 pixels or less.

So if our screen is less than 400 pixels wide, we know that we want to run the code inside of this media query and your media query, maybe a different value here I have my browser zoomed in 250% So it's easier for you to see, so you may need to use a larger numbers such a 600 as opposed to 400.

So now inside of here, what we can do is we can take our toggle button on.

We just want to change the display of this deflects that actually show up, and then we want to make our nab our links here.

And now, if you say that you see, we get a hamburger menu on the right hand side.

But if we increase our screen, you see that we get our normal icons, which is exactly what we want.

And as we decrease, we get a hamburger and it'll go back and forth as soon as we had that 400 pixel breakpoint.

Now it's instead of making this display none.

Let's just comment this out for now so that we can actually see our different icons in here, and we want to.

Style are icons are links over here to be below our brand name so that when we click this menu, it'll slide in and slide out as we want it to.

So the order to do that only need to do is take our Navid Bart here.