Add files via upload

CodeWithNiranjan · web-flow · commit 866edb30041e · 2022-01-11T11:05:36.000+05:30
diff --git a/app.js b/app.js
@@ -0,0 +1,11 @@
+window.addEventListener("contextmenu",function(event){
+  event.preventDefault();
+  var contextElement = document.getElementById("context-menu");
+  contextElement.style.top = event.offsetY + "px";
+  contextElement.style.left = event.offsetX + "px";
+  contextElement.classList.add("active");
+});
+
+window.addEventListener("click",function(){
+  document.getElementById("context-menu").classList.remove("active");
+});
diff --git a/bg.jfif b/bg.jfif
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
+    <title>Custom context menu</title>
+</head>
+<body>
+    <div id="context-menu">
+        <div class="item arrow-right"><i class="uil uil-eye"></i>View<i class="uil uil-angle-right"></i></div>
+        <div class="item arrow-right"><i class="uil uil-filter"></i>Sort By<i class="uil uil-angle-right"></i></div>
+        <div class="divider"></div>
+        <div class="item"><i class="uil uil-redo"></i>Refresh</div>
+        <div class="item"><i class="uil uil-share"></i>Share</div>
+        <div class="divider"></div>
+        <div class="item"><i class="uil uil-trash"></i>Delete</div>
+        <div class="item"><i class="uil uil-setting"></i>Settings</div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
+body{
+    margin: 0;
+    background: url(bg.jfif);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    font-family: 'Inter', sans-serif;
+}
+
+#context-menu{
+    position: fixed;
+    z-index: 999999;
+    width: 200px;
+    background: #fff;
+    border-radius: 5px;
+    transform: scale(0);
+    transform-origin: top left;
+    box-shadow: 0px 5px 15px 0px rgb(0, 0, 0, .24);
+}
+
+#context-menu.active{
+    transform: scale(1);
+    animation:pop .3s cubic-bezier(0,1,.5,1.08);
+}
+
+@keyframes pop{
+    0%{
+        transform: scale(0.9);
+    }
+    100%{
+        transform: scale(1);
+    }
+}
+
+#context-menu .item{
+    padding: 10px 10px;
+    font-size: 15px;
+    cursor: pointer;
+}
+
+
+#context-menu .item::selection{
+    background: none;
+}
+
+#context-menu .item:hover{
+    background: #f2f2f2;
+}
+
+#context-menu .item:nth-child(1){
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+#context-menu .item:nth-last-child(1){
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#context-menu .item:active{
+    background: #dddddd;
+}
+
+#context-menu .item i{
+    display: inline-block;
+    margin-right: 5px;
+}
+
+.arrow-right .uil-angle-right{
+    float: right;
+}
+
+.divider{
+    margin: 2px 0px;
+    border-bottom: 1px solid #ccc;
+}
