드 롭 다운 및 팝 업 메뉴 는 사이트 디자인 에서 자주 사용 되 는 네 비게 이 션 형식 으로 이러한 메뉴 형식 은 페이지 의 현재 공간 을 충분히 이용 하여 더 많은 내용 을 숨 기 고 표시 할 수 있 으 며 내용 을 합 리 적 으로 분류 하여 표시 할 수 있어 매우 우수한 네 비게 이 션 형식 이다. 초기 드 롭 다운 이나 팝 업 메뉴 는 숨겨 진 layer 나 div 를 통 해 내용 의 숨 김 을 실현 하고 자 바스 크 립 트 스 크 립 트 를 통 해 사용자 의 작업 에 응답 합 니 다.현재 도 자 바스 크 립 트+div 또는 다른 요소 의 형식 으로 이러한 내 비게 이 션 을 만 들 고 있 습 니 다.다른 것 은 전체 내 비게 이 션 은 표준 에 맞 는 css 레이아웃 을 사용 하여 만 들 고 표 로 메뉴 를 만 들 지 않 습 니 다.드 롭 다운 메뉴 는 위 에서 언급 한 가로 네 비게 이 션 과 세로 네 비게 이 션 의 결합 이 고 css 를 통 해 속성 에 대한 많은 지원 을 받 습 니 다.같은 메뉴 는 여러 개의 div 가 서로 협력 하여 완성 되 지 않 아 도 됩 니 다.css 레이아웃 으로 드 롭 다운 메뉴 원 을 만 들 고 심지어 ul 이나 li 요 소 를 직접 제어 할 수 있 습 니 다.지금 가장 간단 한 드 롭 다운 메뉴 를 만 들 려 고 합 니 다.보충 해 야 할 것 은...드 롭 다운 메뉴 의 실현 은 많은 자 바스 크 립 트 기술 을 이용 했다.여기 서 자 바스 크 립 트 기술 에 대해 너무 많은 문법 적 이 해 를 하지 않 고 기 존의 사례 를 통 해 css 요소 속성의 유연성 으로 인해 웹 페이지 의 요 소 를 만 드 는 것 이 더욱 간단 하 다 는 것 을 알려 주 고 싶다.현재 설 계 된 네 비게 이 션 의 XHTML 부분 코드 를 살 펴 보 겠 습 니 다.
문장 - CSS 튜 토리 얼
- DOM 튜 토리 얼
- XML 튜 토리 얼
- FLASH 튜 토리 얼
참조 BLOG - 록
- 순수 음악
- 고전 금 곡
- 영화 오리지널 사 운 드
하나의 표준 적 인 얼 구조의 메뉴 구성 을 사용 하지만 앞에서 말 한 것 과 달리 이곳 의 코드 구 조 는 내장 되 어 있 고 1 층 의 li 사이 에 다른 얼 의 구 조 를 삽입 했다.이것 이 바로 다단 계 메뉴 의 코드 구성 모델 이다.XHTML 코드 는 내장 원 소 를 통 해 원 하 는 효과 나 구 조 를 실현 할 수 있다.다음 단 계 는 간단 한 css 스타일 을 만들어 서 메뉴 를 원 하 는 가로 모양 으로 만 들 려 고 합 니 다. ul { padding:0; margin:0; list-style:none;} li { float:left; width:100px;} 첫 번 째 단 계 는 네 비게 이 션 시스템 이 뜨 겁 고 떠들썩 한 얼 요 소 를 기본 적 으로 설정 합 니 다.list-style:none 속성 은 우리 가 얼 의 모든 원점 표 지 를 제거 하 는 데 도움 을 줄 수 있 습 니 다.list-style 속성 은 다른 풍부 한 사용 방법 을 가지 고 있 으 며,뒤의 목록 요소 에서 중점적으로 이해 할 것 입 니 다. 저 희 는 네 비게 이 션 이 가로로 되 어 있 기 를 바 랍 니 다.li 에 대해 float:left 속성 을 설정 하고 모든 li 를 왼쪽으로 이동 시 켜 가로로 구 조 를 만 들 고 모든 li 의 폭 을 100 px 로 사용 하여 코드 를 계속 작성 하려 고 합 니 다. li ul { display:none; top:20px;} li l 의 정 의 는 여기 서 모든 li 아래 의 l 요 소 를 말 합 니 다.최고급 l 요 소 를 제외 하고 모든 li 아래 에서 정의 하 는 l 요 소 는 이 부분 스타일 의 정 의 를 받 을 것 입 니 다.여기에 top 속성 을 사용 하여 전체 ul 의 상단 거 리 를 설정 하고 display:none 을 사용 하여 이 부분 을 일 으 켰 습 니 다.css 에 있 는 요 소 는 기본적으로 display 속성 을 사용 하여 표시 하거나 숨 길 수 있 습 니 다. li:hover ul,li.over ul { display:block;} li:hover l 은 li 요소 의 l 요 소 를 정의 합 니 다.쉼표 로 구분 하여 이 두 가지 상황 에서 display:block 속성 을 사용 할 수 있 도록 합 니 다.display:block 속성 과 display:none 속성 은 정반 대 입 니 다.하 나 는 숨 기 고 하 나 는 디 스 플레이 입 니 다.display:block 으로 설정 하면 할당 한 요소 가 표 시 될 뿐만 아니 라 하나의 블록 으로 표 시 됩 니 다.display:block 을 하지 않 으 면요 소 는 자신의 내용 이 화면 에 있 는 영역 에 따라 만 표 시 됩 니 다.display:block 을 사용 할 때 요 소 는 자신 을 넓 은 블록 으로 만들어 자신의 점 위치 문자 로 합 니 다.이런 설정 은 큰 단 추 를 만 드 는 데 매우 편리 합 니 다. 맨 아래 미리 보기 에서 코드 를 볼 수 있 습 니 다.그 안에 js 코드 를 추가 하 였 습 니 다.IE 브 라 우 저 에서 드 롭 다운 메뉴 를 표시 하 는 것 을 제어 하 는 데 사 용 됩 니 다.원래 li:hover l 이라는 말 은 가능 하지만 IE 가 css 에 대한 지원 은 아직 완벽 하기 때문에 JS 를 통 해 제어 해 야 한다. 드 롭 다운 메뉴 에 스타일 을 추가 해 보 겠 습 니 다. ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;} ul li a:hover { background-color:#ddd;} css 레이아웃 의 드 롭 다운 메뉴 는 요소 에 대한 숨 김 과 표시 에 중점 을 둡 니 다. 드 롭 다운 및 다단 계 팝 업 메뉴 www.aa25.cn
