Name: CSSのみのドロップダウンメニュー。CSSチュートリアル (30日目のCSS3の27日目) (CSS Only Dropdown Menu: CSS Tutorial (Day 27 of CSS3 in 30 Days))
Uploaded: 2021-01-14T10:32:39.000Z
Duration: 9 min 22 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

to 不定詞

Welcome back to see us history and 30 days.

Today's day number 27 we're gonna be building a drop down menu.

But first, I'm gonna be making some more modifications to my silly look on microphone here.

A student of mine actually suggested that I This has nothing to do with CSS.

By the way, he said in the box, it comes with, ah, large pop filter as well as the small one.

I think I'm going to try out the big pop filter.

Thanks, Student, for suggesting this to me.

We're gonna be making a CSS only drop down menu.

This is a super simple lesson, and all we're gonna be doing is building this simple little drop down.

So I got a button here that says drop down when I hover over at Bam, we just got three dropped on items.

Normally you'd build this, uh, you know, in javascript j query and and also CSS.

But I wanted to show you a really simple and lightweight version of just creating a simple CSS three drop down.

So up here in our sandbox, we've got just a simple button right here and then three links so that if none of the styles are working, then at least the links are visible, which is important for accessibility reasons.

Now let's go over to our code editor and open up the 27 drop down menu Fall were older Folder folder is what it's called and download that.

Open it up in your favorite code editor and open up the index and sandbox that CSS.

As always, final Nazi SS is there for your reference to make sure that you're on track and if you have any issues, you can always refer to that.

Just a quick Lee show you the mark up right here in the sandbox.

The class of dropped down a button within that did with the class of drop down menu and then three links.

Super simple Sally Sam sat in the sandbox, Rico opened the sandbox.

And now what we're gonna do is we're just gonna give it.

You were gonna say, drop down and we're gonna go position relative, and let's go display in line block.

I was just use random numbers with that index.

Have no rhyme or reason to how I use Zet Index.

All I know is that if I have, I want one element in front of the other.

Or make sure it's in front of everything.

So there's your professional strategy right there.

Okay, Now we want to do is going to say, drop down.

What I'm selecting there is simply the button.

It has the class of drop down hover display in line block as well.

I want to give this a patting of 10 pixels.

So we're just making the button look a little bit nicer here.

Um, my fingers are typing a little slower and clunkier than usual.

It's a little chilly down here in the basement.

I mean, my super high end premium studio up in the sky scraper background, color background.

You baby Lovely every day E I want to tell you a love you we even day in.

Okay, so we've got a button here looking a little bit better, but I want that.

Buttons have weird borders by default and browsers.

Okay, so now what we're gonna do, we're gonna start zipping through It's a bit more.

Have been spending a lot of time making really high quality jokes.

Background we're going to say to to to show a little bit of a dark gray.

And I'm going to also select the drop down double underscore menu.

And what we're gonna do here is gonna say position absolutes.

That's that, David, the class of dropped on underscore doubloons for menu as a sibling to the button.

Maybe What I should do is actually not display none for now, so you can actually see it.

So I'm gonna just comment that out, and I'm going to show you what's going on over here.

Let me just take that out to show you what happens.

Nothing so far makes it seem like this isn't necessary.

Zero men, which we're gonna give it a 200 pixel men with background white as well.

字幕リスト動画再生

CSSのみのドロップダウンメニュー。CSSチュートリアル (30日目のCSS3の27日目) (CSS Only Dropdown Menu: CSS Tutorial (Day 27 of CSS3 in 30 Days))

mess

position

default

silly