See that we have this selected state over here and the first menu is selected and if you select the second menu item it goes over here and in the same way if you select the third menu item it goes.
Over here and it also changes the icon over here inside this circle so this is what we're gonna design in this video let's get started .
Right here i opened up this folder called menu bar and i opened it with vs code and now let's create the files that we need so let's click on new file and let's create an html file so i'll just.
Name it index.html and we'll also create a css file i just image style.css and we also need to have a javascript file so i'll just type main.js.
Right let's start with the index.html file and vs code you have the shortcut where you can just press exclamation and press tab and you'll have this basic html file code now let's link our css.
Src and here in the src i'll just type main.js and for these icons we're going to use font awesome icons so let's get the cdn of font awesome now you can just google.
For font awesome 5 cdn and you will find this link of cdnjs.com so let's go to the link and let's copy this all dot min.css from here so i'll just click on this button.
Called copy link tag and let's go back and i'll just paste it over here inside the head section right now let's start by creating a container division to hold everything.
So let's create a division with a class of menu bar container and in that we will have a division with the class of menu bar now for each of the icons i will have a.
Division with the class of menu item and now here in the menu item division we need to have the icon so let's go to fontawesome.com and let's search for the icon so i'll just go over here and go to.
Icons Wesdigital
And let's search for the icon so we need to have the home icon we need to have this calculator icon and also this question mark icon.So here i'll just type home and here we can see this icon so let's click on this icon and let's click on this code to copy it and let's paste it over here.
Right now i'll just copy this and paste it two more times now for the second menu item we need to have the calculator icon so i'll just change this to calculator.
And for the third one i'll just change this to question so these are the codes for these icons in font awesome right now let's create a division for this circle over here which moves around when.
We select any of these menu items so let's create a division with the class of menu item selected and here you can just copy the first.
Icon from here so i'll just copy this and i'll just paste it over here because in the beginning we will have this home icon over here all right that's it with the html now let's go.
Over here to css and let's start styling this before that let's open this in our browser so i have this extension called live server installed in vs code so once you do that you can just right click.
Over here in the html and click on open with live server and here we can see our website is opened in the browser now let's go to style.css file and first of all let's.
Add some styles to the body so let's start body and we will have a margin of 0 to reset all the margins right now let's style the menu bar.
Container so let's type dot menu bar
Container and we'll give it a width of 100 percent and we will give it a position of fixed and we'll set the bottom position to 40.Pixels i will set the display to flex and we will justify content to the center now we can see that all the menu items.
Are in the center right now let's tile the menu bar so here we can see inside the menu our container we have the menu bar so let's go back to our style.css file.
And let's tap menu bar container menu bar and we'll set the width to 400 pixels and we will set a background color of zero four two four three five now.
Let's set the color of these icons to white so let's type color and we'll set it to white and now we want these icons to be one next to the other so let's set the.
Display to flex and now we want them to spread out so we want all of them to be spaced correctly so let's type justify content and we'll set it to space.
Between and now we can see all the icons are spaced correctly now we have this icon over here and it is of this selected circle over here now we need to position.
It differently but for now let's keep it there and let's set the font size to 24 pixels so this will change the size of the icons.
And let's add a padding of 4 pixels top and bottom and 36 pixels left and right i think we'll just add a padding of zero for top and bottom over here and we will.
Add top and bottom padding to these menu items all right let's also set rounded corners so i'll just have border radius and i will just set it to 24 pixels right now let's style these menu items.
So for that we have this class of menu item so let's type menu bar container menu item and for this we will have a padding of.
16 pixels top and bottom and 12 pixels left and right and we'll also set the cursor to pointer so that when we hover over this we have a pointer so i'll just type cursor.
Pointer and now you can see when we hover over this we have this pointer now let's also add a box shadow to this menu bar so here i'll just have box shadow and we'll set the values to 0 pixels 6.
Pixels 8 pixels rgb a 0 0 0 and 0.2 and i think we can increase the top and the bottom padding a little bit more so let's change this to let's say 20 pixels.
And i think that looks better now let's style this menu item selected so for that we have this class of menu items selected over here so let's style that so here let's type.
Menu bar container menu item selected and first of all let's set the position to fixed right now let's set the height to 60.
Pixels and the width to 60 pixels and we will set the background color to d61717 and let's set the border radius.
To 50 and now we can see we have this circle now we'll bring the icon to the center so for that we'll just set the display to grid and then we'll just type place.
Items and we'll just set it to center right now let's set the bottom position to 60 pixels and we'll also add a border around this element.
So let's type border and we'll set the border to 10 pixels solid white right now let's add some javascript to move this circle around when we click on.
Any of these menu items now we need to reference two things from our html into the javascript so if we go back to the html we need to reference these menu items and also the menu item selected.
Division so let's go to our main.js file and let's create a constant and let's type menu item selected and let's tab document.queryselector.
And here we'll just type menu bar container and menu item selected and the next things we need to reference are the menu items so let's type const.
Menu items and document dot query selector and here we need to type query selector all because we need to have multiple items and here i'll just add menu bar.
Container menu item now the next thing we need to do is we need to add event listeners to each of these menu items so that when we click on this menu items we need to move this circle to that.
Position now since we have multiple items inside this menu items constant we have to loop through all these menu items and then add event listeners to all of.
Them so let's use a for each loop for that so i'll just type menu items dot 4 each and here we can create a variable to reference each of the menu items so for that i'll just create a.
Variable with the name of i you can name this variable anything you want and let's create an arrow function over here and now you need to type i dot add event listener and we will listen for.
The click event and let's create an arrow function over here now we need to do two things over here we need to set the position of this circle based on the menu item and then.