We can see we have this division and if i right click over here we have this custom right click menu or context menu and if i right click somewhere else we can see that we have the default.
Right-click menu of the browser but if i right-click somewhere inside this division we have this custom right-click menu so let's get started .
Right here i have created this folder called custom right click and i just opened it with vs code now let's start by creating the necessary files so first of all let's create an html file so.
Let's click on new file and i'll just name it index.html and then we need to have a css file so let's click on new file and i'll start style.css.
And we also need to have a javascript file so let's create a new file and i'll just name it main.js all right let's start with the index.html file now in vs code you have.
The hr file just type style.css and here in the body i'll just link the javascript file so here i'll just type script colon src and press tab and in the src i'll just type main.js.
Right now let's start with the html now first of all let's create a division and i'll just give it a class of card and in that i'll just type testing and now let's open this in our browser.
So i have this extension called live server installed in vs code so just search for live server over here and just install that and 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 that the design is being displayed over here in the browser right now let's write the html for the.
Context menu so if you right click over here we can see that we have these options so let's write the html for this now for this we'll create a division with the.
Class of custom context menu Wesdigital
Now for all these options we'll create a ul and in that we'll have list items and in the list items we will have anchor tags.And in that we will have the option so i'll just type download and i'll just copy this list item from here and paste it down here i'll just paste.
It two more times and the next option we have is edit so i'll just type edit over here and then we have duplicate and lastly we have more info.
Now let's go back to our design and here we can see we have these menu items all right now let's style this using css now we have already linked our css file over here so let's go to our style.css file.
And first of all we'll just tile the card so i'll just type dot card over here and for this we will have a height of 200 pixels.
And also a width of 200 pixels and we will give it a background color of e63946 and we'll also have rounded corners so.
I'll just have border radius and i'll just set it to 20 pixels and i'll just bring this text to the center so for that i'll just set the display to flex and align items to the.
Center and justify content to the center and i'll also set the font family to roboto sans serif and i'll say the text color to white.
And also the font size to 20 pixels right now let's style the custom context menu so here we can see we have this division of the class of custom context menu.
So let's target that so here let's type
Custom context menu and i'll just set the width to 200 pixels and now let's style the anchor tags so.I'll just type custom context menu ullia and the first thing we will do is we will remove these underlines so for that we'll just type text decoration and we'll set it to none.
And we'll set the font family to roboto now let's add some padding so i'll just start padding and i will set the padding to 20 pixels top and bottom and 32 pixels left and right.
Now the padding top and bottom are not working because anchor tags are inline element by default so we'll set the display to inline block and now we can see that the padding is.
Applied now we'll also set the font size to 16 pixels and we will set the font weight to bold.
And let's set the color of the text to dark gray now we'll set a border bottom for these anchor tags so let's type border bottom and we'll set it to 1 pixel solid and.
We'll set the color to rgb a 0 0 0 and 0.1 so this last value over here is the opacity so here we can see we have these borders for the anchor tags now here we.
Can see that we don't have full width for each of these anchor tags so if we just add a background color we can see that we don't have full width so let's set the width to 100 percent.
Now the anchor tags have a lot of width than the width of the context menu that we set over here 200 pixels now that's because we have added this padding over here so if i just remove this padding we.
Have the correct width but since we added the padding we have a lot of width because the padding is also added to the width now to stop this from happening you can just type box sizing.
And set it to border box and now we can see we have the correct width now let's remove this background color from here right now let's add a hover effect for.
These anchor tags so for that let's type custom context menu uli a column hover and we will add a background color of f 1 f a e e and now if you hover over this we can.
See that we have this background color and we'll also add a smooth transition so let's type transition and we'll set all to 400 milliseconds is and now we can see we have this.
Background color we'll also add a border on the left when we hover over these elements so let's type border left.
And we'll set it to 4 pixels solid and i'll just type red over here and now we can see we have this red border when we hover over this but we can see that it is changing.
Positions when we hover over these elements so for that let's add the border to the normal state as well so here i'll just type border.
Left 4 pixels solid and here i'll just set the color to transparent and now if you hover over this we can see that everything works all right now let's remove these bullets from here.
And we'll also remove the margin and padding inside the ul so let's type custom context menu ul and we'll set the list style to none.
And we'll also remove the margin and padding now for the context menu we'll also add a box shadow so let's scroll up and here i'll just type box shadow and we'll set.
The values to 0 4 pixels 8 pixels negative 2 pixels rgba 0 0 0 and 0.3 right now the last thing we need to do is we don't want to display this context.
Menu by default so here i'll just set the opacity to 0 and now we can see that the context menu is not being displayed but we can still click on the links over here.
So if you hover over this we can see that we have the option to click the links so here i'll also set the pointer events to none and now if you hover over this area we.
Can see that we cannot click on the links and now we're going to add a class called active and you can name this class anything you want now when we add.
That class we will set the opacity back to 1 and the pointer events back to auto so let's type that over here so i'll just type custom context menu dot active.
And i'll just set the opacity back to 1 and also the pointer events to auto and for smooth transition i'll also type transition and i'll just set it to all 500 milliseconds is.
Now we need to add couple more lines of css code but before that let's go ahead and add some javascript and add this class active when we right click over here on this element.
So for that first of all we need to access the elements in our javascript so if we go back to our html we can see that we have this division with the class of card and we also have this.
Division of the class of custom context menu so these are the two things we need to reference in our javascript so let's go to a javascript file and let's type const.
Card and i'll just set it to document dot query selector and i'll just set it to dot card and then we'll create a constant for the custom context menu so i'll just type.