다단계 디렉터리_javascript 기술을 사용하여 완전히 사용자 정의된 웹 페이지 오른쪽 클릭 메뉴의 Node.js 구현

이 기사의 예에서는 다중 레벨 디렉토리가 있는 완전히 사용자 정의된 웹 페이지 마우스 오른쪽 버튼 클릭 메뉴를 구현하는 js 메소드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이 코드는 웹페이지에서 마우스 오른쪽 버튼 클릭 메뉴를 제어할 수 있으며 원하는 대로 완벽하게 구축되었으며 다중 레벨 디렉토리를 표시할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

JS 자체 정의义网页多级导航菜单 html,body{높이:100%;오버플로:숨김;} body,div,ul,li{margin:0;padding:0;} 본문{글꼴:12px/1.5 5fae8f6f96c59ed1;} ul{목록 스타일 유형:없음;} #오른쪽메뉴{위치:절대;상단:-9999px;왼쪽:-9999px;} #rightMenu ul{float:left;border:1px solid #979797;배경:#f1f1f1 url(images/line.png) 24px 0 Repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0, 0,.6);} #rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;} #rightMenu ul li.sub{배경-반복:no-repeat;배경-위치:오른쪽 9px;배경-이미지:url(images/arrow.png);} #rightMenu ul li.active{배경 색상:#f1f3f6;테두리 반경:3px;테두리:1px 솔리드 #aecff7;높이:22px;라인 높이:22px;배경 위치:오른쪽 -8px;패딩:0 29px; } #rightMenu ul ul{display:none;position:absolute;} var getOffset = { 상단: 함수(obj) { return obj.offsetTop (obj.offsetParent ?args.callee(obj.offsetParent) : 0) }, 왼쪽: 함수(obj) { return obj.offsetLeft (obj.offsetParent ?args.callee(obj.offsetParent) : 0) } }; window.onload = 함수() { var oMenu = document.getElementById("rightMenu"); var aUl = oMenu.getElementsByTagName("ul"); var aLi = oMenu.getElementsByTagName("li"); var showTimer = hideTimer = null; var i = 0; var maxWidth = maxHeight = 0; var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight]; oMenu.style.display = "없음"; for (i = 0; i { //为含有子菜单的li加上箭头 aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub"); //鼠标移入 aLi[i].onmouseover = 함수() { var oThis = 이것; var oUl = oThis.getElementsByTagName("ul"); //鼠标移入样式 oThis.className = " 활성"; //显示子菜单 if (oUl[0]) { clearTimeout(hideTimer); showTimer = setTimeout(함수 () { for (i = 0; i { oThis.parentNode.children[i].getElementsByTagName("ul")[0] && (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none"); } oUl[0].style.display = "차단"; oUl[0].style.top = oThis.offsetTop "px"; oUl[0].style.left = oThis.offsetWidth "px"; setWidth(oUl[0]); //最大显示范围 maxWidth = aDoc[0] - oUl[0].offsetWidth; maxHeight = aDoc[1] - oUl[0].offsetHeight; //防止溢출 최대 너비 최대 높이 },300); } }; //鼠标移출 aLi[i].onmouseout = 함수() { var oThis = 이것; var oUl = oThis.getElementsByTagName("ul"); //鼠标移样式 oThis.className = oThis.className.replace(/s?active/,""); ClearTimeout(showTimer); hideTimer = setTimeout(함수 () { for (i = 0; i { oThis.parentNode.children[i].getElementsByTagName("ul")[0] && (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none"); } },300); }; } //자체설정右键菜单 document.oncontextmenu = 함수(이벤트) { var 이벤트 = 이벤트 || window.event; oMenu.style.display = "차단"; oMenu.style.top = event.clientY "px"; oMenu.style.left = event.clientX "px"; setWidth(aUl[0]); //最大显示范围 maxWidth = aDoc[0] - oMenu.offsetWidth; maxHeight = aDoc[1] - oMenu.offsetHeight; //防止菜单溢출 oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight "px"); oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth "px"); false를 반환합니다. }; //点击隐藏菜单 document.onclick = 함수() { oMenu.style.display = "없음" }; //取li中最大的宽titude, 并赋给同级所有li 함수 setWidth(obj) { 최대 너비 = 0; for (i = 0; i { var oLi = obj.children[i]; var iWidth = oLi.clientWidth -parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getCompulatedStyle(oLi,null)["paddingLeft"]) * 2 if (iWidth > maxWidth) maxWidth = iWidth; } for (i = 0; i } };

마우스 오른쪽 버튼 클릭 메뉴를 사용자 정의하려면 페이지를 마우스 오른쪽 버튼으로 클릭하여 효과를 확인하세요. JavaScript 학습 스크립트하우스 웹 특수효과 원리 분석 사용자 작업에 대한 응답 프롬프트 상자 효과 이벤트 중심 요소 속성 작업 www.jb51.net 웹페이지 배경색 변경 함수 매개변수 재사용성이 높은 함수 작성 126개의 편지함을 모두 선택했을 때의 효과 루핑 및 순회 작업 제3과 자바스크립트 구성 ECMA스크립트 DOM BOM JavaScript 호환성 소스 자바스크립트의 위치와 장점, 단점 변수, 유형, 유형, 데이터 유형 변환, 변수 범위 폐쇄 클로저란 무엇입니까 간단한 신청 폐쇄의 단점 연산자 프로그램 흐름 제어 타이머 사용법 setInterval setTimeout

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

다단계 디렉터리_javascript 기술을 사용하여 완전히 사용자 정의된 웹 페이지 오른쪽 클릭 메뉴의 Node.js 구현