The sections so here we can see this is how our website looks right now now in this video we will add some javascript so that we have the functionality for this menu button.
So if you go back to the original design here we can see when we click on this menu button we have the menu items displayed over here and if i click on this close button.
It disappears and we also have an animation for all the menu items when it appears on the screen so we're going to use some javascript to add the animation as well.
And the next thing we need to do in this video is change the active state of these dots so if you scroll down and go to the my project section the second dot should be active over here.
And in the same way we have the dots for the active section active over here so this is what we're gonna do in this video let's get started .
We can see we have the html for the menu items so here we can see we have this division with the class of menu icon so this is the menu icon that we see over here.
So we need to access that in our javascript to add the functionality now when we click on this menu icon we want to display this nav items division so if you go to our css file and if you.
Scroll up here we can see for the nav items we also have added a class of active so when we have the active class we are displaying the nav items and when we don't have the active class we are.
Just setting the opacity to zero so let's do that using javascript so we need to reference the menu icon and the nav items so let's go to our main.js file and here let's tap const menu icon.
Equals document.queryselector menu icon and we'll also reference the nav item so let's start const now items equals document.query selector.
Nav items Wesdigital
Now let's add an image listener to this menu icon so let's tap menu icon dot add event listener and let's check for the click event and.Let's create an error function over here and we need to add the active class to this nav items so let's type nav items dot class list dot add and here let's type active right now.
Let's go back to our website and let's see whether it works so let's click on this menu icon and here we can see that all the menu items are displayed over here now let's add an image listener to.
This close icon so let's go back to our source code let's go to the html file and let's see what is the class that we had added for the close button so here we can see we have this division with.
The class of close icon so let's reference that over here let's tap const close icon equals document.queryselector close icon.
And now when we click on this close icon we need to remove the active class from the nav items so here you start close icon dot add event listener.
And i will type click over here and let's create an arrow function and here i'll just type nav items dot class list dot remove and here we'll just type active.
Right now let's test it out so let's click on this menu icon and we have the menu items displayed over here let's click on the close icon and it disappears.
So everything is working all right now if you click on one of these menu items let's see what happens so let's click on the services menu item when we click on any of these menu items.
We want this nav items to disappear so
Now if we close this we can see that we are taken to the services section but the menu item screen did not hide so let's do that.So we need to reference all the list items so if you go back to our html file here we can see inside the nav items we have this ul and in that we have all these list items so let's target all.
These list items let's go to our main.js file and here we'll just type const now item links equals document dot query selector all because we have multiple items.
And here let's tap nav items ulli so this will select all the list items inside the nav items and add them inside this nav item links.
Right now we need to add event listeners to all the list items inside this constant so for that let's type now item links and we need to loop.
Through all the list items so for that we will use a for each loop so just tap dot for each and we need to provide a variable name for each of the list items so i'll just.
Name it i and let's create an arrow function now here you have to type i which is the list item dot add event listener and here we will.
Type click and let's create an adder function over here and here let's tab nav items dot class list dot remove active now what we are doing over here.
Is that we are looping through each of the list items inside the nav item links and we are adding event listeners to each of the list items and when we click on any of the list items we are just.
Removing the active class from the nav items right now let's go back and let's test it out let's click on this menu icon and now let's click on one of these.
List items so let's click on testimonials and we can see that the nav items disappears now the next thing we will do is we will.
Add a slightly different styling for this nav bar when we scroll down so if you go back to our original design and if we scroll down we can see that when we scroll down past some.
Pixels the height of this nav bar changes so let's do that so for that let's go back to our javascript file and here we will add an.
Event listener to the window element so let's tap window dot advent listener and now for the event we need to type scroll because we are checking whether the user scrolls.
So let's create an arrow function over here now let's create a variable to know how many pixels we have scrolled down so let's tab let window top equals window.
Dot scroll y so this will give us the pixel amount of how much we have scrolled now let's use this in an if condition so let's tap if window top.
Is greater than let's say 100 so if you scroll down past 100 pixels we will add a different styling to the nav bar so let's go back to our style.css file.
And if we scroll up here we can see for the main nav we have a padding of 16 pixels top and bottom and 0 for left and right now what we will do is when we scroll down past 100.
Pixels we will set the padding to 8 pixels and 0. so we can do that by creating a class over here itself but since we are just changing the padding i'll just do it in the javascript.
So let's go to our main.js file and first of all we need to select this element so for that let's create a constant and let's name it main nav equals.
Document.queryselector and here let's tap nav dot main nav all right now here we'll just type main nav dot style.
Dot padding equals and we'll just set it to 8 pixels and 0 and we'll also add an else over here so that it should go back to the original padding so i'll just type else main nav.
Dot style dot padding equals and the original padding was 16 pixels and zero and we'll also add a smooth transition for that so let's go back to our.
Style.css file and here i'll just type transition and i'll set it to all 400 milliseconds is right now let's go back and now if we scroll down.
We can see that we have a different styling for the navbar when we scroll down past 100 pixels all right now the last thing we need to do is change the active class for these.
Dots so when you scroll down and when we go to the my project section the second dot should have the active class now what we're going to do over here is that we're going to select each of the.
Sections and we're going to calculate the height of the sections and then we're going to see how many pixels we have scrolled down from the top and we're going to also take the position of.
The section from the top and we're going to add a basic if condition and then we will apply the active class to the relevant dots so let's go back to our main.js file and the first thing we need.
To do is select all the sections so let's create a constant and i'll just type sections equals document.queryselector all and here just.