Responsive navigation with an fun animated dropdown using CSS clip-path

hi everybody and welcome to my next video I'm really glad that you're here in this video we are going to be creating a responsive navigation it's going to go from a little hamburger menu that drops down and then we go to a full-size screen it's going to turn back into a normal navigation you get on a desktop computer and to do this we're going to be using a little bit of jQuery and to get the whole drop down effect we're going to come in with a really cool animation and we're going to use a clipping path to do that so yeah that's what we're gonna be doing before I get started just thanks a lot for coming here I'm super super excited I've hit 50 subscribers I've done pretty much zero self-promotion on this it's just growing organically and it's picking up steam so thank you for everyone who subscribed super super happy that you're here just can't be happier you know keep on watching my videos keep on liking them if you're enjoying what you're getting here and if you do want to have any input on how this channel is going please leave a comment below and let me know what you'd like to see on the channel I'll be very glad to help you out this one was a suggestion from however you say your name sorry dude I really have no idea how to pronounce something without any vowels in it but thanks a lot for suggesting it I'm super you know happy to be doing this so and if you'd like to have a video done just let me know if you there's something specific you'd like to see me cover I have a few other suggestions of other things that I will be getting to eventually if you haven't subscribed yet please do hit the subscribe button I bring you new videos every single Wednesday on how to make the web and how to make it look better while we're at it and enough of that you wanna you're obviously here to learn how to do it so let's jump right into it and start coding away so on the screen now you can see what I'm starting with I've done a little bit of work just to get rid of some of the really boring stuff on the basic set up so if we jump into my HTML first I have a header set up inside my header I have a container just to hold my content so if we look just down here my containers really really basic I have my logo there which is just generic Oh logo nothing fancy space for it there and then I have my nav now we could do this two different ways we could do it with one navigation for the mobile view and a second navigation when we go into the desktop view you'll see that used a lot I'm going to do it with just one navigation instead of turning one off another one on I like doing it all with one it keeps my HTML a little bit more clean which I personally prefer but there's nothing wrong with doing it the other way find a way that you like the best in this one we're just sticking with a single navigation so I've already set that the basics of that up right there giving it a little class of site nav and I've set up a div class menu toggle here with a div class of hamburger it's not doing anything yet because I haven't done any CSS for it but that's going to come in that's going to be our little toggle that we're going to use at smaller screen sizes now if we jump into my CSS honestly all I've done is import my google fonts I have my body's really basic stuff there the container that we looked at I've just been setting up colors a little bit of padding on my header just to give me that space on the top and I have positioned it relative because we're going to have some absolute positioning coming up so that will help us out I put a clear fix on there just to stop any issues because this currently is floating left and that is currently floating right that we can see there there's my logo logo and then my site nav right now all I'm doing is floating it to the right so now what we want to do is we want to get this to look like a mobile menu I'm going to start with the mobile menu I'm going to get the mobile menu working properly and then I'm going to put in my media query and make it look different on the desktop view once I have it looking good at both views I have everything working the way I want it to I'm going to come back and do the clipping path right at the end but it's definitely worth sticking around for it's a really cool way to get a nice little unique animation in there instead of the same thing you see everywhere so I'm actually going take this float right off that's we don't need to be flowing right we actually want this to be a position of absolute let's move this up so we can focus on it a little more because it's all going to be on the CSS now and this as you can see is on code pen so I'm going to be put the link is in the description if you want to come in here and play around with it yourself fork it off do whatever you want with it it's there to be played around with so I'm going to change this from a float write and I had done that just to sort of split them up but I want to switch this over to a pull so Luke and obviously that's going to change whoops I hit a real sort of screws things up a little bit to begin with but that's okay just we can see it let's give it a background I'm just going to put a black background for a moment so I can see it and help with my positioning and obviously I have a few things here that definitely need to be done I'm going to do my site and have UL o it is the UL site now I can do this all on here and I'm actually and put it right at the top then margin of zero padding of zero list style of men no it isn't a that's silly of me this should actually go on you up my site map is my nav it's not my ul ul and just paste all that in there there we go that's better I need my site and have Li and let's just give do I need to do anything right now I'm not going to do anything on there just yet but we will be doing some stuff on there and my site and have a let's just make it so we can see it color white text Declaration of none okay so that's a decent start there's definitely some changes I will be making to this I don't want it to look at all like this when I'm done but this just makes it easier for me to move around a little bit so jumping back up to my site nav I have my position:absolute now what I want is I actually do want it on the right side and I want it to come down and up eventually on this side sort of like it's coming from underneath this bar here so we're going to do a top of 100% so because it's relative to my generic old logo if I did a top of 0% it would put it right at the top they'd share the same top so a top of 100% we'll start it right at the very bottom of that whole thing so I know that it's lining up perfectly there and then we can just give it a right of zero and I'm just gonna be percent so it's all the same but you know this was just a zero like that it would work just as well so that looks okay what else do I want to do drew drew drew let's just change the background color on there I do have a color picked out I have it written down here it's going to be four six four six five five just to make it look a little nicer and that's about it okay so now on to the UL that's about it that actually that's all we're going to need on there I do think but we need to fix our list items a little bit so let's first Papapa should I do it on I don't know if I should put the padding on my list items or on my links and I think I'm going to put them on my links instead we want them to be you know we're pushing this with our finger we need it to be a big fat area that we can push on with our finger so on my links themselves again I have another color here that I've written down so we might as well do the colors properly EBE bd3 it's almost white it's the same color I used here just for consistency's sake it's a little bit of an off-white there already no I want to put some padding on them so to be able to get that to work properly I will have to do a display:block first and then I can add my padding and let's try a two m6m for now I'm going to stick with that one thing I didn't mention that I completely forgot about I also want to be using font awesome little icons in here I'm gonna put a little icon on the side that leaves a nice amount of room for those icons to fit in so I'm going to leave it like that for now they're a little bit big but we'll see once I put those icons in what I want to do last thing I'm gonna do is a text transform of uppercase there we go yeah so they Cal ittle bit big right now but I can live with it I also want to separate these a little bit actually now I want to put a line in bring them so let's come up into our Li and just give that a border on the bottom I have one pixel solid and again I have a color picked out already five seven five seven six six and that gives me that little border there just a little subtle subtle border to separate them and right away I find personally when you have a lot of space like that between them without the border on there I find the space is here look really really big and then these two spaces look smaller so it sort of makes the whole thing look off-balance a little bit here and here is smaller spacing than everywhere as soon as you put a border in there just now everything as equal spacing everywhere much more visually pleasing but really really important that that border is subtle it shouldn't be something that grabs the eye at all it should just be this visual separation so I'm trying to keep that as subtle as I can but still visible and I think that's all I need I think that's start with going to be pretty good let's just give these a little hover effect I think it's gonna be nice if there is a hover on there even though it's mostly going to be for mobile where hover won't come in just move that so you can see it better site nav a a hover and I'll also put the site nav a focus on there since this is more for mobile and what do we want to do we want to change the background so let's give it the background color is going to be a nice yellow which will be e 4 B 3 6 3 and there we go and of course when I do that now I can't really see the font very well so I will change the actual color as well to the same dark color we already have there our 4 6 4 6 5 5 so that's the background color that I originally had on my computer it's showing up as super thin it's not you know I probably want to make it a little bit bigger actually should we do that right now I'm going to do that I'm going to bring this up to 400 and it also means my Google font here needs to be updated because I only have this we hundred in there that makes it a little bit easier to see because when it's going like that the home looks fine when I hover over it gets a little thinner for some reason which is weird because I wouldn't expect that actually but it looks a little bit thinner so I just thought it was too thin you could barely see it so if you're on a Mac those letters would probably look a little thicker just because or even in other browsers you know different browsers and different operating systems render fonts differently so do be aware of that and that looks pretty good but I'm noticing on this one when I hover you can see right at the bottom there there's that blue line showing up and that's the border I have a border bottom on everything and that border bottom is still there and it looks terrible that's really bothering me so we're going to turn that off and do a site whoops site nutsoid soat site nav li last child so we'll select the last li and say wow I'm not typing good today border bottom of none I think none works right yeah there we go super super really happy with that okay let's keep on going I forgot to put my semicolon here I know it's not essential but I like having them everywhere so now we need that to disappear and reappear and to do that I actually need something to click on so here's one of the first things that's going to be really fun to do is to make our little thing there so let's just take a look again I have my menu toggle div and inside there I have the hamburger so the menu toggle will be the actual thing that I'm clicking on and the hamburger will just be the visual hamburger menu itself you'll see a lot of different ways of doing this I'm doing it with one empty div there's plenty of ways of doing it you can actually find some icons to use that would work fine I want to do a little animation with it with one div and some pseudo elements so that should be some fun let's try and get that to work out so the first thing we need to do is create our menu toggle so menu toggle and the first thing I'm going to do is give it a background so we can see it a background of black and eventually this will be transparent but for now I'm going to make it black let's do padding of 1m so we can see it okay better position:absolute again so I can position it in the right spot and now we can see it's a little square the top should be okay let's just do a top I'm not going to move let's move it on the right now one am I guess hmm so this and this are the same but it's sort of glued to the bottom I want to just move it up a little bit so my I change this a little bit top of 0.5 and 0.5 mm 0.75 that looks better it's still a little off but we'll see what happens once I turn off the background on there I'm just looking for equal spacing on all three sides here just because it's going to look a little bit nicer I have a feeling once I bring my hamburger menu in it's going to be a little bit off anyway so I'm not going to spend too much time trying to perfect that and it's something that will be clickable so I want to change my cursor to pointer so when I hover on there it actually looks like it's something I can click on which is obviously you know doesn't look like it people might not click it that little visual representation is good again this is mostly for mobile view but I'm just in case going to include that on there and now we need to make our hamburger so that's cool let's just start with doing the basic which will be one line hamburger so for my hamburger there's a few things I'm going to have to do let's give it a background again so I can see it background we'll stick with that off-white that I have eb e BD 3 i think is what it will be so that's okay i'm going to give it a height of let's say three pixels yeah you can see when I add that height I'm going to on do that's going to get smaller I'm going to redo gets bigger so I'm happy I didn't spend too much time trying to perfect the positioning of that my backgrounds okay do I need to give it oh I have a background I have a height width of Oh 100% I want it to be this big oh that's not gonna work this is all padding there's not actually any width to that element at all to him that's okay but it's probably too big a one point five point seven five I think that looks so right so I'm making the first line in my hamburger menu and I'm also going to give it a border radius border radius 3e pixels just to round those corners off on there instead so it's not square I like having my hamburger menus with just a little thing like that cool and now we need to bring in the other two so I'm just going to do that with pseudo elements and I'm actually they need to all be exactly the same as this so I'm not going to go crazy I'm just going to you know I'm not going to do everything over again have hamburger before and [Music] hamburger after and the only thing I'm going to need to change to actually make this work is I will have to do because there's pseudo elements they need to have we have to declare what the content is which is nothing and we have to just declare the display type of block and now you can see that there's two lines sort of stacked on top of each other there's actually three there the first one is on top of the original and then the other one is coming down below that so now we have to position them properly and there could be different ways of doing the positioning here I'm just going to use a bit of transform on it so hamburger before we'll start with that one transform translate why I want to move up and down so on the y-axis and how much do I want to move it I want to move it up I want to move it up so up is negative up negative three pixels oops I don't want that semicolon there oh that wasn't enough I just moved it up so it wasn't directly on top so let's do another three so a total of six there we go so that one looks good and now let's just copy that whole thing hamburger after but on this one I want to move it down by three pixels yeah so one of them is going up by negative six the other one's coming down by three the spacing looks equal the spacing looks equal and there perfect what if I do a seven on it just for fun and I guess I'd be a four on that one mmm I think I like this better it was a little tighter and of course now I don't need that black background on you here anymore I don't want to actually see that I just want my hamburger itself so let's take off that black background and I need to reposition it completely there's way too much space on the top and on the right and do I need that padding on there I take that padding off completely yeah oh no then I have to click literally on one of those I'm going to leave the padding on there I'm just and it gives my room to click on it's a little bit bigger so you've got a fat finger it does give you the extra space my top 0.75 how does that look that doesn't look terrible that space in that space look more or less the same I'm happy with that I'm going to leave it like that for now so now I want to make it so when I click on that this can appear and disappear so that's not too hard to do but we will have to use a little bit of jQuery for that we cannot do that with CSS because we're going to have to be playing with some classes I'm going to be toggling in class on and off that's going to make this up here and disappear I'm going to do it the first way using jQuery and the jQuery UI and I'm going to do it again after remember instead of using the jQuery UI I'm going to come in and do the clipping path instead just because this first way is a little bit more standard and then the second way is a little bonus that will give you at the end of the video so in here we're going to do a couple things so I want to select my menu toggle which is the this whole area here and when we click on the menu toggle we want something to happen so if we want something to happen we've to do a func Boop function and our function we're going to have a couple of things happen right we want to select then site nav whoops I forgot my there we go I'm going to select the site nav I want to add a class on there so I'm going to do a toggle clasp let's just make this a bit bigger so you can see what I'm doing all on one line toggle clasp what should we call it we should call it site nav open and what else do we need to do we're going to start with that we're gonna have a little bit we're going to need a little bit more but we're going to start with that so I'm going to select my when I click on my menu toggle we are going to take our site nav and we're going to add or remove the class site nav open so when I click on this whoa it just toggled the class on there and screwed everything up oh maybe I should just have this as nav oh whoops I made a mistake here I have that twice toggle clasp there we go I think we can leave this as sitemap to site nav whoops okay yeah sorry about that that extra parenthesis on there was screwing things up and I hadn't even noticed it go so right now nothing's happening because we don't have a sitemap open so I'm actually going to bring this all the way back up to right here site nav and site nav open so my site nav open will be very simple it this will be a height of auto and we're going to bring in on the actual site nav here a height of zero pixels and a overflow because if we don't have the overflow hidden we will see everything true why is it not working ah there we go on enough so and just to show you if I take off this overflow here yeah it's all there so the overflow hidden is really important so I'm saying that my site nav is normally zero pixels tall so it has a height of zero pixels we can't see it when I click on my menu toggle we're adding the class site nav open and what site nav oppan is is it's changing the height from zero pixels to height of auto and that's matching the height of my menu here so the it's jumping back and forth in now what to actually make this is a little bit of an animation instead of it just being on and off you can use the jQuery UI and just to show you I am linking to both of them I'm linking to jQuery here and the jQuery UI obviously adds a little bit of extra code but that's okay it does give us a school thing where I can actually put a time or a duration on that animation to happen so instead of it just on or off it can toggle on and on with a little 500 millisecond animation which makes it look a lot nicer so that looks pretty good so let's on and off and now what I'm going to do is I'm going to add I want this to animate so when I click on it it's going to turn into an X and then goes back to my regular hamburger menu to do that it's not too complicated actually I'm going to do that with this open though so I can see what's going on and I'm going to add a second thing on here so we're also going to select this so we're selecting the menu toggle and when it's clicked the menu toggle will toggle another class and it's going to toggle the class of just a menu toggle toggle open do just that make sense I'm just going to say open it's going to make it a little bit easier for me to write because we're gonna have to play around with those hamburger menu things so let's just give myself a little bit more room okay so what I'm going to do is say that when I have my open and we'll just do it for the whole hamburger first not my open my open am burger so when my hamburger is inside of something with the class of open we are going to have it do a little transform right yes we're going to do a transform rotate of 45 degrees ah keep doing this on 45 degrees and when I click on that the whole thing should just turn to the side there we go blink and it's just turning to the side like that so again when I'm clicking on my menu toggle it's adding or removing so I'm adding or removing the class of open to my menu toggle so my hamburger is inside of there so if the hamburger is inside of open it will turn and if it's not inside of open it will turn back so that's the first step and now what I want to do is I want to say that my a open hamburger before is going to change to an opacity of zero because I only need two lines to get this to work I don't want three because I'm making an X and we'll take the other one open hamburger after and we'll do a transform rotate negative 45 degrees oh not now you go 45 negative 90 there we go because there is a distance between them it doesn't make it perfect X so we do have to move it a little bit here and to do that actually I need to do that with a second transform I need to sort of position it a little bit better and I can't do that here by coming in and doing it I can't say transform and do a different thing here so just to show you what I want to be doing is another translate translate why I don't know how much I need let's just say negative five pixels for now and it's moved it but it's replaced this so as we know with our CSS it's always the last thing that wins and in this case this is winning over that but luckily with transforms you can just do everything with one and I just need to be separated with a space so I can say translate Y negative five pixels and rotate it and you can see that that's working and I've just really overshot it negative two negative three negative three right negative three is bang-on I believe and I'm rotating it by 90 degrees and it gives me a nice little X so it goes from there to there and we'll just come back all the way to here and give this a transition all these in out and we'll stick with the same 500 milliseconds that I'm using for this animation so there we go I think that looks pretty nice sweet so the next thing we do is just add in those icons I was talking about that I completely forgot about so for that I actually have to come back up into my HTML a little bit and I want to make this look a little bit nicer so we're going to use font awesome to do this so if you know how font awesome works it's pretty cool if you don't know how to font awesome works well you'll find out and it's really easy they always put it on the eye tag just because it's not used for anything anymore so I have an eye tag close eye it's always just an empty eye tag and it's the class that controls it so FAS for font awesome and this one's nice and easy FA home we should be looking at what we're doing and that should give me a little Home icon sweet and the next thing I'm going to do is I will do a site nav icon this is a custom class that I'm just creating myself and I'm going to use that for positioning and changing the color of it because I don't like that I don't want to come in and change just all the font awesome stuff in general because I you know I want to have a little bit more control over it if I change all of my font awesome stuff and I'm using icons other where other places in my site it's going to cause issue of course I could say that anything that's a font awesome inside my site map but who knows maybe I'd want some that aren't so this will be what I'm going to do it gives me a bit more control I like giving a class to anything that I need to modify and we'll throw one of those on there but we're just going to change each of the icons so this one I will use a info this one I will use it's kind of annoying that you can't see these updating as I do it this one whoops pencil when it updates it disappears ah okay we'll just do them all and I'll show them to you the dollar sign is USD for pricing and envelope I guess makes the most sense for that so there we go there are my icons but they look like garbage right now so there's definitely a little bit of styling that I need to do on these now so let's I'm going to do it right after my links here I'll shrink this back up and what I want to say is my site nav icons first off I want to I want to give them a width and right now they're just inline elements so first I need to give them inline block which visually won't change anything but that's going to let me put a width on them I don't know what what they need okay I'll skip the width for now and we'll come back to the width I want them maybe bigger I guess we can do that first I'm font size that should make them quite a bit bigger good I need to push them off I don't want them stuck to the text like that I want to put a little bit of space so a margin on the right side to em well way too much 1m that's a lot better right now this is lining up straight down the side here and then I get this weird jagged line all the way there and this is why I was thinking I was going to bring in a width so what I'm going to do now is give it a background of pink just to show you what the whole purpose of giving it width is because what what's happening now is I get this weird jagged line I don't want I want this to be a straight line down coming down there so on my background of pink and let's just give this a width I'm guessing at 1m just to see if that works that seems to work the house is pretty much a square that one yeah I think though maybe I could do it a little bit bigger 1.1 just in case I ever had a bigger icon but that seems the envelopes a pretty big one and that's working well and again that just makes it so they're all the same width and they line up nicely now it this gets the nice line cuz the space in between them is consistent and I will also do a text align to the right and obviously we can turn off my pink background now so this line you know these are all aligned on the right those are all aligned on the left and they just stand out way too much so the same way I liked having my border underneath to be really really subtle I want to do the same thing with these icons I want them to be more subtle because they're just way too much in your face right now so to do that I'm going to change their color and since it's a font it is with just the regular color property and a nice little trick and I think I got this off CSS tricks and I should have thought of it way before I read that but and I could have used this for the border bottom too actually but that's okay let's say 0.25 whoops not 0.25 point there we go I'm so you can see it sort of blends in by making it white and then just giving it a low opacity it's going to pick up that blue color from the background but it's still keeping enough of them the original color so it just gives it this nice little subtle effect and the nice thing is because my hover effect is so strong such a complete change of color it's not all of a sudden this weird blue house on top of a yellow background it's now a light yellow house umm I don't find it standing out enough I'm going to make that 40 percent maybe yeah I think I like that better so now I get that nice I think that looks pretty good except because I brought that house in that's spacing here is Gigantor now that's way too big so that would be on my actual site now my padding my links the padding is on the links the spacing on the top and bottom I like so the two two to six and the problem is the six on this side is massive so let's just give that a two and let's just write you again on the other side say pop here that's really not too bad hmm something seems a little off to be honest that's me hmm I'm just not sure here I find it looks lopsided right now I'd almost like this you know if I put that like able to feel like it should be really big to try and make it look centered or we bring it down to maybe like a 1.5 just thinking for the space to be somewhat equal on the two sides obviously here it's a bit bigger maybe this six is too big let's make that a four yeah that looks a lot nicer cool so that's looking pretty nice I have my nice little effect there where I get my ex back into my hamburger menu the drop is working good it's looking really nice so two things left to do the first thing I'm going to do is just make this so it's only looking like that at the small sizes because I actually hate seeing hamburger menus on desktop sites that are designed for desktop I understand the whole thing of its nice minimal thing and people know to click on this to get to the menu but when you're on a desktop computer screen real estate is not as important you have lots of room to play with you have space to put in a normal navigation you shouldn't have to make someone click twice to get to something user experience you're a UX design user experience UX UX all this stuff and you're making me click to click and that drives me nuts I should be able to do it in one click on a mobile device though it makes a lot of sense with the hamburger menu or something that hides the menu away because screen real-estate is super important you can't fit a full navigation in there it pretty much needs to be a vertical list like this and this takes up all the room on your screen so in that case all for it don't mind at all because it's just sort of a necessary solution but on a desktop computer whenever I see a hamburger menu like this on a full desktop when I'm on my computer I just find the person got a little lazy that they didn't come up with a different design so if you just want to leave it like this go ahead and leave it but just you know give in my opinion on that one so on the large screen we have to obviously bring in a media query to make that work so let's come all the way down to here and throw in the add media and I'm just going to put in a really really arbitrary 800 pixels for now min-width let's make it a bit smaller 700 pixels I guess just super arbitrary right now I I would normally have that focus more on the design when my design breaks I'm just coming up with a number out of my butt for demo purposes so do we want to do there's a few things we want that menu toggle to disappear obviously we don't want to see the hamburger menu so we'll start with that menu toggle whoops whoops display:none because that can go away cool and now we obviously need to see our site nav so a site nav height we will need to switch back to auto there we go so we can see it cool background I don't want to background do I need I need to change the position let's change the position for its position back to relative cool and I want to take my background off of it background:transparent cool is there anything else I need to change on their float to the right and and and and I think that's all I need let's stay there for now I need to change my list items obviously so let's say my site nav Li display:inline-block to put them in a line padding is way too big zero yeah pull this put some a little bit of margin to separate them margin no there was no padding that didn't change anything did it margin of zero is there a margin right now margin of zero there's no margin either okay hmm I guess it's all in the links but I do want a border of none cool then I need my site nav A's site nav a okay padding was a padding a margin padding zero that looks better I want to get rid of those icons site now they look terrible icon display:none I like them a lot at the small screen size I don't like them at the big one and margin left of two M maybe three go three cool do I need anything else I just need to fix my hover color I think now that looks pretty good I just don't want that background showing up so nav whoops site nav a:hover site nav a focus keep putting capital peas there instead of my curly braces and I'm not sure why I know they're close to each other but don't usually have that problem anyway background again of transparent SuperDuper there we go that looks alright not super big fan of that color but that's okay so there we go there we go so it's switching back and forth between the two of them just like we wanted to good and then that is showing up and now what I was talking about before I'm going to switch all that out for a cool clipping path already so to get this to work I'm going to make a few small changes to what I've already done and I'll be 100% honest with you I'm not a super experienced with clipping paths but I've been playing around with them a little bit and I think they're super cool and you can do such fun things with them that I just couldn't resist and it's actually something I don't remember where I saw it and I feel really bad it was someone who'd seen something from dribble that had tried to recreate it and they I don't even know if they use the clipping path I didn't look at their code I just saw the sort of I think it was on reddit anyway I saw this he sort of gave me the idea for this and I really wanted to try it out and I think it's going to be pretty awesome so what I need to change is my height so my height this open we're still going to use the open we're going to take the height auto off there and the height of zero off there so we still need these two classes but we don't need that we're going to use clipping pad this instead so on here what I'm going to do and I don't know if we need the overflow:hidden even I think we can take that off because the clipping path sort of takes care of that for us so a clipping path is done with just clip path like that and there's lots of different ways of doing it for this one I want to use a circle so just to show you a bit of how it works let's just say 50 well there you go circle is working and I can say the size of the circle that I want so I have a circle of 50 pixels and if I don't include anything it's just going to make if I do that it will just include you know default circle right there which I looks like it's matching the total width of my original thing and I don't need the overflow:hidden like you can see because it's being clipped I'm hiding everything that's not inside that circle and what I can add to that is at top right now I think I need to have a size for that so let's say 50 pixels the real so it's putting a circle at the top right starting at the top right and in this case I want zero I want it to be nothing I want to see absolutely nothing and when I add in my open is when my clipping path will change so clip path is again a circle but in this time instead of being zero pixels I think we can just do one hundred percent at top right and I want to keep the top right there because I want to make sure that it's growing and shrinking from the same place Oh interesting I thought a hundred percent went big enough probably because it's from top which what if I take that off just for fun this is 100 percent the circle should be the the same size as my thing now it's just going to click in and out so we need to add our transition transition all ease in out five hundred milliseconds it should who grow in and out and it's this cool little circle animation now the only thing that's it's really really subtle but the center of this I can sort of see the circle moving out it's really small though I I think that looks fine let's just slow it down a bit though I'm gonna make it look like mm I'm not sure if what I'm seeing it's not too bad actually just there's something about that it's giving this weird tear droppy shape that I don't really want um I just want to see if I do at top right I want to make sure that it's staying in the top right all the time and does that change see there I don't know if you see the difference when I do it this way it's a slight you can see the circle the middle of the circle seems to be staying over here it's this like circle that's growing out from there and if I take out the at top right when I do that it has a different shape to it the center of the circle is also transitioning well the animation is happening so it gives it a bit of a different shape and I don't really like the shape that it gives it some going to keep the at top right and I guess we're just going to have to make this bigger 110 mm 125 which made a lot bigger eyes missing the whole contact 150 there we go it's not going to hurt anything if the clipping path is like massively bigger even if I was doing like five hundred percent I'm pretty sure it wouldn't cause any issues I don't have any content underneath this to say that I'm wrong but I'm pretty sure that it's it shouldn't cause any issue at all yeah I just like the shape of that a little bit better and obviously that's way too slow so we'll bring it back to a more reasonable time frame maybe that's too fast yeah that looks pretty good to me now you can play around with it a little bit but I think that's really really cool I really like that and with that you don't actually need them you know where the animation itself is coming from the transition here so you don't need the jQuery UI anymore you can get away with just jQuery on it and ditch I don't need that in there anymore so even close there we go it's working like a charm I don't know I just like that because it gives us a bit something different it's a little bit more unique it looks a little bit nicer if you are doing that just be careful I do have autoprefixer on here with the clipping path I would assume that you need to and I use an autoprefixer all the time yeah you're going to need some prefixes on some of this stuff to actually make sure it works in all your browsers so just watch out for that um so yeah that's it for this video guys I hope you liked it and oh no I didn't think of that ah if this is open then it works but if it's closed oh no okay that's okay we just have to make sure a good thing I caught that right at the end there is what to say that's the end of the video but Bob menu site nav display blog hopefully fixes this no because it's being clipped how did I not think of that um I need to reset the clipping path clip path initiative would that work that would work cool okay good thing I noticed that so definitely make sure that's on because then again most people probably aren't changing their screen sizes randomly but just in case someone opens your site big and then shrinks it down because they're you know having two windows open at the same time in your whole navigation would disappear that would be pretty terrible so clip path initial you can probably even do it none on there I'd never even tried that it also seems to work I'm split initial which is probably none so it's just resetting the clipping path just to make sure it's still working that's good if it's open I still have that if it's closed there we go okay so we're all good now except I just realized that background colors transitioning which is kind of nasty okay we need to fix that sorry guys I'm running into a whole bunch of things I keep trying to sign off on this video and I just can't end it yet this transition shouldn't be transitioning everything's it's transitioning the background color it should be transitioning the clip path only there we go that background color is not transitioning back and forth that's still working hmm I thought I saw something weird I was just the color change okay I do believe that's it I finally think it is done so I really hope you enjoyed the video if you did please hit the like button so that I know that you liked it and leave a comment down below if you have any questions about what I've done if you've never used something like Fon - awesome or if you've never used a clipping path and you're running into some troubles just let me know and I'll be glad to help out and if you've made it this far and you haven't subscribed thank you so much for sticking around this long and please hit the subscribe button get you know you'll be getting videos like this every Wednesday and I look forward to seeing you in the next video until next time take it easy

Channel: Kevin Powell

Views: 114,965

Rating: 4.9310069 out of 5

Keywords: HTML, CSS, How to, Web development, responsive navigation, nav, responsive nav, navigation, web navigation, responsive web navigation, responsive, responsive website, html5, css3, tutorial, responsive nav tutorial, hamburger menu, hamburger menu tutorial, clip-path, css clip-path, css clipping path, css clip path, dropdown menu, dropdown menu jquery, Kevin Powell, web tutorial, internet programming, front end programming, jquery, responsive navigation menu, navbar css

Id: FqbOu5ZRFag

Length: 50min 42sec (3042 seconds)

Published: Wed Feb 01 2017