사용자 지정 오른쪽 클릭 메뉴를 만드는 방법
17263 단어 cssjavascriptbeginnershtml
컨텍스트 메뉴란?
상황에 맞는 메뉴(상황에 맞는 메뉴, 바로 가기 메뉴 또는 팝업 메뉴라고도 함)는 마우스 오른쪽 버튼을 클릭할 때 나타나는 메뉴로, 해당 메뉴에서 사용할 수 있거나 해당 컨텍스트에서 사용할 수 있는 모든 옵션 집합을 제공합니다. 클릭한 사용 가능한 옵션은 일반적으로 선택한 개체와 관련된 작업입니다.
경우에 따라 상황에 맞는 메뉴에 더 많은 옵션이나 기능이 있기를 원하지만 기본 상황에 맞는 메뉴를 수정할 수는 없습니다. 따라서 사용자 정의 메뉴를 만들어야 합니다. 당사 웹사이트 또는 웹페이지에 사용자 정의 상황에 맞는 메뉴를 추가하면 상황에 맞게 사용자 정의되고 관련성이 높아 보이고 원하는 기능을 자유롭게 추가할 수 있습니다.
일반적인 쿼리
안녕하세요, 여러분 이 튜토리얼에서 우리는 위에서 언급한 쿼리를 해결하려고 노력할 것입니다. 또한 HTML CSS 및 JavaScript를 사용하여 멋진 사용자 지정 오른쪽 클릭 메뉴(컨텍스트 메뉴)를 만드는 방법을 배웁니다.
먼저 index.html 및 style.css 파일 3개를 만든 다음 코드를 작성해야 합니다.
1 단계
index.html 내부에 아래 코드 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Custom Right Click Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="contextMenu" class="context-menu" style="display: none">
<ul class="menu">
<li class="share"><a href="#"><i class="fa fa-share" aria-hidden="true"></i> Share</a></li>
<li class="rename"><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i> Rename</a></li>
<li class="link"><a href="#"><i class="fa fa-link" aria-hidden="true"></i> Copy Link Address</a></li>
<li class="copy"><a href="#"><i class="fa fa-copy" aria-hidden="true"></i> Copy to</a></li>
<li class="paste"><a href="#"><i class="fa fa-paste" aria-hidden="true"></i> Move to</a></li>
<li class="download"><a href="#"><i class="fa fa-download" aria-hidden="true"></i> Download</a></li>
<li class="trash"><a href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
</ul>
</div>
<script>
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu")
.style.display = "none"
}
function rightClick(e) {
e.preventDefault();
if (document.getElementById("contextMenu") .style.display == "block"){
hideMenu();
}else{
var menu = document.getElementById("contextMenu")
menu.style.display = 'block';
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
}
}
</script>
</body>
</html>
2 단계
그런 다음 아래 화면에서 내가 제공하는 코드인 style.css에 대한 코드를 추가해야 합니다.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
width: 100vw;
height: 100vh;
background: #f2f4f6;
overflow: hidden;
}
ul {
list-style: none;
}
.context-menu {
position: absolute;
}
.menu {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
padding: 10px 0;
}
.menu > li > a {
font: inherit;
border: 0;
padding: 10px 30px 10px 15px;
width: 100%;
display: flex;
align-items: center;
position: relative;
text-decoration: unset;
color: #000;
font-weight: 500;
transition: 0.5s linear;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-ms-transition: 0.5s linear;
-o-transition: 0.5s linear;
}
.menu > li > a:hover {
background:#f1f3f7;
color: #4b00ff;
}
.menu > li > a > i {
padding-right: 10px;
}
.menu > li.trash > a:hover {
color: red;
}
이 페이지를 마우스 오른쪽 버튼으로 클릭하면 사용자 지정 메뉴가 나타납니다.
사용자 지정 오른쪽 클릭 메뉴 비디오 출력:
사용자 지정 오른쪽 클릭 메뉴 Codepen 출력:
Reference
이 문제에 관하여(사용자 지정 오른쪽 클릭 메뉴를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/stackfindover/how-to-create-a-custom-right-click-menu-54h2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
