Drop Down Menu - CSS Animations 

The legend lives on! Thanks for all of the videos. A year and a half later - still a great resource! Miss you on YT, man! But at least we have the late-night IL, right! :)

I really love this series! It's quality is the best (like always), you explain everything you do, and it's relevant to both Designers and Developers! thanks again for your great content!

It's amazing how positive this community is, no dislikes so far! I thank you travis, for the effort you put in to make it this positive and also for the amazing and informative videos you make. :)

Thank you. This was one of the best tutorials I ever saw. Such fun.

Wow i was looking for a great animations tutorial for my web design project. This is perfect, you even take time to explain some of the parts which is nice for people like me who is new to web. Keep it up.

Travis, Your front-end dev videos are no doubt the best I've found on the internet. So first, a huge thank you for all the work you put into helping people like me! (also a designer interested in the world of front end dev) Question: In my specific case it makes sense to also animate the list items as they disappear. ie. after your mouse leaves the menu I'd like to have whichever one that is open, reverse the animation (or at least fade out). I'm using the CSS checkbox technique you shared in another video as my trigger for the dropdown. So when I click it closed I don't want the menu to just disappear like it is now. Thank you to anyone who might have an idea!

Great Episode! I like watching you doing stuff without knowing exactly how it should look in the end :)

As always, great tutorial Travis, you always manage to learn me new things. Didn't think about using loops yet in my CSS. Keep it up ^^

Just the right amount of content, teaching verve and humour to make this an enjoyable learning experience.

I'm really loving this series!

This channel is amazing and I have learned a ton from it. Thank you, Travis!

Thanks, Travis!! Awesome as always

Travis is back at it again!

Travis amazing episode, thanks a lot that you show basic css and html for me it is very important :) Good luck.

Ok I just found out about this channel, and I am absolutely amazed of course, my question is, is there any SASS courses made by Travis around? And what other playlists should I watch?

Thank you for all you do Travis. Don't forget about us when you become big

I do talk to myself when I program.

Great video Travis.

Loved it as usual. Great work!! Just want to share something with your viewers here. One good practice - IMHO - for drop down menus is to make them open on Click and not on Hover. I am sure Travis did it this way for the purpose of showing the animation because it is quicker this way. When a user hovers over a menu and suddenly get slammed by a long list of items, it is quite an annoying experience for most people and the user feels they need to make a decision right away. Moving to the item they want to click on is quite a pain because they might accidently move out of the menu list and lose the whole thing. Frustrating. That's why many people prefer to make the menu show on click and only click. Now the user can click on it, take their time to see what's in there, easily select an item from the list or painlessly click away to close the menu.

Fantastic video. Thanks for the effort and the ideas!

Awesome work bro!

Thanks again for your time and effort. You're a great help. Awesome teacher!

I got left out. There's a lot to learn in web development now. This is a great video! Thank you for making this.

Amazing stuff, as always!

You are great man. Can not stop watching your tutorials..

Best navbar tutorial ever!!! keep on with your awesome videos!

one comment about: (300ms * $i) - 300 you could've written this instead ;) : 300ms * ($i - 1) this way it would resolve correctly even when you change the ms you wrote (150ms * $i) - 300, which resolves to -150ms delay for $i = 1 which probably doesn't make sense anyway great tutorial, thx for sharing I definitely learned something new today :)

Dude c'mon, WebTech schools are going to go broke because of you xD

You are really amazing. Learning a lot from you instead of searching from web.

Great stuff. Videos like this are going to be relevant for years.

thank you for your time! and good tips from Puerto Rico

Just when I needed. btw your "123456" was hilarious

Awesome Travis, keep on with these videos, found there great inspiration. :)

We should make a compilation of all of the intro segments lol Besides that, amazing video! Made me realize that I have never really touched the transform property before. XD

Pretty cool video! Thanks Travis! :)

Lovely! What a right time to bring up this video :D Thanks travis

Thanks for your videos Travis. I recently got a part-time job as a front end developer, and you helped me A LOT in this field! I will consider for sure the Patron thing when I make more cash! Love you from Barcelona!! (edit: btw Trav, SIX is pronounced SEIS, not SIES lol!)

holy shit! that's amazing! thanks for sharing Travis! :)

This is a great lesson. Thank you.

Again, glad to see your lessons!)

came here for a drop down menu video, subscribed due to great greeting, man i love the internet

THINK YOU SOO MUSH MISTER TRAVIS..very nice tut..

Cool video! Bu do you have for each page a different css file?

Thanks alot again!! this channel really helps me!!

Great videos. Thanks for sharing!

Pretty amazing! The only problem I see is how can we do it if the amount of submenu > li is dynamic?

