Responsive Portfolio Website Project

Responsive Portfolio Website [3] – Rotating Menu Button

right guys in this video we're going to work on the menu the menu button and all that stuff but at first of all I want to make a git commit because I forgot in

the last video and that's the problem with using git in videos I always forget because I'm just I'm just consumed with teaching and what we're doing and talking that I forget to do my commit so

it's not going to be the most organized get process but let's just go to another terminal here and we'll clear this out and I'm just going to add everything so I'm going to say get to add all and

let's say git commit dash M and I'll say index mark up and main sass alright alright so let's move on we'll go back to the other terminal here and let's make this smaller so for the menu we're

gonna have our own s CSS file for the menu because there's gonna be quite a bit of sass so let's create a new file here called underscore menu dot s CSS and then we want to of course bring that

in to the main s CSS so let's do import menu like that alright and let's see what we're gonna do first here so we want to kind of build out the button like I said it's going to be purely CSS

so in the menu file let's say a menu button has a class of menu – BTN and we want to position it absolute because we want to say exactly where we want it to be which is going to be over in the

corner and I also want it to always be on top I'm going to give it a z-index of 3 so I want it to be very close to the front and then from the right I'm gonna say I want it 35 pixels and also from

the top we'll do 35 pixels and then when we hover over it we should have a pointer so we're going to cursor:pointer and i want to give it that that transition that ease out mixin

so that it transitions all of its properties so we'll say @include and let's say ease out like that actually let me check something here yeah make sure the menu is after the config so if

I save that we're not going to see any difference here because the the menu button has nothing in it except a couple divs and those divs have the class of BTN line so though that's what we want

to style next so inside within the class of menu button let's create the BTN dash line styling so I'm going to give it a width of 28 pixels and let's give it a height of 3 pixels remember this is each

line okay so if we look at the final project each of these lines is this BTN line so 28 pixels wide 3 pixels in height and we want margin which is going to be the space in between so I only

want margin on the bottom so we're going to do top 0 top right bottom will be 5 pixels left 0 and let's set the background to white and then let's also include ease out on this so I want to

say include ease out and let's save what is going on here wise that that is that saving all right am i having an issue with notes so let me restart notes ass if you guys aren't

seeing any changes or anything just go ahead and stop this with ctrl C and then let's run NPM run sass again what is going on we should be seeing it we imported menu

why are we not seeing it let's let's resave this I'll just save there we go alright so now it's showing up so I guess because it's a partial and we included it for some reason it wasn't

updating so if you if you're not seeing it just reset your your NPM run SAS and then re-save the file so now we have our button over here obviously it's not gonna do anything we haven't added in

any any effects to it or anything yet and we're going to have to use JavaScript for that and we're going to get into the JavaScript because I want you to look at the final project and

let's look at the elements tab in the dev tools alright so we want to check out let's see the menu button class and then the nav class menu and all this stuff in between now watch down here

what happens when I click the when I click the button see that the closed class gets added here on the menu button and then all of this other stuff gets the class of show and when I click it

again that stuff goes away so that's what controls is this this whole thing here so we're gonna have to use JavaScript to be able to make that happen so let's go ahead and open up our

j/s inside the dist we want the j s and then the main J's file and I'm just gonna close that up and make this smaller so we want to select items from the Dom so let's say select Dom items

and by the Dom I mean a document object model which is basically like the UI structure all the HTML tags the attributes all that stuff so we want the menu button we want the entire menu

overlay the the nav list or the nav items we want the branding all that stuff so let's say Const we'll create a variable called menu BTN and set that to document we're gonna use the document

property here and there's a method called query selector which will do just that it'll select what whatever we put in here we want to select the class of BTN – menu okay so query selector

works just like jQuery in terms of selection you can use classes or IDs or just elements whatever you want any kind of selector and then let's just copy this down a couple times and we also

want the menu itself so create a variable of menu grab the class of menu we want let's see what else do we have let's look at our index so we got the menu button we got the menu we also want

the branding the menu nav and then each nav item those should all be in variables so here let's do menu nav which is the UL so it has a class of menu – nav and we want the menu branding

so that has a class of main menu branding okay now for the nav items and what I'm talking about is let's go over here is each of these items here each of these links now since there's more than

one we can't use query selector because that will just grab the first one so we need to use something called query selector all which will take all of those elements and put them into

something called a node list which is similar to an array so let's call this nav items and set it to document dot query selector all this time and we want the class of nav dash items okay so

that's our Dom selection now what we want to do is set the initial state of the menu so what I mean is the overlay this right here we're going to create a variable that represents if it's open or

closed but it will be set to true or false so this will be true and then if it's closed that's false we obviously want it false by default so let's say let show menu and let's set that to

false and I'm using let because we want to directly reassign this certain times and you can't do that with con sconces for a constant so now we need we need an event listener because

when we click this that's when we want stuff to happen right so we're gonna say menu button which were you defined above we're gonna add an event listener on to it we want to listen for a click event

and then once we click we want a function to fire off called toggle menu which we need to create so let's say function toggle menu and we first of all want to check the state of show menu we

want to see if it's false so if not that's what the exclamation is not show menu and then let's put an else here as well so if the menu is not shown meaning that that overlay this overlay right

here is not shown so this state here then when we click this we want it to be shown right so we want to add those those show classes we also want to add the closed class to the button because

that's what we're gonna that's what we're going to use to make the X to make that X form so let's first of all take the menu BTN and in vanilla JavaScript we can easily add a class by doing dot

class list dot add not ass not ass we want class list add and we want to put in the closed class okay so we're going to add the closed class and then we can just copy this down so this one here

