Easy Multi-Level Dropdown Menu Tutorial - Using Only CSS (With Animated Dropdown Arrows)

hey guys it's Kayla welcome to the YouTube channel today I have a code tutorial for you guys we're gonna be creating a multi-level drop-down menu only using HTML and CSS so before we begin this is more of an intermediate style.css tutorial so if you guys have any questions leave them down in the comments below I'll try my best to answer them if you're excited for this video make sure you leave a like and with all that said let's get started so here I have my HTML file just have everything set up I'm inside of the body tag up here I'm linking to my main CSS which is this file right here and then if you look at my folder structure I have an images folder with an arrow icon which is just this PNG file it's a 16 by 16 error or 96 by 96 pixel arrow here so if you guys want to create one of those you can I'll probably have a link in the description so you can download this entire folder once we're done so let's start adding our code so inside of the body I'm going to add a div tag with a class of nav I'm going to be using mine for navigation if you're using it for a mobile never you want to call it to symbolize that so inside of this I'm going to start by creating an input of type check box and I'm gonna give it an ID of menu next I'm going to create a label that's gonna be pointing towards that idea of menu so for menu and inside of here I'm going to give it a Unicode of an hash tag nine seven seven six semicolon so you'll see here we just added a hamburger menu that's what that Unicode does and so how this works is I've mentioned this in past code tutorials if you've seen any of those this is just pointing towards that check box so if I click this button here it activates the check box so inside of that div we also need to start with our elements that's going to be dropping down so I'm going to create another div with a class of multi-level and inside of here is going to go each one of our div tags for our dropdowns so I'm going to give this one a div class of item so we're going to create multiple items and inside of each one of these is going to be our first level of elements so in item one I'm going to create another input of type checkbox' with an ID of a close that and then create a label for that for a and this label is going to be my first element which is services so here you'll see I have my services on the screen with its corresponding checkbox next to it below that we're going to create an unordered list and each of these is going to be dropping down from this element so I'm gonna create an Li I'm gonna open close an a tag on the href I'll just pound symbol that out and this one's gonna be called branding so under services we have branding then I'm going to also put web slash app development and below that one will do Internet marketing and SEO and those are all the elements we're gonna have under that drop-down so this drop down just going to be one level and it's pointing to each one of these individual pages so I'm going to find my item div and I'm going to open another one below that one class of item so this is our second item and this one's going to have an input of type checkbox' with an ID of B since it's our second item I'm gonna close that tag and we're gonna have a label for it pointing towards that ID and on this one I'm just going to call it jobs so our second drop now is going to list a series of jobs so we're going to need an unordered list okay so instead of following our same structure we did up here where we have a check box and we have a label for that check box and then we have our links inside of our unordered list this time we're going to go ahead and create a sub item which is going to be basically like our item here it's going to have its own drop-down menu so it's a little complicated at first but it's very simple once you get the hang of it so we're just going to create a list item that's inside of this unordered list and inside of that we're gonna create a div tag and I'm going to open that up I'm gonna give it a class of sub - items so we know it's a sub item and inside of here at the top we need to create an input just like we did before of type checkbox' and I'm gonna give this one an ID of B - a and so the reason I'm doing that is because this is the first sub element of the B item you can do any kind of naming scheme you want I just found it was simpler to do capital letters and so we're gonna need a label for this so label for B - a and I'm going to call this one UI / UX so this is our UI UX jobs and it's going to have its own unordered list now so inside of this list item we're gonna have another ul and then here we're gonna have list items each one of these is going to have an a tag since they are links to other pages I'm gonna pound symbol those out and the first one is going to be for a UI slash UX designer so someone who does both jobs second one is going to be for a UI designer only and the last one is going to be for a UX designer so if we look over here on the right services and jobs are on the same level and these three links and UI UX are actually on the second level and then this is now the third level of our drop-down ok so outside of this list item so we're back in this unordered list now let's create another element so in another list item and this list item is gonna need another div tag so I'm going to open that one up and this one's gonna have a class of sub - item as well and following the same structure as the last sub item we're going to need an input of type checkbox' I'm gonna give this one an ID of B - B and then we're going to need a label for that pointing towards that ID so B - B and this one's going to be development so these are going to be development jobs now so below our label we need to create an unordered list so we can have the drop down for this one and we'll just create Li and we'll give each one of these an a tag and href pound somebody's out so these are going to be linking to the development pages so we're gonna have front-end developer and then let's just do back-end developer okay and so that sub item is now done so outside of its div and list item you can also add links that do not need to be their own dropdowns so to do so I'm just gonna create a list item for example create an a tag href pound symbol that out and we'll call this one graphic design and then the last one we'll do another one of logo design let's actually make these graphic designer and logo designer makes a little bit more sense so that's all I'm going to need under the jobs drop-down so I'm going to add one more drop down to give this a class of item since we're now outside of this dip we were working in and we're going to need an input so it can have a drop down and let's give it a type of checkbox with an ID of C since it's our third drop down and we'll give it a label for C and let's call this one about us will create another unordered list and this will be containing all of our list items that link to pages so H ref found some of those out and we're gonna have our team let's duplicate that one then we'll have clients duplicate that and then we'll have our work alright so that is now all of our HTML that we need for our drop down you guys can make this your own add drop downs where you need them you get the point you have an item inside of that item you have a check box and that check box represents the title of the next drop down and inside of that you can have list items or you can go another level deep and create a sub item and it has its own check box which has its own unordered list and then you could go another level deep and just call that like sub - sub - item and it can have its own label and then another drop-down and you get the point you can go as many dropdowns as you want I personally wouldn't suggest you going any further than this because then you're getting into user experience issues and it's just good to keep it nice and simple alright so before we begin our CSS coding I did mention that we are going to have icons of arrows next to each one of our dropdowns we're gonna be adding that at the end but I am going to go ahead and code the dot arrow class in this so if you're wondering what dot arrow is you'll see in a bit so don't worry you know freaked out that I forgot something all right so let's start with our global Styles I'm first gonna add just a comment because I like to organize my CSS especially if you're using one CS test for your entire website it can get very long so I'm just going to call this one global and below here let's just target the HTML and the body tags and we're just going to set some general style so the width is 100 percent margin of 0 padding of 0 and let's go ahead and set our font family to something like Helvetica and them a sans-serif if that's not available and that's about it for the global so let's create another section and I was going to call this one funk and this is where all of our functionality to our drop-down is going to go so I just quickly split my screen horizontally and I need to mention that I'm going to be using several CSS selectors so if you're not familiar with them I highly recommend you go to w3 schools and look at the CSS selectors I'll leave a link down in the description below so you can easily go read up on them so first thing we're going to do is we're going to write one line that hides all the checkboxes and all of our links by default so dot multi-level then I'm also going to target the dot item classes and there you LS and we'll just do that for now I'm gonna say display of none so that just hid all of those and that collapses them by default I'm also going to target all the checkboxes now so all these checkboxes on the screen are going to be targeted by saying dot nav space input and I'm going to do of type checkbox and so now all of our checkboxes are hidden so now we need to be able to open them in use when we select a checkbox so to do that we're gonna say hash tag menu colon checked and then I'm gonna use the tilde key to target the dot multi-level and I'm also going to say dot item space input of type checked use my tilde key again target the UL of all those and we're going to say display of block so all that did is when we click on one of these it's going to expand its drop-down with just two lines of code we can now collapse and expand all of these links pretty cool so I'm gonna go ahead and expand all of them just so we can see what we're going to be doing and that's pretty much all you need for the functionality so now I'm going to create another comment and this one's going to be for the arrow so let's go up to our HTML and actually add that arrow class in so every where we need an arrow is right before each label so for every drop-down title we're gonna add an arrow I'm gonna do so by just saying image of source images arrow and then just close that up let's also add a class on there called arrow and I'm just going to copy this and like I said add it right before each label so here's a label we'll put it in front of that so all these arrows it looks really weird is in front of every drop down so the only thing I'm going to add right now is just dot arrow and display of none just so we can hide it later on I'm going to style it once we style everything else and we're also going to get the functionality going so then let's open up another class and I'm going to title this one of styles and we're just gonna start styling this now so it looks good first things first when we highlight over a label we need to change our cursor so cursor I'm gonna change that into a pointer so when we highlight over the labels it acts like a link very nice next we need to style our labels so a width of 100% display of block z-index of three so that it's on top of our arrows in a bit so we can just click anywhere on the label and is av acts like a link so Z index of three position of relative that is also for the arrow later on then we'll style r dot nev so the nav i want to have a width of 100% i want a background color of white and I want to set an overflow of x2 hidden so anything that overflows on the sides of the screen I want it to be hidden so it doesn't like break our screen at all and then a border to the bottom let's do one pixel solid and I'm gonna give it a color of CFD eight the C so it's a lighter blue grey color down there now we need to style our dot nav icon we don't actually have that so I'm going to go back to my HTML find my hamburger menu and add an ID of knavish icon so down here we'll say hash tag and nav - icon and we're gonna set the font size on this to 28 pixels should do the line height so I'm going to set 250 pixels let's set a padding to the left of 1 a.m. and let's say color of whites and then a background color of f4 for three three six now let's style a lot of our elements at once so I'm gonna target the dot nav ul the dot nav Li and the label now if you're gonna do different styling than me this might mess up a little bit so if you're not doing exactly what I'm doing you might need to separate these three because it will apply these two the same elements a few times but for my case it doesn't really matter it doesn't cause any problems so just be aware of that if it causes issues for you so line height of 50 pixels to match the nav icon I'm going to set a margin of zero padding of zero to the top and the bottom and then 2m to the sides list style let's take that away so we need none text decoration of none I'm gonna set a color to this of nine zero a 4 a II set of font weight of 100 and a width of 100% next let's style a dot item ul we have some heading issues padding of zero to the top and bottom and 0.25 e/m to the left and the right that straightens everything out just a little bit better and then we need to target the dot nav Li a so our a tags and I'm gonna let's just copy everything we have up here and we'll paste it in here this is one of the items that I could not include up here because it acted a little weird and I think everything should be the same the padding I know needs to be bumped to 4 since it's another tear down we don't need the width so we'll take that one off and so that's pretty much all of our styles for our drop-down let's just add our arrows now so everything is fun nicely and it all works it just doesn't look the greatest that's why we need to add our arrows so let's see you X all right so I'm gonna take away the display of none let's set a width and a height to 12 pixels I'm going to vertically align this to the middle I'm gonna float it to the left and I'm going to put a Z index of 0 so it is actually behind each one of these labels so what we did was they made these labels 100% width so we can click anywhere in this section and it will actually drop that down so now we need these to be positioned underneath that label but next to the word so the Z index make sure it's below it so now let's adjust the margin to position it correctly 17 pixels by 1 a.m. by 0 by 2 a.m. puts mine in the correct position as you'll see there and now when we click on these we need this to animate so to do so by default my arrow is rotated down so we're going to need to rotate it to the side a little bit so I'm going to say dot item input plus the dot arrow class transform rotate negative 90 degrees the eg semicolon so now my default there are rotated to the side so it looks like it's collapsed and we want this to animate transition over 0.1 seconds so 0.1 s so when it's returning back to this state it will animate as well so now let's animate it as we drop the menu down so to do that we're gonna say dot item input if it's checked plus the dot arrow class so when it's checked the arrow class needs to transform needs to rotate to zero degrees over a transition of 0.1 seconds and there we go so we can collapse all of these now and see that our menu does work okay so I did accidentally add one arrow next to our hamburger menu I was trying to figure out why it was pushed over that far off camera there we go okay so make sure you don't add the arrow next to that label everyone but that label gets an arrow and that is it that is all you need to create your own multi-level drop-down menu either for a mobile navigation or any part of your website all the links that you will need are in the description including the source code to this tutorial and to the css3 selectors so you guys can read more about those I hope you guys enjoyed this one if you did make sure you leave a like on this video if you haven't subscribed yet you should for more UI content as always I hope you guys have a great day and I'll see you guys in the next one [Music] [Applause] [Music]

Channel: Caler Edwards

Views: 60,209

Keywords: Caler Edwards, CalerEdwards, Graphic Design, Adobe, Creative, Art, design, how to, tutorial, speedart, speed art, web design, website, landing page, page, home, Professional, UI/UX, UI, UX, layout, user interface, one page, Photoshop, Illustrator, developer, develope, user experience, creative, Caler, Xd, experience design, php, html, css, speed code, stylesheet, responsive, front end, links, css3, div, media queries, breakpoint, checkbox, input, for toggle, label, navigation, nav, multi, level, dropdown, multi-level

Id: EalgZXjDR2Q

Length: 22min 14sec (1334 seconds)

Published: Tue Aug 29 2017