1. 개요
팝업 플로팅 메뉴를 사용하면 웹 사이트의 탐색 컨텐츠가 더 명확해질뿐만 아니라 페이지의 전반적인 효과에도 영향을 미치지 않습니다. 마우스가 첫 번째 레벨 탐색 메뉴의 제목으로 이동하면 그림 1과 같이이 예제를 실행하면 플로팅 메뉴가 팝업되어 메뉴에 해당하는 하위 메뉴가 표시됩니다. 마우스가 나오면 떠 다니는 메뉴가 숨겨집니다.
2. 기술 포인트
이 예제는 주로 JavaScript로되어 있으며 <div> 태그 개체의 스타일 속성의 디스플레이 속성 값을 동적으로 변경하여 보조 탐색 메뉴를 동적으로 표시하고 숨 깁니다. 실제로 각 레벨 메뉴의 보조 메뉴의 내용은 웹 페이지의 <div> 태그에 추가되었지만 현재 <div>는 설정되어 표시되지 않습니다. 따라서 JavaScript에서 마우스가 내비게이션 제목을 통과하면 지정된 <Div> 객체를 호출하고 디스플레이 속성을 동적으로 수정하면됩니다. 디스플레이 속성에는 디스플레이 및 숨겨진 두 가지 속성 값, 즉 없음 (숨겨진) 및 블록 (디스플레이)이 포함됩니다.
예를 들어, 웹 페이지에 MyDiv의 ID가있는 <div> 태그가 있으며이 <div>는 숨기도록 설정됩니다. JavaScript 에서이 <div>의 표시를 제어하는 작문 방법은 다음과 같습니다.
document.getElementById ( "mydiv"). Style.display = "block";
3. 특정 구현
(1) 디스플레이 및 숨은 자바 스크립트 방법을 작성하십시오. 보조 메뉴는 마우스가 기본 메뉴 제목을 통과 할 때 표시되며 마우스가 움직일 때 보조 메뉴가 숨겨집니다. 키 코드는 다음과 같습니다.
함수 변경 (img, submenu, path, type) {img.src = "images/"+path+". gif"; if (submenu! = null) {if (type == 0) {submenu.style.display = "none";} else {submenu.style.display = "block";(2) 페이지에서 보조 메뉴의 내용을 <div> 태그의 각 기본 내비게이션 메뉴에 미리 추가하고 보조 메뉴의 <div> 태그를 숨길 수 있습니다. 키 코드는 다음과 같습니다.
<div id = "nuser"style = "back 정보 </a> <a href = "#"> 신입 사원 추가 </a> </td> </tr> </table> </div> ... // 다른 2 차 메뉴의 내용은 여기에서 생략됩니다.
(3) 기본 메뉴 표에서 onMouseOver 및 OnMouseOut 이벤트를 설정하고 (1)에 정의 된 JavaScript Change () 메소드를 호출하고 2 차 메뉴 <Div>의 디스플레이를 동적으로 변경하십시오. 키 코드는 다음과 같습니다.
<td onMouseOver = "change (imguser, nuser, 'nuser_r', 1)"onmouseout = "change (imguser, nuser, 'nuser_b', 0)"style = "cursor : hand;"> <img id = "imguser"src = "images/nuser_b.gif"> ... // code of code of Code of Code of Code of Code of Code. 생략 </td>
위는 편집자가 소개 한 내비게이션 바의 팝업 플로팅 메뉴입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!