Travis you inspire me every time with your videos... Tnx a lot my friend!!

Awesome Video as always Travis :)

OMG I love you!!! Amazing Episode!!

This is amazing man...

thanks man its amazing

Great content helped a lot thank you!

I really like your lessons, it doesn't only teach the subject matter, I can also help someone swing out from moody state

This is just pure AWESOMENESS!

Probably the best developer on youtube! I'm really grateful for every video you upload. I've been following you for an year or more I don't have much but i was wondering if i could donate you some money to thank you

That was sick man , Great Work !

It takes great tenācity to pronounce opācity! You are a pro at instructional videos. I think the code pit Sass may have changed since you made this because I couldn't view compiled CSS when I carefully copied your text for the first animation effect. All that said, thank you for the quality video.

The anims didn't work for me. No fault of Travis' because Pug has made some changes since this tutorial was posted. Anyway, If you're running into the same issue. Dylan Stark over at StackOverflow showed me how to fix it. Use this piece of Pug syntax instead of what's shown in the tutorial: ul(class="drop-menu menu-" + i)

Hi Travis. I love the playful style you present techniques and I'll try to emulate that in my videos. When I do css I usually have trouble to find which effect goes well together. This video gave me some interesting ideas to play with. I notice that you have very crisp sound in your video. I have a hard time creating good sound. I'm hiding it a bit by music. But with the "high" quality mic (blueball) I should get a better result. Do you use any filters to get your sound to the next level? best regards Daniel

thx travis !! u are a great educator

i didnt notice those numbers were in spanish till you said it. ;) Greetings from Venezuela

Are you kidding me?! I couldn't imagine doing that even with jquery, you handled it with CSS3. I didn't realize css3 is so powerful until I saw this video! Two thumbs up!

Great Sass style for your vids presentation delivery!

I am thinking about those who dislike these videos. There must be something really wrong with these people. I feel bad for them. Thank you Travis for the amazing work that you are doing.

Thoughtful video thank you

Very Nice work..

This is the way...You Are The Best Travis!!!

Nice animations! I'm thinking it would be more efficient to have only the changing property in the for loop. That way you're not repeating the same thing several times when the properties are processed by sass, making a much smaller file size. That would only matter for deploying an actual website. I'm guessing you wanted to keep it simple for beginners though. :) I mostly watch DevTips now to listen to your jokes haha, and also to observe your thought process as a designer. I hope to see more vlogs soon, they're my favorite! Keep on hacking, Travis!

You are very COOL man, your videos are amazing!!!!!!

Wow! I can't believe how useful CSS really is!

Awesome tutorial! Is there any way to make the dropdown fold back when the mouse move away?

thank you Traivs is wonderful to watch this video and its very helpful .

Good stuff Travis! I wish you had shown how to animate the hiding part as well since just animating half of it kind of makes it look half done in my opinion.

Hear a pop sound in 1... 2... 3... - 7:30. Great video Travis.

Hi Travis, I Like it Man. Infect I Like all your videos so, Before i start watching your video I press Like button first. I always talk to my self when i code or design anything. Thank you again for you Awesome Videos.

Awesomenesss!!

You are funny and a Good Teacher .Really!!

mannnnnnnnn!!!!! i loved ur work.. love ur humour man..(dont mind my spellings tho XD)

You are my hero!

hahaha great tutorial man!!! you need more spanish classes hahaha but all good!!! thank you ! you support me so much with your tutorials

This guy's the digital ages Bob Ross. I hope he has pet squirrels.

So nice!!!

Awesome!

realy prety. I love this. Thanks man.

thank you a lot, man

Really cool series! I have a question, how can i do to make the same effect (in reverse) when the mouse leaves? Is there any way to do this css? Thanks!

+DevTips What is the Font you are using on code pen example when you write () it looks like o. Thanks for spreading your knowledge

thank you its very helpful for me.

amazing video , helpt alot ^^ thanks

Wow men! Nice video

i followed all the steps but still dont get the same output . can someone upload the html and css file here? TIA

Nice Work Man...

coolio Travis ...!!! #TheBestTravis ...keep posting such awesome videos...learning a lot from you ...:)

Too much fun buddy :)

Holy crap them animations be dope

This was awesome :)

Ohhh that's very OPACK :D :D Best line ever

Nice video :) Question: Any reason you keep the units on your transform where the function values are zero? My math knowledge tells me that units don't matter when the value is zero, so I usually write transform values of zero without units. E.g. transform: translateX(0) as apposed to to transform: translateX(0px). Thanks!

i really liked this video. Super cool.

This is beautiful loved it . How does the transform origin make difference..:)