Responsive Navigation Component With Vue 3 & Vue Animations

all right what's going on everyone today we're going to be looking at how to create a responsive navigation menu inside of view 3 and we're also going to be using the view animations to animate our responsive navigation menu when we get down to a smaller viewport okay now we're not going to be creating this whole entire page here i just went ahead and added this hero section to go ahead and fill some space in for this demo now our navigation is pretty simple we're going to have our branding on the left here and then we're going to have our nav links on the right and when we hover over them they're going to change color and also a border bottom is going to appear underneath those as well all right so when we inspect this and we get down to a smaller viewport which is going to be 750 it's going to convert to a mobile navigation here you can see that the links are going to disappear and then we're going to show this icon right here of our three bars now when we click on this our navigation menu is going to slide in from the left and then if we click on it again it's going to slide back out and we're also going to be animating our icon here alright so that's what we're going to be building here so let's go ahead and get started now if you want to follow along i've uploaded the starting files to a repository over on github so the link will be down below in the description for that and then once you head over to this link you're going to want to click on this green button right here that says code and then you're going to simply download the zip and then you can open it up with your text editor of choice and you'll have all the starting files that i'm going to be using here for this tutorial now in this repo i've already went ahead and created a few things for us now the first thing i went ahead and created was our hero section here inside of our home view so as you can see that's right here i'm not going to go over this but you can find all the styling and html for this right here in our home view now i also went ahead and created our empty navigation component here which is what we're going to be focusing on in this tutorial and then in our app.view i went ahead and created a few global styles so first off i'm importing a google font here inside of the style tags and then i have our simple reset then i'm defining our app to have a min height of 100 vh and then i have our container class which we're using here on the home view okay so that's pretty much it now the first thing we need to go ahead and do here is actually start up our local servers so to do this i'm going to head to our terminal and then i have one already open i believe so you want to cd into your directory that has the view structure which in my case is going to be navigation menu which i am right now and then all you simply want to go ahead and do is say mpm run serve and this is going to go ahead and start up your local development server now once complete you'll see that our app is going to be running on our local host and for me it's on port 8081 so i already have this open in my browser so if i head over to my browser on port 881 on localhost you'll see here we have our starting project with our hero section that i went ahead and created in the starting repo so what we want to focus on is going to be the navigation here so let's go ahead and begin to implement that now in our navigation component here let's start with our markup so i'm going to remove this div here and i'm going to go ahead and create a header tag and then we're going to do a little class binding here and the class i want to go ahead and bind to this tag is going to be scrolled nav here and we only want to apply this class if a data value which we haven't created yet of scroll position is true so we will go ahead and create this in just a moment after we finish our markup but what this is going to do is when you scroll down the page to a certain uh certain amount of pixels we're going to go ahead and shrink the navigation okay and we'll go ahead and get to that near the end when we actually uh finish up our header or our navigation here but i just wanted to kind of explain what we're doing here now inside of our header we're going to go ahead and create our nav tag and then first off what i want to do inside of this nav tag is create our branding here so we're going to have a div with the class of branding now inside here we're going to have our image which you can find inside of the assets here which is going to be our logo.png so we're going to say at and then we'll say assets and then we're going to say logo.png here all right and that's going to be it for our branding now we also want to create our navigation link so what we're going to do here is have a ul with the class of navigation okay now we're also going to have another data value on here so i'm going to go ahead and say v show if mobile is not true and we'll go ahead and create this in just a little bit as well but i just wanted to add that on there for now okay now inside of our ul we're going to have our li tags and then we're going to have our router link okay and then we're also going to give these a class of link here and then i want to go ahead and bind our two attribute because you have to have a two attribute on your router links okay and what we're going to do here is instead of just leaving them blank i want to show you how you would go ahead and set this up if you were actually creating a real navigation so i always prefer to bind my two attributes on the router link in case you change your your route uh path here in the router so you can see here that we have a path of backslash so technically i could just go ahead and say to and get rid of this and just say like like this and that would work but if i change the home path here to something different like slash home then i would have to go ahead and change all of my uh paths that i have set to this to home and that's that could be kind of tedious to go ahead and do so to get around that what you can do i'm going to go ahead and put this back is you can actually reference the name of the route instead of actually using the path so you're not going to change the name of the path prop sorry you're not going to change the name of the route probably as much as you might change the path so this just makes it easier in the case or the event that you do go ahead and update those paths so let's go ahead and put this back i probably don't need to go to that put our curly brackets there and say 2. now to go ahead and set this up you're going to go ahead and pass the name value here and then the actual uh name of the route you want to go ahead and pass it to now we can say home for this one because we're actually going to make it say home and then for the additional ones i'm going to go and copy this down three more times and then for the rest i just want to go ahead and get rid of this and put it to an empty uh string right there because we don't have those routes created so we don't want to get any kind of warning so we can go ahead and just leave those as empty strings and then for the rest of them we're going to have about and then we're going to have ports folio and then we're going to have our contacts here okay and then what i also forgot to show you is that in our index.html i also went ahead and imported font awesome which is a font uh icon library okay so that's in our public.html here so next up what we're going to have here is under our ul we're going to have a div with the class of icon here and then what we want to go ahead and do here is pass in our i and we're going to have a class of far fa bars here okay and we also want to put a v show here if mobile is true and like i said we'll go ahead and create this value here in just a moment now we also want to pass a click event here called toggle mobile nav whenever we click on this this is what we're going to use to open and close our navigation menu on mobile okay and then the last thing i want to go ahead and do is another class binding so we're going to go ahead and do this at the end here so we're going to say class we're going to pass in our curly brackets here and the class that we want to go ahead and create or add to this is going to be icon active here okay now we only want to display this if mobile nav is currently true which mobile nav is another value we're going to go and create which is going to determine if our mobile navigation is actually open or not which will be triggered by this click event right here so hopefully that makes sense lastly i want to go ahead and create our mobile navigation markup here so i want to go ahead and create a transition tag here and we're going to go ahead and pass this in name of mobile nav okay oops and go ahead and do that and then we'll say transition here so if you weren't aware view has these custom tags called transition which you can go ahead and use to animate the elements within a view project okay so we went ahead and passed it a name of mobilenav here which we'll go ahead and reference in our styling when we go to animate this okay so inside of here we're going to have our ul which i can honestly just copy this right here to save some time they're going to be the same and we only the only thing we want to go ahead and change here is we want to say v show only if mobile nav is true and then for our class here we're going to have this having class name of drop down nav here okay so if we head over to our project you're not going to see any of the markup we just implemented because we currently don't have this component imported into our app so before we go before we go ahead and begin styling this what i want to do is head over to our app.view and actually import this so where we're going to do this is inside of our div with the class of apps we're going to say navigate oops navigation here and then we'll end that and then we need to import that here in our script tag so we're going to say import and we're going to say navigation from and then our components and then our navigation here and then lastly we need to go ahead and create our components inside of our export default here and then register our navigation okay so if we save that head over now we can see that i probably spelled something wrong let me see n-a-v-i-g-a-t-i-o-n and there we go so that misspelling went ahead and gave us an error but with that you can see that we have our navigation here on the very top which we need to go ahead and do some styling so let's go ahead and address that so here in our style tag let's go ahead and create a few line breaks to create some space in here let's start off with our header tag here and what we want to do is give this a background color of rgba and let's go ahead and remove this right here oops and what we're going to say in here is we're going to go ahead and give it a black value so we're going to say 0 0 0 and then we're going to go ahead and say 80 percent opacity there so 0.08 now what we want to do is pass this as the index value of 99 and we want to go ahead and give this a width of 100 and we're going to position this fix so if you were to scroll down on your uh website that the header is going to stay fixed at the very top the entire time okay and then what we want to go ahead and do is give this a transition of a half a second ease and all and this is going to pertain to the scrolled nav class we're going to add here in just a little bit okay and then for the color i'm going to go ahead and pass white here now the next thing i want to go ahead and do is we're going to nest this since we're going to be using scss i'm going to go ahead and target our nav so we're going to go ahead and start off by giving this a display of flex flex direction of row and then we're going to give it a padding on the top and bottom of 12 pixels 0 on the left and right and a transition here 0.5 seconds ease all and then we want to go ahead and give this a width of 90 and we're going to say margin 0 auto now this is going to be our mobile first approach here so what we're going to do is pass a media query here and we're going to say min with and we're going to say 1440 pixels or sorry not 1440 1140 here and then we'll go ahead and open our curly brackets here and we're going to say a max width of 1140 here all right now next up what i want to go and do inside of our nav here is i want to target our uls and our link here so we're going to do a little shared styling and what we're going to do is we're going to give it a font weight of 500 we're going to pass it a color value of white a list style of none and also a text decoration of none as well okay let's go ahead and scroll down here now next up what i want to go ahead and target is going to be our link which is what we have or the class that we have on our router link here and actually no i got ahead of myself we're going to target that but just a moment we want to target our allies first here so for our li we want to do a text let's see transform set this to uppercase and we want to give it a padding value of 16 on all sides and then a margin left of 16 pixels here okay and that's going to do it for our li now for our link tag i want to go ahead and give these a font let's see font oops font size of 14 pixels we're going to go ahead and give this a transition as well of half a second ease all we're going to give it a padding on the bottom of 4 pixels and then we're going to pass it a border bottom here let's see border bottom 1 pixel solid and then transparent now the reason why we're passing it border bottom solid transparent transparent is because we're going to add a hover effect here and what we're going to do is simply go ahead and change the border color to the color that we want to go ahead and apply on the hover effect so we're going to say is and hover because we're using scss so we can go ahead and do this and we're going to say color and we're going to say 0 0 a f e a which is going to be a nice blue and then for the border color we're going to go ahead and do the same thing so we can say border dash color and then we'll say zero zero a f e a okay and then once we go ahead and get our branding and our image we can go ahead and take a look it should actually start to look a lot better than what we had originally here so just below our link i want to go ahead and target our branding here and for this we're going to go ahead and just say display flex we're going to align the items to the center here and then for our image i want to go ahead and give this a fixed width of 50 pixels and then we're also going to apply another transition here and this is simply going to be when we update our scrolled uh navigation class we're going to do a little bit of uh we're going to add a little difference to our image here so to have that smoothly transition from the property here to the property we're going to change it we want to go ahead and add that to this transition property onto this cli or this image tag here so we're going to say 0.5 seconds ease and all so now if we take a look we should start to see that it is getting a little better so our image is a lot smaller but now we have to work on our actual nav links here but as you can see when we hover over them they have this really smooth transition to our different color and then the border bottom okay so let's go ahead and next we're not going to see this just yet because we haven't actually defined the uh this value here of mobile but what i want to go ahead and do is target our icon so what we can actually do for now to actually see this is let's go ahead inside of our script tag up here and let's go ahead and create our data so first off i want to go ahead and give this component a name navigation and then for our data here let's go ahead and i always forget to do this we're going to add a comma so we're going to say data and then we're going to return here and then what we want to do is we're going to give the define the values here and what i'm probably going to do is just copy and paste these in to save some time here okay so we have our scroll position we have our mobile we have our mobile nav and then we have our window width here which i'll go ahead and just and we're going to go ahead and get to this in a moment what this is going to be for all right so what we want to go ahead and do now is if we head over to application we should not see anything but if we change mobile to i believe true we should then see our mobile navigation icon here okay so you can see that's going to be right there so let's go ahead and style that up real quick so let's head back to our application here or our project and for the icon what we want to do is head right below our branding here and we're going to say icon okay and we want to display this as flex first off and then we want to position this absolute all right now we want to go ahead and put this at the top so we're going to say top zero and then to keep this organized we want to align the items to the center here okay and then we want to go ahead and say right and we're going to do 24 pixels from the right all right so now what we also want to do is give this a height percentage of 100 percent and then if we take a look at this now we should see that our icons on the right here and then we have it all the way on this side but i think what we need to actually do here is on our navigation or our nav we need to go ahead and say position i believe relative and that should go ahead and position that inside of our container that we went ahead and said here on our navigation on our nav tag here okay so that looks a lot better so this icon is really small so we still need to go and do some styling to that so let's head back down here and then what we want to say is target our i class inside of our icon here we're going to go ahead and say cursor pointer we'll say oops did that wrong so cursor pointer and then we're going to say font size here of 24 pixels and then we're going to go ahead and give this a transition again of 0.8 seconds this time and ease all okay geez having some trouble okay so if you recall what we did is we did a class binding on here to mobile nav and then we gave this icon or this class of icon active so what this icon active class is going to do is you want to go outside of this here so we're going to say icon active as it's simply going to go ahead and rotate our icon to kind of give it a cool effect when we click on it so a user knows that something's happening so how we can do that is by saying transform we're going to say rotate and then do simply 180 degrees in here and then once we go ahead and add this click event here or our method or our function whatever you want to call it a toggle mobile nav you'll see that happen actually on our application here okay so that icon looks a lot better now so to continue working on things here what i'm going to go ahead and do is actually change this to false for now okay so if we head back over to our application you can still see that we have these uh displayed as this and i don't know do we forget something here let me go ahead and take a look uh yes so we did go ahead and miss something so back in our styling here i completely forgot to go ahead and style our navigation here which is pretty simple so we got ahead of ourselves now before our icon i want to go ahead and target the navigation class here and simply what we want to go ahead and do is set this to display flex want to align the items to the center we want to say flex value here of one and then to justify or get this navigation on the right hand side of our navigation menu or bar you want to say justify content and say flex end there all right so we take a look now that looks a lot better and is now positioned on the right hand side of our application here now the last thing we need to go ahead and style up here is our drop down navigation so what i want to do is i want to go ahead and inspect this here and now this isn't going to work when we shrink down because we haven't set up our functionality yet but i want to go ahead and mimic the view here so what we can do is we can head over to our app here and in our data we're going to say mobile and set this to true and then our mobile nav let's set this to true as well so that should therefore hide our original navigation and show our mobile navigation here and now our icon is also visible so let's go ahead and style this up so in our style sheet here just below the icon and icon active we're going to target our drop down nav class here and we want to start off by saying display flex we're going to say flex direction column we want to position this as fixed and we're going to say with is 100 percent of the available space but we want to go ahead and say no larger than 250 pixels here and then for the height we're going to define this as 100 and the background color we're going to change to whites okay and then we want to go ahead and set the top value to zero and then also our left to zero okay and that's going to go ahead and do it for our simple styling on our drop down but now we want to go ahead and target some of the classes inside of here or the tags so you want to say on the li you want to go ahead and reset the margin left to zero and then inside of our li we have our link and then what we want to do here is set the color to black and we need to put our money sign there okay and that should do it for our styling here on our navigation so let's go ahead and take a look and see how this looks so as you can see currently we have this displaying and it looks just like our demo so now we need to go ahead and implement the functionality to where we can go ahead and resize our screen this will hide this will hide it and our navigation will show and then when we get down to a mobile view here you want to be able to click on this and toggle this navigation menu so let's go ahead and begin by just changing these to null again and let's go ahead and change these to null now inside of our export default here what i want to go ahead and do is define our methods here all right so let's go ahead and create the function here of toggle mobile nav so that we can toggle our mobile nav open and close so what we're going to say here is a very simple function we're going to say this dot mobile nav equals the opposite of this dot mobile nav now if we actually i guess we should have kept this to true and we head back over to our application we should be able to click on this and it's going to hide and show our navigation and as you can see when we click on this now our icon here is going to do a rotation of 180 degrees which i think is a really cool animation here to kind of you know improve the user experience all right so that is all working now once we finish our functionality here we'll go ahead and implement the smoothness of this coming in and out but for right now you can see it's very explicit and it looks pretty bad all right anyways so what we want to go ahead and do next is the ability to detect if it's on mobile or not because right now there's no way to go ahead and do that so what we need to do inside of our methods here is create a function this function is going to be called check screen here okay and what we want to go ahead and do in here is we want to get the window dot inner width so what we're going to say is this dot window width which is this value right here and we're going to set this equal to window dot inner not height inner width here okay now then with this what we want to say here is if this dot window width which is this value right here is less than or equal to 750 then we're going to say this dot mobile equals true okay and then we're going to return out of here so if this is not true then what we want to go ahead and do is say this dot mobile equals false and then we also want to say this dot mobile nav equals false as well and then we'll return out of here now you may be wondering why we went ahead and said this to false now say just for you know sake of this uh demonstration and demo if the user is trying to test out the responsiveness here and the mobile navigation is open and they're closing it and opening it they may have a problem where the mobile navigation menu is stuck open because there's no way to close it so what's going to happen is when a user gets above the screen size it'll automatically close that if it is open so just a little way to go ahead and keep our application from running smoothly if someone is trying to go ahead and break it or something like that so not necessary but just something you know you can go and implement to avoid that from happening okay so as you can see when i was doing this nothing happened because we don't have a way to actually run this function here so let's go ahead and actually do that so what we want to do is is inside of our created lifecycle hook here that you haven't defined it so let's go ahead and create that we want to listen for a event to happen on our application which in our case is going to be a resize so we can say window dot add event listener there and then we're going to say we want to listen for resize and each time there's a resize we're going to run the function of this dot check screen okay now not only do you want to listen for the resize we also want to run this function explicitly when the application is first created here so now if we head over to our app here we should see when we actually start to resize it here nothing happens did we do something wrong here let me go ahead and see because that should work let's see so the issue is inside of our event listener here i went ahead and explicitly tried to call this function with our parentheses here which we don't need to do we can simply just say this dot check screen and that will go ahead and run our function down here whenever this event is triggered okay so if we head over to our application now and i try to resize this you should see that it should all work properly and we get down below 750 our icon appears this disappears and i can go ahead and click and toggle our mobile navigation here now with the implementation here i said if this is not true we want to set this to false let me show you how this all works so for example if we have it open and we're trying to resize our application here it'll close that so we don't break our website or our application here because if it stayed open you can see our icon disappears so we would have no way to get rid of this menu besides trying to go ahead and refresh our application here so the final piece of functionality i want to go and implement is going to be when we scroll on our application our navigation is going to shrink in size a little bit okay so currently we're not going to be able to see this unless we add some additional content to our actual app here so let's go ahead and do that real quick so in our home let's go ahead and do a section here and let's just add a paragraph with lauram uh we'll say like 1000 we can hit tab there and that should go ahead and allow us to have some additional content let me see here that was really a lot of lorem so you can see we'll have this right here so if we head over to application now we should be able to scroll and you can see that our navigation menu is fixed so it is coming with us so now what we want to do is actually implement the functionality for it to detect when it's scrolling past a certain height so that it can go ahead and change okay so in our app here we can go ahead and close out of this and what we want to go ahead and do is create ourself a new method and that's going to be called update let's see scroll here now i made a little bit of a mistake earlier and what i want to go ahead and do is change this value of scroll position to scrolled nav for this to make more sense because with that value it doesn't really make sense what we're going to be triggering or what we're going to be changing so we'll change this to scrolled nav here okay so we're going to be doing something very similar to this function right here but this time what we're going to be doing is we're going to say we're going to declare a new variable here called scroll cpos position here and we want to set this equal to window dot scroll and y okay now what we want to go ahead and do here is we want to say if scroll position is greater than 50 then we're going to say this dot scroll nav equals true and then we'll return out of here and if it is not true then we're going to say scroll nav is false so we'll say this dot scroll nav equals false so like i said here if we have this equation true then this class of scroll nav will be applied to our application here now we never went ahead and actually set up that class let's go ahead and do that really quick here so down below let's head all the way to the bottom here and we're going to close this up and we'll say scrolled nav here and what we want to go ahead and do is we want to change the background color to simply just be black like you know we don't want any kind of opacity we're going to change it to this specifically black now what we also want to do is you want to import a box shadow which i'm going to go ahead and copy here and this box shadow is just a simple one you know right here so you can go ahead and see that just to add some depth from our um our application to the navigation menu okay and then what we want to go ahead and do is say nav here we're going to target the patty and we're going to change this to 8 pixels and 0. and then let's see here now for our branding i want to go ahead and shrink the image a little bit so we're going to say image and we're going to say width and we're going to set that to 40 pixels and we're also going to apply a box shadow to that as well so now if we scroll up and down our navigation we should see the styles take effect and our navigation will shrink just a little bit but enough to go ahead and make a little bit of a difference okay so if we head back over here now and we scroll down to 50 pixels uh actually that's not going to work because we didn't actually initiate our function here yet so i should have known that so how we can initiate this is what we're going to do is we're going to come down here we're going to close our methods and we're going to create a mounted lifecycle hook here and what we want to go ahead and do is say window dot add event listener again and we want to look for the scroll and then each time we see a scroll we want to go ahead and say this dot update scroll okay so with that on our mounted we should actually see this working here okay so we scroll down 50 you can see that now our navigation ever so slightly got a little bit smaller and the background turned to a dark black so that when we get down to something like this we can't see through it and we can actually see our whole navigation here so if i go back up you can see once we get above 50 our navigation will enlarge and our image will will go back to normal here now to wrap things up here i want to go ahead and implement our animation for our mobile navigation menu because currently it just explicitly comes in and it comes out okay so let's go ahead and implement that so if you recall we added this name right here of mobile nav to our transition okay so by default view will go ahead and add this name to the class that is applied to this transition whenever it is toggled in and out of our view okay so let's head down to our style tags here and what we want to do is open this back up and then we're going to go to the very bottom here let's see drop down nav and then we're going to say mobile nav and they have an enter and leave active class now what we want to go ahead and do on these two classes is define the transition type you know the duration if it's ease and where to what to apply the transition to so what we're going to say is nav dot enter or slash enter active and then they also have one for leaving so what we're going to say is instead of enter they have it say leave okay and then let's go ahead and open this up here so we want to go ahead and define our transition here so we'll say transition we'll say one second ease all now they also have classes for going and leaving to so what we want to go ahead and say is we're going to do mobile nav and they have one called enter from so what we want to go ahead and define on here is a transform so we're going to say transform oops transform here and we're going to say translate on the x and we're going to go negative 250 pixels so when this comes in we want it to start 250 pixels off the x-axis here okay and then what we want to go ahead and do when it comes in which will be a class of enter 2 we'll say mobile nav enter 2 we want to go ahead and say transform and then translate x and then say zero okay now also when it leaves we want to have go back to negative 250 pixels so since this is going to be the same styling here or the same transform property we can just simply go ahead and tack it on here with this mobile nav enter from so we're going to say mobile nav leave to okay so with that implemented we should be able to head over to our application and we should see our navigation or our mobile nav is going to come in smoothly and then it's also going to leave smoothly all right so that's going to go and do it for our video here on our response and navigation menu inside of you three with view animation so if you guys did enjoy it i would really appreciate you guys leaving a like down below and subscribing for more content like this and i will see you guys in the next one take care

Channel: John Komarnicki

Views: 4,061

Rating: 5 out of 5

Keywords: HTML, CSS, HTML5, Css3, navigation menu in html and css, responsive navigation menu with html and css, responsive navbar, responsive navbar html css, mobile navigation menu css, mobile navigation bar, css animation, animations css, Animated Responsive Navigation Bar, hamburger menu, css tutorial, Responsive Navigation Menu With Vue 3 & Vue Animations, Vue 3 Navigation Menu, vue 3, vue.js 3, vue.js, vue.js nav, vue js navbar component, vue animations, Navigation Menu Component

Id: u2AwJAFeaKc

Length: 35min 33sec (2133 seconds)

Published: Thu May 13 2021