요즘 꽤 바빠서 몇 달 동안 블로그를 관리하지 못했습니다. 이제 최근 프로젝트에서 만든 메뉴 예시를 정리해서 공유해보겠습니다.
백엔드 또는 OA 시스템에서 가장 일반적으로 사용되는 레이아웃은 전체 화면 레이아웃인 경우가 많습니다. 이는 일반적으로 상단, 중간, 하단에 3개의 행과 2개의 열이 있고 머리글, 바닥글, 왼쪽 메뉴 및 ifame 프레임이 있는 레이아웃입니다. 오른쪽 페이지. 따라서 폴더블 보조 메뉴가 자주 사용됩니다. 이 예는 이러한 보다 일반적인 완전 호환 및 강조 표시 가능한 보조 버퍼 접기 메뉴를 구현하는 것입니다.
특징 :
단점 :
이러한 메뉴를 만들면서 겪게 되는 몇 가지 간단한 아이디어와 문제점에 대해 간략하게 이야기해 보겠습니다.
일반적으로 효과를 만들 때 내 제작 과정은 먼저 HTML 구조 레이어의 내용을 그린 다음 스타일을 작성한 다음 JS 특수 효과 등과 같은 케이크 효과에 약간의 아이싱을 추가하는 것입니다. 전문가들이 어떤 프로세스 모델을 가지고 있는지 모르겠습니다.
구조층 :
구조적 레이어의 아이디어는 일반적으로 지각적 이해를 기반으로 하며 일반적으로 렌더링을 사용하며 이러한 렌더링을 기반으로 가장 간결한 HTML 구조가 구성됩니다. 위 그림에서 볼 수 있듯이 UL의 unordered list를 사용하면 가장 먼저 눈에 띄는 느낌이 들지만... 이것은 2단계 중첩 목록입니다. 이것이 우리가 먼저 고려해야 할 문제입니다.
따라서 구조는 다음과 같아야 합니다.
2차 메뉴가 있는 경우 중첩된 UL 구조입니다. 2차 메뉴가 없는 경우는 다음과 같습니다.
<ul 클래스="메뉴">
<li><a href="#none">1단계 메뉴 항목</a></li>
</ul>
물론 실제 상황에 따라 dl-dt-dd 순서 목록 방법을 사용하여 이러한 중첩 구조를 만들 수도 있습니다.
가장 독창적인 구조 레이어에서는 스타일과 효과를 제어하기 위해 CSS 및 JS에 필요한 몇 가지 후크를 추가해야 합니다. 저는 항상 클래스 이름을 많이 추가하면 페이지 크기가 커지는 방식에 반대해 왔습니다. 간소화된 접근 방식은 하나 또는 두 개의 필수 클래스 이름을 상위 컨테이너에 적용한 다음 하위(그룹) 선택기를 사용하여 스타일 시트에서 다양한 개인 설정을 지정하는 것입니다. 위 구조에서 모든 스타일을 정의하는 데 몇 개의 클래스 이름을 사용한다고 생각하시나요?
내 접근 방식은 세 가지 클래스 이름만 사용하여 모든 스타일 표시를 제어하는 것입니다. 하나는 class="menu"로 정의된 최상위 UL이고, 다른 하나는 두 번째 수준 메뉴의 컨테이너입니다. 즉, 중첩된 UL은 class="level2"를 정의하며, 마지막으로 첫 번째 수준 메뉴 항목입니다. li은 class="level1" 을 정의합니다. 이 세 가지 후크를 사용하면 전체 구조의 스타일을 조작할 수 있습니다.
프리젠테이션 레이어 :
스타일 시트 설정은 매우 간단합니다. JS에서 보조 메뉴의 표시 및 숨김을 제어하고 현재 선택한 항목의 강조 상태를 기록하기 위해 호버 의사를 사용하지 않습니다. -클래스를 사용하여 마우스의 슬라이드 인 및 슬라이드 아웃 효과를 구현하고 JS를 사용하여 시뮬레이션합니다. JS를 사용하여 스타일을 제어하기 위한 키 코드는 다음과 같습니다.
첫 번째 수준 메뉴 스타일
/*JS 호출을 위한 첫 번째 수준 메뉴 3가지 상태 스타일*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; 글꼴 크기:12px;color:#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;color:#fff;배경:url(../images/menubg.gif ) 반복 없음 왼쪽 상단;}
.menu li.level1 a.hove{배경 위치:왼쪽 -31px;}
.menu li.level1 a.cur{배경 위치:왼쪽 -62px;}
행동 계층 :
앞서 언급한 것처럼 스타일 시트에서 메뉴의 3가지 상태 효과를 정의하지 않았으므로 이 효과를 시뮬레이션하려면 onmouseover, onmouseout 및 onclick 이벤트를 각 메뉴 항목에 바인딩해야 합니다. 구조 레이어에서 우리는 이 전체 컨테이너의 ID를 정의하지 않고 클래스 이름만 정의했기 때문에 JS에 확장된 getElementsByClassName() 메서드를 추가했습니다(내 친구 Situ Zhengmei 덕분에). 클래스를 기반으로 이 객체를 얻을 수 있습니다. 이름. 루프 클로저를 사용하여 이 세 가지 이벤트를 바인딩하세요.
자세한 코드를 하나씩 설명하지는 않겠습니다. 데모의 설명은 매우 명확하므로 로컬 컴퓨터에 다운로드하여 찾아보세요.
궁금한 점이 있으시면 이 블로그에 게시하고 토론해 주세요. 즐거운 이용을 기원합니다!
<li><a href="#none">1단계 메뉴 항목</a>
<ul>
<li><a href="#none">2차 메뉴 항목</a></li>
</ul>
</li>