And now if you click on this close button the animation reverses and we have the reverse animation for all the items so this is what we're going to design in.
This tutorial series now in this first video we will just create the design using HTML and CSS and in the next video I'll show you how to create the animation so let's get started.
right here I have created this folder called full screen menu and I just opened it with vs code now let's create.
The necessary files so let's click on new file and let's create an HTML file I just name it index.html and we also need to have a CSS file let's name it style.css.
Will have this basic HTML5 code all right let's link our CSS file over here and I'll just type style.css in the sref and here I'll just link the JavaScript.
File so let's create a script tag and in the srcls tap main.js right now let's start with the markup of our design well the first thing we will Design is.
This menu button right here so let's create a division with the class of menu icon container and in that for the menu icon let's create a division of the class of menu.
Icon and in that we will have the actual image so for that we will use heroicons.com so here I'm in heroicons.com and let's.
Search for menu and here we have these icons let's choose this one right here so let's click on copy SVG and let's paste the icon over here.
Posts Related:
Right now let's write the markup of
The menu items so we need to have this logo and this close icon and then we need to have these menu items so.Let's go outside this menu icon container division and let's create a division of the class of menu container and in that we will have this whole menu.
So the first thing we need to have is a division for this logo and this close icon so let's create a division of the class of top.
And in that we will have this logo and this close icon now for the logo let's create a division with class of logo and here I'll just type lb Dot and then for the close icon let's create.
A division of the class of close icon and in that we will have the close icon so let's go back to here icons.com and let's just search for close and here we have this icon right here so let's.
Copy the SVG and let's paste it over here now the next thing we need to have are these menu items so for that let's create a division.
So let's go outside the top division and let's create a division of the class of menu items and I'll just enclose all of this inside one more division so that we have the fixed width for these.
Elements so here I'll just create a division of the class of content and I'll just add the top and the menu items division inside this content.
Division right now in this menu items division we need to have these menu items so let's create anchor tags for that and here you can add the link of your.
Pages I'll just add a hash for now and
The first one is home so let's start home and I'll just duplicate this three more times and then we have about courses and.Contact all right I think that's it with the HTML so let's open this in our browser and let's see how it looks so I have this extension called live server.
Installed in vs code so once you have this extension installed you can just right click over here in the HTML and click on open with live server.
And now here we can see that our design is displayed in the browser right now let's start styling this so let's go to our style.css file and first of all let's target the menu icon.
Container so here we have this division of the class of menu icon container and in that we have this menu icon so let's type menu icon container.
And let's set the width of this menu icon container to 100 and if I'll just add a background color here we can see this is how it looks right now right now let's decrease the.
Height of this icon so here we can see we have this SVG inside the menu icon container so here I'll just type menu icon container.
SVG and let's set the height of the SVG to 40 pixels and this is how it looks we need to bring this icon to the right side so.
Let's target this menu icon container and we'll set the display to flex and we'll set the justify content to flex end and now we can see that the icon is on.
The right side and we'll also set the position to fixed so that it will always be in the top position and will also say the top to zero.
And the Left To Zero and let's also add some padding so let's set the padding to 30 pixels top and bottom and 60 pixels left and right.
And now we can see that the icon is not being displayed because the height and the width is also increased because of this padding so for that you have to type box sizing and set it to border box.
Now we can see that the icon is displayed over here let's also set the cursor to pointer so let's stop cursor pointer and now if you hover this we can see.
That the cursor changes to pointer right now let's delete this background color right that's it with the menu icon now let's time the other elements so if you.
Go back to the index.html file here we can see we have this division with the class of menu container so let's style that so here I'll just type menu container.
And the first thing we will do is we'll set the position to fixed and we'll set the background color to Yellow and now we need to set the left top.
Bottom and right to zero so that it covers the whole screen so you can just type top 0 left 0 right 0 and bottom zero.
And now we can see it has the full height and width but you can also delete all of this and just tap inset and set it to zero this will also do the same thing.
All right now let's style this logo right here so the logo is inside a division of the class of logo so let's type menu container logo.
And let's say the font size of the logo to 30 pixels and we will set the phone to weight to 900. and let's see the color of the text to.
D62828 right now let's change the font so I'll just Target menu container and here I'll just have font family and we'll just set it to Roboto sensitive.
Right now let's target this icon so the icon is inside this division of the class of close icon and in that we have this SVG so let's type menu container close icon.
SVG and let's see the height of this icon to 40 pixels and we'll also set the cursor to pointer right now we want to have this icon and.
This logo side by side so let's target the container division so the container division is top so in that we have the logo and the icon so let's type menu container.
Top and let's set the display to flex and we'll also align items to the center right now we want to have this logo on the left and the icon on this right side so for the other tab justify content and.
Set it to space between right now we need to add some padding so let's go back to our HTML file and here we can see we have this container division called content.
So let's add the padding to the content so here I'll just type menu container content and let's set the padding to 30 pixels.
Top and bottom and 60 pixels left and right now let's style these menu items so the menu items are inside this division with the class of menu items and if you go.
Back to the design here we can see that the menu items are one next to the other but we want all of them to be one below the other so let's target the menu items here I'll.
