강조 가능한 보조 버퍼 접기 menu_navigation 메뉴와 완벽하게 호환되는 Node.js

백엔드 또는 OA 시스템에서 가장 일반적으로 사용되는 레이아웃은 전체 화면 레이아웃인 경우가 많습니다. 일반적으로 상단, 중간, 하단에 3개의 행과 2개의 열이 있고 머리글, 바닥글, 왼쪽 메뉴 및 ifame 프레임 페이지가 있는 레이아웃입니다. 권리. 따라서 폴더블 보조 메뉴가 자주 사용됩니다. 이 예는 이러한 보다 일반적인 완전 호환 및 강조 표시 가능한 보조 버퍼 접기 메뉴를 구현하는 것입니다.

기능:

완벽하게 호환되며 브라우저 테스트: IE5.5, IE6, IE7, IE8, FF3.0, Google, Safari 4.0, Opera9.0.
Html 구조는 우아하고 간결하며 중복된 태그가 없어 프로그램 루프 출력에 도움이 됩니다.
스타일과 구조가 분리되어 있으며 스타일 시트에서 다양한 스타일을 수정할 수 있습니다.
현재 선택된 항목이 강조 표시되며, 1차 메뉴와 2차 메뉴 모두 강조 표시가 가능합니다.
축소 레이어는 애니메이션으로 우아하게 버퍼링됩니다.
백엔드 및 일부 OA 시스템 인터페이스에 가장 적합합니다.

단점:

새로 고침 방지 기능을 지원하지 않습니다. 이 기능은 백그라운드 응용 프로그램 시스템에서 많이 사용되어서는 안 되므로 이 기능은 추가하지 않았습니다.
IE6에서는 버퍼링 효과가 나타나지 않습니다. IE6의 경우 효과가 약해집니다.
먼저 효과의 스크린샷을 살펴보겠습니다.

이러한 메뉴를 만들 때 발생하는 몇 가지 간단한 아이디어와 문제점에 대해 간략하게 이야기해 보겠습니다.

일반적으로 저는 효과를 만듭니다. 제 제작 과정은 대개 먼저 HTML 구조 레이어의 내용을 그린 다음 스타일을 작성한 다음 JS 특수 효과와 같은 케이크 효과에 장식을 추가하는 것입니다. 곧. 전문가들이 어떤 프로세스 모델을 가지고 있는지 모르겠습니다.

구조적 레이어:

구조적 레이어의 아이디어는 일반적으로 지각적 이해를 기반으로 하며 일반적으로 가장 간결한 HTML을 기반으로 하는 렌더링이 있습니다. 구조. 위 그림에서 볼 수 있듯이 UL의 unordered list를 사용하면 가장 먼저 눈에 띄는 느낌이 들지만... 이것은 2단계 중첩 목록입니다. 이것이 우리가 먼저 고려해야 할 문제입니다.

구조는 다음과 같습니다.

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

1차 메뉴 항목

• 보조 메뉴 항목

보조 메뉴가 있는 경우 보조 메뉴가 없는 경우 중첩된 UL 구조는 다음과 같습니다.

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

• 1단계 메뉴 항목
>< ;/ul>


물론 실제 상황에 따라 dl-dt-dd 순서 목록 방법을 사용하여 이 중첩 구조를 만들 수도 있습니다.
내 접근 방식은 세 가지 클래스 이름만 사용하여 모든 스타일 표시를 제어하는 ​​것입니다. 하나는 class="menu"로 정의된 최상위 UL이고, 다른 하나는 두 번째 수준 메뉴의 컨테이너입니다. 즉, 중첩된 UL은 class="level2"를 정의하며, 마지막으로 첫 번째 수준 메뉴 항목입니다. li은 class="level1" 을 정의합니다. 이 세 가지 후크를 사용하면 전체 구조의 스타일을 조작할 수 있습니다.

프레젠테이션 레이어:

스타일 시트의 설정은 매우 간단합니다. 주의할 점은 JS가 보조 메뉴의 표시 및 숨기기를 제어하고 기록하는 것을 용이하게 한다는 것입니다. 현재 선택된 항목의 상태를 강조 표시하므로 마우스의 슬라이딩 인 및 아웃 효과를 구현하기 위해 hover 의사 클래스를 사용하지 않고 JS를 사용하여 시뮬레이션합니다. JS로 스타일을 제어하는 ​​키 코드는 다음과 같습니다.

레벨 메뉴 스타일




코드 복사
코드 /*레벨 메뉴 3상태 스타일, JS 호출용*/ .menu li.level1 a{display:block;line-height:31px;height:31px ;패딩-왼쪽:50px ; 글꼴 크기:12px;색상:#fff;배경:url(../images/menubg.gif) 반복 없음 왼쪽 상단;}
.menu li.level1 a.hove{ 배경 위치:왼쪽 - 31px;}
.menu li.level1 a.cur{배경 위치:왼쪽 -62px;}


보조 메뉴 스타일




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

/*JS 호출을 위한 두 번째 수준 메뉴 3상태 스타일*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left: 50px; 글꼴 크기:12px;색상:#fff;배경:url(../images/menubg.gif) 반복 없음 왼쪽 상단;}
.menu li.level1 a.hove{배경 위치:왼쪽 -31px ;}
.menu li.level1 a.cur{Background-position:left -62px;}


행동 레이어:

앞서 언급했듯이 우리는 스타일에서 테이블은 메뉴의 3가지 상태 효과를 정의하지 않으므로 이 효과를 시뮬레이션하려면 onmouseover, onmouseout 및 onclick 이벤트를 각 메뉴 항목에 바인딩해야 합니다. 구조 레이어에서 우리는 이 전체 컨테이너의 ID를 정의하지 않고 클래스 이름만 정의했기 때문에 JS에 확장된 getElementsByClassName() 메서드를 추가했습니다(내 친구 Situ Zhengmei 덕분에). 클래스를 기반으로 이 객체를 얻을 수 있습니다. 이름. 루프 클로저를 사용하여 이 세 가지 이벤트를 바인딩하세요.

자세한 코드를 하나씩 설명하지는 않겠습니다. 데모의 설명은 매우 명확하므로 로컬 컴퓨터에 다운로드하여 찾아보세요.

궁금한 점이 있으시면 이 블로그에 글을 올려 토론해 주세요. 즐거운 이용 되시기 바랍니다!
온라인 데모 주소http://demo.jb51.net/js/caidan_js/demo.html
패키지 다운로드 주소http://www.jb51.net/jiaoben/ 27308.html