티스토리 뷰

IT tech Coding/jquery

[jquery] 웹에서 특정 버튼이나 문구 등 마우스 오른쪽 버튼 누를때 메뉴보이게 만들기

Coding Life 2023. 3. 2. 11:22
반응형

우리가 웹사이트에서 특정 버튼이나 문구 등에 마우스 오른쪽을 누르면 어떤 메뉴를 구현하고 싶을때 유용한 정보입니다.

활용방법은 너무 다양하겠지요.

오른쪽 버튼을 누르면 메뉴가 뜨게 만들어서 뭔가 연관된 일을 처리할때...

웹상에서 어떻게 구현할지 고민이라면 이 코드가 필요할거에요~

이 코드로 구현이 가능한데, 디자인은 좀 신경써야 좋겠어요~

결과물은 위와 같이 되는거죠~

<!DOCTYPE html>
<html>
<head>
    <title>Right-Click Menu Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #menu {
            position: absolute;
            display: none;
            background-color: #eee;
            border: 1px solid #999;
            padding: 5px;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">메뉴 항목 1</a></li>
            <li><a href="#">메뉴 항목 2</a></li>
            <li><a href="#">메뉴 항목 3</a></li>
        </ul>
    </div>
    <button id="btn">오른쪽 버튼으로 메뉴 보기</button>
    <script>
        $(document).ready(function() {
            // 오른쪽 버튼 클릭 시, 메뉴 보이기
            $('#btn').on('contextmenu', function(e) {
                e.preventDefault();
                $('#menu').css({
                    display: 'block',
                    left: e.pageX,
                    top: e.pageY
                });
            });

            // 메뉴에서 다른 곳을 클릭하면 메뉴 숨기기
            $(document).on('click', function() {
                $('#menu').hide();
            });
        });
    </script>
</body>
</html>

 

메뉴 이외의 다른 곳을 누르면 메뉴가 사라지는 것까지 구현된 상태입니다.

제이쿼리로 비교적 간단히 만들 수 있다는 것을 기억해 주세요~

반응형
저작자표시 비영리 변경금지

'IT tech Coding > jquery' 카테고리의 다른 글

jquery ajax 중복호출 벗어나자, 진짜 이것때문에 개고생함  (5) 2023.03.24
[jquery] 아이템을 상하 조정하고 싶을때 사용하면 되는 방법  (0) 2023.03.02
[jQuery] 자주 만나는 에러 Uncaught TypeError: Cannot read properties of undefined (reading 'mode') 에러 잡기  (0) 2023.02.16
jquery 선택값에 따라 button 안보이게 하는 방법  (0) 2022.12.12
제이쿼리 리피터(repeater) 사용시 이벤트 등 뭔가 추가하고 싶을때 잘안되는 경우 이렇게 한번 해보시면 어떨런지요.  (0) 2022.12.05
댓글