배경 이나 OA 시스템 에서 가장 많이 사용 되 는 레이아웃 은 흔히 전체 화면 레이아웃 입 니 다.보통 상하 세 줄 의 두 열 레이아웃 입 니 다.페이지,꼬 릿 말,왼쪽 메뉴 에 오른쪽 ifame 프레임 페이지 를 추가 합 니 다.그래서 접 힌 2 급 메뉴 는 자주 사용 되 는데 이 예 는 비교적 통용 되 는 전체 호 환 을 실현 하여 2 급 버퍼 접 기 메뉴 를 강조 할 수 있 습 니 다.특징:전 호 환,브 라 우 저 테스트:IE 5.5,IE6,IE7,IE8,FF 3.0,구 글,Safari 4.0,Opera 9.0.Html 구 조 는 우아 하고 간결 하 며 불필요 한 태그 가 없 으 며 프로그램 순환 출력 에 유리 합 니 다.스타일 과 구조 가 분리 되 어 스타일 시트 에서 다른 스타일 을 수정 할 수 있 습 니 다.현재 선택 한 하 이 라이트 상태 에서 1 단계 메뉴 와 2 단계 메뉴 를 강조 할 수 있 습 니 다.접 이식 우아 한 버퍼 애니메이션.백 스테이지 와 일부 OA 시스템 인터페이스 에 가장 적합 합 니 다.단점:새로 고침 을 지원 하지 않 습 니 다.이 기능 은 배경 응용 시스템 에서 용도 가 크 지 않 고 이 기능 을 추가 하지 않 았 을 것 입 니 다.IE6 에 서 는 완충 효과 가 나 오지 않 아 IE6 에 대해 서 는 효 과 를 약화 시킨다.아니면 효과 캡 처 부터 볼 까요?보통 하나의 효 과 를 만 듭 니 다.제 제작 절 차 는 보통 HTML 구조 층 의 내용 을 그 려 서 스타일 을 쓰 고 그 다음 에 금상첨화 효 과 를 만 듭 니 다.예 를 들 어 JS 필터 등 입 니 다.큰 소 들 이 어떤 프로 세 스 모델 인지 모 르 겠 습 니 다.구조 층:구조 층 의 구상 은 보통 감성 적 인 인식 에 세 워 진 것 이 고 보통 효과 도 를 가지 고 이 효과 도 에 따라 가장 간결 한 HTML 구 조 를 구축한다.위의 그림 에서 보 듯 이 눈 에 띄 는 첫 인상 은 먼저 UL 의 무질서 한 목록 을 사용 하고 싶 은 것 입 니 다.그러나 이것 은 2 급 으로 포 함 된 목록 입 니 다.이것 은 우리 가 먼저 고려 해 야 할 문제 입 니 다.따라서 구 조 는 다음 과 같다.가장 원시 적 인 구조 층 이 있 으 면 필요 한 갈 고 리 를 추가 해 야 합 니 다.CSS 와 JS 가 스타일 과 효 과 를 제어 하 는 데 사용 해 야 합 니 다.저 는 여러 가지 유형 을 추가 하 는 쓰기 에 반대 해 왔 습 니 다.이것 은 페이지 의 부 피 를 증가 시 킬 수 있 기 때문에 가장 간단 한 방법 은 한두 개의 필요 한 유형 을 부모 용기 에 사용 하면 됩 니 다.그리고 스타일 시트 에서 하위(군)선택 부호 로 여러 가지 개성 적 인 설정 을 설정 하 는 것 입 니 다.위의 구조 에서 당신 은 몇 가지 유형 명 으로 모든 스타일 을 정의 할 생각 을 할 수 있 습 니까?내 방법 은 세 가지 유형 만 사용 하면 모든 스타일 을 제어 할 수 있다 는 것 이다.하 나 는 최고급 UL 입 니 다.class="menu"라 고 정의 합 니 다.하 나 는 2 급 메뉴 의 용기 입 니 다.즉,끼 워 넣 은 UL 은 class="level 2"를 정의 합 니 다.마지막 으로 1 급 메뉴 항목 li 는 class="level 1"을 정의 합 니 다.이 세 개의 갈고리 가 있 으 면 전체 구조의 스타일 을 조작 할 수 있 습 니 다.표현 층:스타일 시트 의 설정 은 매우 간단 합 니 다.유일 하 게 주의해 야 할 것 은 JS 가 2 급 메뉴 의 숨 김 을 제어 하고 현재 선택 한 항목 의 하 이 라 이 트 를 기록 할 수 있 도록 저 는 hover 의사 류 를 사용 하지 않 고 마우스 의 미끄럼 효 과 를 실현 하기 위해 JS 로 모 의 합 니 다.JS 로 스타일 을 제어 하 는 관건 적 인 코드 는 다음 과 같다.1 급 메뉴 스타일
<li><a href="#none"> </a>
<ul>
<li><a href="#none"> </a></li>
</ul>
</li>
2 급 메뉴 스타일
<ul class="menu">
<li><a href="#none"> </a></li>
</ul>
행동 층:앞에서 언급 했 듯 이 우 리 는 스타일 시트 에서 메뉴 의 세 가지 효 과 를 정의 하지 않 았 기 때문에 모든 메뉴 항목 에 onmouseover,onmouseout 과 onclick 이 벤트 를 연결 시 켜 이런 효 과 를 모 의 해 야 한다.구조 층 에서 우 리 는 이 총 용기 의 ID 를 정의 하지 않 고 하나의 클 라 스 클래스 이름 만 정 의 했 기 때문에 JS 에 확 장 된 getElements ByClassName()방법(친구 사도 정미 에 게 감사)을 추가 하여 클래스 이름 에 따라 이 대상 을 얻 었 습 니 다.이 세 사건 을 순환 폐쇄 로 연결 합 니 다.상세 한 코드 는 일일이 설명 하지 않 겠 습 니 다.데모 에 주석 이 매우 명확 하 니 이 컴퓨터 에 다운로드 하여 탐색 하 십시오.무슨 문제 가 있 으 면 본 블 로그 에 붙 여 토론 하 세 요.즐 거 운 시간 보 내세 요!온라인 프레젠테이션 주소
http://demo.jb51.net/js/caidan_js/demo.html포장 다운로드 주소
https://www.jb51.net/jiaoben/27308.html
