js 부동 층 메뉴 모음 집

사용 설명 은 첨부 파일 에 있 는 JS 파일 과 CSS 파일 을 웹 페이지 에 참조 하 는 것 입 니 다.예 를 들 어

<script type="text/javascript" src="DivMenu.js"></script> 
<link href="DivMenu.css" rel="stylesheet" type="text/css" /> 

온라인 프 리 젠 테 이 션http://img.jb51.net/online/DivMenu/DivMenu.htm소스 코드 를 다운로드 하여 포장 하 는 것 입 니 다http://img.jb51.net/online/DivMenu/DivMenu.zip그 중에서 DivMenu.js 는 Javascript copressor 를 통 해 압축 된 간단 한 버 전 으로 실제 사용 할 수 있 습 니 다.DivMenu_develop.js 는 상세 한 주석 을 가 진 개발 판 으로 학습 연 구 를 제공 합 니 다.사용 시 DivMenu.css 파일 의 설명 을 참고 하여 스타일 정 의 를 스스로 수정 할 수 있 습 니 다.자 바스 크 립 트 프로그램 은 이 JS 파일 을 인용 한 HTML 파일 을 다른 조정 이 필요 없 이 방해 하지 않 기(unobtrusive)를 실 현 했 습 니 다.그러나 아직 완전 익명(anonymous)이 실현 되 지 않 았 습 니 다.이 프로그램 은 전역 변수 와 여러 웹 페이지 노드 를 만 들 었 습 니 다.전역 변수 와 노드 를 최소 화하 고 사용 할 때 변수 이름 충돌 에 주의 하 십시오.이 프로그램 은 전역 변수 인'DivMenu'만 추가 합 니 다.추 가 된 웹 페이지 노드 가 비교적 많 습 니 다.교 체 된 모든 SELECT 노드 에 두 개의 노드 를 추가 합 니 다.이름 은 각각 SELECT 노드 의 name 값 에'a"접미사 와"div'접미사,예 를 들 어 기 존의 SELECT 노드 의 이름 이'menu'이면 새로 추 가 된 두 노드 의 이름 은'menu'입 니 다.a"와"menu "div”。 다 중 선택 메뉴 가 바 뀌 지 않 고 다 중 선택 메뉴 의 알림 문 자 는 disabled="disabled"로 만 이 루어 집 니 다.여러 개 를 선택 하려 면 Ctrl 키 를 누 르 고 1 을 더 선택 하 십시오.이상 은 실 용적 인 범례 입 니 다.몇 개의 전형 적 인 SELECT 선택 메뉴 입 니 다.첫 번 째 는 복잡 한 그룹 으로 나 뉘 어 있 습 니 다.제시 문 자 는 disabled="disabled"의 첫 번 째 option 으로 이 루어 집 니 다.그 다음 하 나 는 간단 합 니 다.제시 문 자 는 value 속성 이 없 는 option 을 사용 합 니 다.실제로 FF 는 disabled="disabled"또는 disabled 만 있 는 option 을 정상적으로 처리 하여 선택 할 수 없 는 상 태 를 만 들 수 있 으 며,IE 는 disabled="disabled"와 disabled 를 무시 하기 때문에 보통 IE 의 메뉴 는 알림 문자 로 value 속성 이나 자 value="가 없 는 그 option 을 사용 할 것 으로 예상 된다.원본 코드 가 원래 SELECT 인 것 을 볼 수 있 습 니 다.변경 할 필요 가 없습니다.기본 적 인 사고방식 은 문서 에 있 는 SELECT 메뉴 를 숨겨 진 INPUT 폼 항목 으로 바 꾸 고,A 요소 로 메뉴 의 알림 텍스트 와 옵션 바 를 만 들 고,DIV 층 으로 메뉴 를 만 들 고,각 옵션 도 A 요소 로 대체 하고,클릭 할 때 숨겨 진 INPUT 폼 항목 에 값 을 부여 하 는 것 이다.주요 기능 이나 제한 은 모든 사용 습관 이 전통 적 인 SELECT 메뉴 를 따 르 는 것 을 포함한다.단일 선택 한 SELECT 메뉴 만 바 뀌 고 다 중 선택 메뉴 는 변 하지 않 습 니 다.보통 다 중 선택 메뉴 도 부동 층 메뉴 로 대체 하지 않 기 때 문 입 니 다.disabled 나 value 가 없 는 option 을 프롬프트 텍스트 로 사용 하 는 등 다양한 SELECT 요소 의 특성 을 지원 합 니 다.optgroup 로 그룹 을 나 누 는 옵션 도 새 메뉴 에서 그룹 을 나 눌 것 입 니 다.또한 IE 6 에서 SELECT 가 DIV 층 을 가 리 는 BUG 를 대상 으로 수정 했다.기본 선택 항목 을 지원 합 니 다.일반 메뉴 의 모든 기능 을 거의 지원 하지만 자바 스 크 립 트 가 실시 간 으로 만 든 Option 옵션,연동 옵션 등 추가 적 인 상호작용 기능 은 지원 되 지 않 습 니 다.예 를 들 어 도시 구 현 을 선택 하면 해당 되 는 변화 와 같은 기능 은 지원 되 지 않 습 니 다.모든 스타일 은 CSS 로 정의 되 며,글꼴 은 상대 적 인 크기 를 사용 하 며,변경 하지 않 아 도 대부분의 웹 페이지 에 적응 할 수 있 습 니 다.메뉴 위치 와 사 이 즈 를 유연 하 게 설정 하여 임의의 웹 페이지 레이아웃 과 레이아웃 에 적응 할 수 있 습 니 다.대체 할 A 요소 에 표시 할 때 가장 넓 은 옵션 문 자 를 놓 아야 하기 때문에 기 존 SELECT 상자 의 너 비 를 직접 가 져 오지 않 았 습 니 다.따라서 메뉴 사 이 즈 는 기 존 SELECT 보다 넓 을 수 있 으 니 사용 시 주의 하 시기 바 랍 니 다.시용 을 환영 하 며 의견 과 건 의 를 제출 하여 개선 을 함께 토론 합 니 다.