내비게이션 메뉴 세번째 예제로 공개와이어프레임중 8페이지에 있는 헤더확장 및 서브 전체가 슬라이드 다운되는 레이아웃을 작성해 봅니다. 와이어프레임을 이미지로 보면 아래와 같습니다.

헤더 전체는 100%로 설정하여 배경색을 입히고 헤어 안에 1200px의 너비를 가지는 컨테이너를 두어 하단 슬라이드, 콘텐츠 영역과의 균형을 일관성있게 구성합니다. 하단 슬라이드와 콘텐츠 영역은 컨테이너안에 위치해야 합니다.

헤더 높이는 100px로 설정하였으며 Submenu가 메인메뉴에 마우스를 오버하면 전체 슬라이드 다운됩니다. Html 소스입니다.

이전에 올렸던 코딩을 다르게 구성해 보았습니다.