will be menu and for menu we want to add the show class okay everything else gets show the only thing that wants that is the closed class is the menu button so show and show so want menu we also want

the menu nav to get that as well so menu Navin so menu branding ads show now the nav links is a little different because the nav links there's more than one and up

here we use query select all so the way that we need to handle this is we need to loop through all of the items and then add the show class to each one so we'll take nav items right and actually

I messed this up up here say oh I did class nav items they actually have if we look the class of nav items singular so it won't work we need to change that to nav items so nav items we're going to

use a for each here which is a high order array method and we just pass in a variable that we want to represent each item and then I'm going to use an arrow function here and I'm gonna take that

item for each one and then I'm gonna say class list dot add and show okay so for each nav item we want to add the show class all right now else we actually before we go into else we just want to

reset the menu state so now show menu should be equal to true okay because now it should be open now we want to do the same we want to do this the opposite of exactly what we did here in the else

okay so basically if the menu is shown and we click it we then want to remove all these classes so remove class let's remove I'm just going to highlight this add and do control D one two three to

select all those and then say remove okay and then we just want to set this back to false and that should be it that should be all the JavaScript we need so let's test it out let's open up

our dev tools here go to our elements go to the header we want to see the menu button actually we can leave that closed but we want to see everything in here and make sure that the menu button gets

the closed class and then everything else gets show so let's go ahead and click and nothing happens you cannot read out of this out of it know what oh this should be menu button

a new button alright let's try it again let's go back to elements check this stuff out and let's click and there we go we get clothes added to the menu button and

then everything else gets the show class now if I click it again that stuff should get removed let's click it again and now it's gone all right so that's the Java Script now obviously that

doesn't do anything in the UI that just handles that that Dom manipulation to handle the UI we need to use sass or CSS so I think what we'll do now I don't think we'll be able to fit the whole

overlay and the button transition and stuff like that in this video but let's at least take care of this this we're how it turns into an X and back so let's do that now remember when we click this

gets the class of clothes so that's what we want a style so that's part of the menu button so we want to go within this dot menu button in the sass and go down here make sure you're not within the

button line but outside of it but still in menu button and then let's put a comment here and we'll say rotate rotate into X with menu lines so let's say ampersand dot clothes because now we're

styling the menu button when it has the class of clothes right so when it's clicked and we want to say transform we want to transform we want to rotate it right so we want to rotate and then here

we can put a degrees we can put 180 degrees ok now if I save that and let's see what happens when I click it just rotates like that ok so that's part of it

now we need to deal with each line because each line we need to basically reposition the second line we're actually going to get rid of and we're going to take the top and bottom and

make an X with it so it's actually kind of cool so let's go down here and then say dot VTN – line okay because we want to deal with the button lines and we want to basically select each one and we

can use a pseudo selector called enth child to select each one so let's say line 1 line 1 is going to rotate let's say line 2 we're gonna hide line 2 and then line 3

is also gonna kind of rotate all right so let's handle the second one actually no let's just go ahead and start here so we're gonna say ampersand : nth – child and we want the first line so we put

into one here okay and just to show you this works we'll say let's change the background color so we'll say background red and save now if I click this notice that the top line it

does the rotation and the top line turns to red when the closed class is added and when I go back it goes away so what we want this to do is just rotate and may put it make it go in a diagonal

fashion so we can use transform rotate and then we use translate to kind of position it and you can look up these properties like CSS let's say transform and the Mozilla site has is really good

for this so right here alright so when it gives you an example did you see that transform let's say let's say 1.5 let's see how to see that how it changes so you can transform we

can translate which repositions it and we can put this wherever we want if we change this to and this is x and y values if we put a hundred it moves over if we put zero moves over so translate

just repositions it and then rotate turns it so we want to use a combination of those to create this effect so let's say let's get rid of this obviously we don't want that

and we'll do transform say rotates we want to rotate 45 degrees because remember we're making an X and then we want to translate which will just kind of reposition it to five pixels five

pixels all right let's save that and see what we get so if we click there we go so the first line you can see has repositioned itself using rotate and translate okay so that's what we want

for that line the second line we want to completely hide so I'm gonna copy this and change this to two because that's gonna grab the second line and we're simply going to change the opacity to

zero which will just basically just make it go away I'll hide it all right so let's save that let's try it and there we go so the second line is now hidden now we want to deal with the last one we

want to make that one go this way okay so let's copy this and let's go down here and paste that in we'll change this to three because we're working on the third line this time we want to rotate

negative 45 we want it to go the other way and then we're going to change the translate position to seven and then negative six okay and it took me a

little while messing around with these values to get it to look like an X but that's what I came up with so let's save let's go over and click and there we go so now each line has the middle one is

gone and then the top one is going this way and the bottom one is going this way so CSS transitions are very very powerful okay you can do a lot in terms of animation and stuff especially you

know you have to add a little bit of JavaScript so that you can add and remove classes and stuff like that but I think that's a pretty cool effect and I think that X looks good but if you want

to try to reposition it a little you can do that you can mess with the values you can make it thicker whatever you want to do is fine but I think we're going to end the video

here guys in the next one we're gonna work on the overlay so we want to work on this whole part here okay before we do that though let's go ahead and do our commit so let's go to this terminal here

and we'll say get add I'll get commit and it's do dash M and what do we do here we did the menu button we did the JavaScript and we did the rotate I will save me a menu button JavaScript

and rotate all right good all right so that's it guys I will see you in the next video where we'll start to create the overlay

In this part we will create the pure CSS menu button and add the JavaScript and CSS transitions to rotate the button into an X

Code For This Project:
https://github.com/bradtraversy/moder…

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia