Header & Footer, Unique Menu

Click to Show Context menu in Html and css

In this post, we will create a click to show a context menu. In the last post, we created a Card hover effect in CSS. But at this moment our main focus is to create a click to show the context menu in Html and CSS.

Click to Show Context menu:

As you can see in the image we have created a click to show a context menu. context menu in Html and CSS. This means all the UI is in white color with icons of that specific thing. We have created a button with an icon of the plus symbol.

You might like it:

These three icons the part of the menu. When you hover over it then they show the hover effect. We have created a hover effect for these icons using CSS. All of this UI has a white background. We have created it using Html and CSS without using a single line of javascript. If you want to create it then follow us for creating it.

How do you a create click to show a context menu?

For creating the context menu we will use three basic steps for its completion. First, we will download a code editor. Then we will write the code of HTML and then we will write the code of CSS. In this way, by following these steps we will be able to create this design.

Download a code editor to click to show context menu :

First, we need to install a code editor in our system and it will help us to write the code for HTML and CSS. You can use any code editor which is easy to use for you.

Source code of Html:

It is a markup language and use to create the content but in this, we will only create a div using Html and then we will design this div by importing the icons.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Neumorphism context menu | FantacyDesigns</title>
  </head>
  <body>

<div class="menu" onclick="this.classList.toggle('open')">
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Neumorphism context menu | FantacyDesigns</title>

</head>

<body>

</div>

</body>

</html>

Source code of CSS:

It is also a markup language and we will use it to design our menu with the help of it. We will also import the icons with the help of CSS. For creating a beautiful design and hover effect we will also use CSS and it is available with the code below.

html {
  background: #e8e8f3;
  height: 100vh;
  display: grid;
  place-content: center;
  -webkit-tap-highlight-color: transparent;
}

.menu {
  position: relative;
  top: 40px;
  padding: 30px;
  background: #e8e8f3;
  border-radius: 100%;
  cursor: pointer;
  box-shadow: 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset 

0px 0px 4px rgba(255, 255, 255, 0.2), inset 7px 7px 15px rgba(55, 84, 170, 0), 

inset -7px -7px 20px rgba(255, 255, 255, 0), 0px 0px 4px rgba(255, 255, 255, 

0);
}
.menu::before, .menu::after {
  content: "";
  background: #c3c2c7;
  border-radius: 5px;
  width: 30px;
  height: 5px;
  position: absolute;
  left: 16px;
  top: 27px;
  transition: 0.2s ease;
  z-index: 1;
}
.menu::before {
  transform: rotate(0deg);
}
.menu::after {
  transform: rotate(-90deg);
}
.menu.open {
  opacity: 0.9;
}
.menu.open::before {
  transform: rotate(45deg);
}
.menu.open::after {
  transform: rotate(-45deg);
}
.menu.open .button {
  opacity: 1;
  pointer-events: auto;
}
.menu.open .button:first-of-type {
  bottom: 40px;
  right: 70px;
  background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% 

#e8e8f3;
}
.menu.open .button:nth-of-type(2) {
  bottom: 80px;
  background: url("https://bassets.github.io/img.svg") no-repeat 50%/50% 

#e8e8f3;
  transition-delay: 0.05s;
}
.menu.open .button:last-of-type {
  bottom: 40px;
  right: -70px;
  background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 

45% #e8e8f3;
  transition-delay: 0.1s;
}

.button {
  padding: 30px;
  border-radius: 50%;
  cursor: pointer;
  background: #e8e8f3;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: inherit;
  transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 

0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.button:hover {
  transform: scale(1.1);
}

html {

background: #e8e8f3;

height: 100vh;

display: grid;

place-content: center;

-webkit-tap-highlight-color: transparent;

}

.menu {

position: relative;

top: 40px;

padding: 30px;

background: #e8e8f3;

border-radius: 100%;

cursor: pointer;

box-shadow: 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset

0px 0px 4px rgba(255, 255, 255, 0.2), inset 7px 7px 15px rgba(55, 84, 170, 0),

inset -7px -7px 20px rgba(255, 255, 255, 0), 0px 0px 4px rgba(255, 255, 255,

0);

}

.menu::before, .menu::after {

content: "";

background: #c3c2c7;

border-radius: 5px;

width: 30px;

height: 5px;

position: absolute;

left: 16px;

top: 27px;

transition: 0.2s ease;

z-index: 1;

}

.menu::before {

transform: rotate(0deg);

}

.menu::after {

transform: rotate(-90deg);

}

.menu.open {

opacity: 0.9;

}

.menu.open::before {

transform: rotate(45deg);

}

.menu.open::after {

transform: rotate(-45deg);

}

.menu.open .button {

opacity: 1;

pointer-events: auto;

}

.menu.open .button:first-of-type {

bottom: 40px;

right: 70px;

background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50%

#e8e8f3;

}

.menu.open .button:nth-of-type(2) {

bottom: 80px;

background: url("https://bassets.github.io/img.svg") no-repeat 50%/50%

#e8e8f3;

transition-delay: 0.05s;

}

.menu.open .button:last-of-type {

bottom: 40px;

right: -70px;

background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50%

45% #e8e8f3;

transition-delay: 0.1s;

}

.button {

padding: 30px;

border-radius: 50%;

cursor: pointer;

background: #e8e8f3;

position: absolute;

bottom: 0;

right: 0;

opacity: 0;

pointer-events: none;

box-shadow: inherit;

transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity,

0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;

}

.button:hover {

transform: scale(1.1);

}

Download source code:

Source code is very helpful for all those who are learning HTML, CSS, and javascript. For creating any project we need to connect all the files of Html, CSS, and javascript. The Code link is given below and you can download the source code of this project from the below button.

Task:

Now you should be able to create this type of menu. It’s time to modify the click to show the menu. It has a simple button and after clicking on this button it opens 3 further buttons. The number of buttons needs to be increased. Change the number of buttons from three to six. Also, align in a circle around the round button. Then change the icons of every button.

I hope you like this neomorphic context menu and its design. If you want to recommend it or have any suggestions then you comment below.

Thanks for reading it.

Go to top

Download Source CodeClick to Download