Subtitles section Play video
-
everybody.
-
What's up?
-
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.
-
So give me one moment.
-
Do you take this off?
-
Well, that is so silly.
-
Thanks, Student, for suggesting this to me.
-
Now I look even more foolish.
-
Oh, maybe it's cool.
-
Back to code.
-
And here we go.
-
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.
-
So here we go in the index.
-
Just a quick Lee show you the mark up right here in the sandbox.
-
We've got a divot.
-
The class of dropped down a button within that did with the class of drop down menu and then three links.
-
Simple symbol.
-
Sally Super Simple Sam.
-
Super Simple Stallion.
-
Sam set on super simple.
-
Sally and Sam sat on the seawall.
-
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.
-
It's gonna be important.
-
And zed Index, let's do 10.
-
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.
-
I'll put a really high number.
-
So there's your professional strategy right there.
-
Okay, Now we want to do is going to say, drop down.
-
Double underscore hover.
-
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.
-
We're gonna go 3 to 3 B 40 kind.
-
Reminds me of you.
-
Be 40.
-
The popular British reggae band.
-
You baby Lovely every day E I want to tell you a love you we even day in.
-
Yeah.
-
Color white arse a cursor pointer.
-
Save it.
-
Let's check it out.
-
Okay, so we've got a button here looking a little bit better, but I want that.
-
Ah, Went that border gone.
-
Buttons have weird borders by default and browsers.
-
So I'm gonna say button.
-
No border?
-
None.
-
So, you know.
-
Yeah, that's much better.
-
Cool.
-
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.
-
So let's get back to coding.
-
Drop down, hover, hover.
-
That's interesting.
-
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.
-
We're gonna go display none.
-
So this is the menu itself.
-
That's that, David, the class of dropped on underscore doubloons for menu as a sibling to the button.
-
So display none by default.
-
Top 100% left.
-
Zero.
-
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.
-
So this is starting to take shape.
-
So top 100%.
-
Let me just take that out to show you what happens.
-
Okay?
-
Nothing so far makes it seem like this isn't necessary.
-
Top 100% left.
-
Zero men, which we're gonna give it a 200 pixel men with background white as well.
-
And we're going to say who, baby a lot.
-
Not that background color.
-
3 to 3 you before I'll be 40.
-
Box shadow.
-
Just giggly today, that's all.
-
03 pixel to pick soul.
-
And then rgb a 0.3 So a little bit transparent.
-
Okay, check it out.
-
So far, we got a little made, a bit of a menu Here, let me take this top 100% and left out.
-
See if it even really does anything.
-
It's not really mattering right now, but I'm assuming the reason I just I did that was to override any browser specific defaults that might be messing with it.
-
So, for example, like top 0% will be covering that button.
-
The parent, which is the position relative of I do 100%.
-
It's at the it's 100% down that that height.
-
So it keeps it down there.
-
So that's good.
-
Okay, so now what I want to do is I want to fix those links there to make it look like a better list.
-
So I'm gonna say, drop down, double underscore, no drop down, hover and then combine that with dropped down double underscore menu.
-
Okay, display block.
-
When I hover, it's gonna be displayed block.
-
Now, remember, keep in mind, this is normally not displayed it all, but I'm displaying it as none.
-
So the reason why I put that there is because I'm gonna say display takeaway, display none and put that back in.
-
And so now it's not there.
-
I want to have her booms display block.
-
So now it appears.
-
So now we're playing with an actual drop down menu.
-
Okay, uh, we're gonna see padding 10 pixels Start making this look a little bit better.
-
Text decoration?
-
None.
-
I don't want those links have underlines.
-
Border top Solid one pixel one pixel ee Oh, ee oh ee oh ee zero a zero a zero.
-
Save it.
-
Check it out.
-
So far.
-
Looking better.
-
Ah, but those list items need to be Oh, you know what?
-
I didn't do this right?
-
Drop down hover.
-
Final drop down menu is display block.
-
But now this is gonna be dropped down menu, eh?
-
A.
-
There we go.
-
So now we're going to see those links do that.
-
That's better, right?
-
There.
-
Kind of things are looking a little silly.
-
There's a border none and also display block.
-
That's something that we need to do Now.
-
This is looking much nicer.
-
In fact, it's just about done.
-
So now what I want to do is say, drop down, double underscore menu A.
-
And then when you hover over the A elements, background is gonna be fo fo fo or f 000 not f o.
-
Because you can't put the letter o in there at zero color and then 3 to 3 b 40.
-
Save that check it out Boom, boom.
-
Look at that.
-
That is a nice, tidy little CSS only dropped down with Onley.
-
About 49 lines of CSS and very minimal market.
-
Just a few lines of HTML.
-
So there is your CSS only drop down menu.
-
Thanks for spending some time with me today.
-
Coding up.
-
The drop down menu can lead to Seo in gay number 28 don't forget good job.