콘텐츠

• 단계로
• 2 단계 중 1 : HTML 작성
• 2/2 부 : CSS 작성
• 팁

드롭 다운 메뉴를 사용하면 페이지의 모든 중요한 부분과 페이지에 포함 된 하위 섹션에 대한 명확하고 계층적인 개요를 만들 수 있습니다. 하위 섹션을 표시하려면 기본 섹션 위로 마우스를 이동하기 만하면됩니다. HTML 및 CSS 만 사용하여 드롭 다운 메뉴를 만들 수 있습니다.

단계로

2 단계 중 1 : HTML 작성

1. 탐색 섹션을 만듭니다. 일반적으로 웹 사이트 전체 탐색 모음에는 nav>를 사용하고, 페이지 바인딩 된 작은 링크 섹션에는 header>를 사용하고, 다른 옵션이 적합하지 않은 경우 div>를 사용합니다. 컨테이너와 메뉴 자체의 스타일을 조정할 수 있도록 div> 요소에 배치합니다.
   • div>
   • 탐색>
   • / 탐색>
   • / div>
2. 각 섹션에 클래스 속성을 부여하십시오. 나중에 CSS로 이러한 요소의 스타일을 수정하기 위해 class 속성을 사용합니다. 컨테이너와 메뉴 모두에 고유 한 클래스 속성을 부여하십시오.
   • div>
   • 탐색>
   • / 탐색>
   • / div>
3. 메뉴 항목 목록을 추가합니다. 정렬되지 않은 목록 (ul>)에는 주 메뉴의 항목 (목록 항목 li>)이 포함되어 있으며 사용자가 마우스를 그 위로 이동하면 드롭 다운 메뉴가 표시됩니다. 목록 요소에 "clearfix"클래스를 추가하십시오. 나중에 CSS 스프레드 시트에서 다룰 것입니다.
   • div>
   • 탐색>
   •       ul>
   •          li> 홈 / li>
   •          li> 직원
   •          li> 연락처
   •          / li>
   •       / ul>
   • / 탐색>
   • / div>
4. 링크를 추가하십시오. 이러한 최상위 메뉴 항목이 자체 페이지에도 링크되는 경우 이제 링크를 삽입 할 수 있습니다. 존재하지 않는 앵커에 링크 (예 : "#!"), 링크가없는 경우에도 사용자의 커서가 다르게 보입니다. 이 예에서 Contact는 아무데도 리드하지 않지만 다른 두 메뉴 항목은 다음을 수행합니다.
   • div>
   • 탐색>
   • ul>
   • li>a href = "/">집/ a>/ li>
   • li>a href = "/ 직원">직원들/ a>
   • / li>
   • li>a href = "#!">접촉/ a>
   • / li>
   • / ul>
   • / 탐색>
   • / div>
5. 드롭 다운 항목에 대한 하위 목록을 만듭니다. 스타일이 생성되면 이러한 목록이 드롭 다운 메뉴를 형성합니다. 사용자가 마우스를 가져갈 목록 항목에 목록을 배치합니다. 이전과 마찬가지로 클래스 속성과 링크를 추가하십시오.
   • div>
   • 탐색>
   • ul>
   • li> a href = "/"> 홈 / a> / li>
   • li> a href = "/ Employees"> 직원 / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> 연락처 / a>
   •          ul>
   •             li> a href = "mailto : [email protected]"> 문제 신고 / a> / li>
   •             li> a href = "/ support"> 고객 지원 / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / 탐색>
   • / div>

2/2 부 : CSS 작성

1. CSS 스타일 시트를 엽니 다. 링크가 아직없는 경우 HTML 문서의 헤드 섹션에 CSS 스타일 시트에 대한 링크를 게시합니다. 이 기사에서는 글꼴 및 배경색 설정과 같은 CSS의 기본 사항을 다루지 않을 것입니다.
2. clearfix 코드를 추가합니다. 메뉴 목록에 "clearfix"클래스를 추가 한 것을 기억하십니까? 일반적으로 드롭 다운 메뉴의 요소는 배경이 투명하여 다른 요소를 이동할 수 있습니다. CSS에 대한 간단한 조정으로이 문제를 해결할 수 있습니다. 다음은 Internet Explorer 7 및 이전 버전에서는 작동하지 않지만 멋지고 빠른 해결 방법입니다.
   • .clearfix : after {
   • 내용 : "";
   • 디스플레이 : 테이블;
   • }
3. 기본 디자인을 만듭니다. 이 코드를 사용하면 페이지 상단에 메뉴를 배치하고 드롭 다운 요소를 숨길 수 있습니다. 이것은 의도적으로 매우 간단하여 관련 코드에 집중할 수 있습니다. 패딩 및 여백과 같은 추가 CSS 코드를 사용하여 나중에 수정할 수 있습니다.
   • .nav-wrapper {
   • 너비 : 100 %;
   • 배경 : # 008B8B;
   • }
   •  
   • .nav 메뉴 {
   • 위치 : 상대;
   • 디스플레이 : 인라인 블록;
   • }
   •  
   • .sub 메뉴 {
   • 위치 : 절대;
   • 디스플레이 : 없음;
   • 배경 : # 555;
   • }
4. 드롭 다운 항목 위에 마우스를 올려 놓으면 표시됩니다. 이제 드롭 다운 목록의 요소가 표시되지 않도록 설정되었습니다. "부모"위로 마우스를 가져가 자마자 전체 하위 목록이 나타나도록하는 방법은 다음과 같습니다.
   • .nav-menu ul li : hover> ul {
   • 디스플레이 : 블록;
   • }
   • 참고-드롭 다운 메뉴의 메뉴 항목에 추가 메뉴가 숨겨져 있으면 여기에 추가 된 속성이 모든 메뉴에 적용됩니다. 드롭 다운 메뉴의 첫 번째 수준에만 스타일을 적용하려면 ".nav-menu> ul"을 대신 사용하십시오.
5. 드롭 다운 메뉴가 있음을 화살표로 표시합니다. 웹 디자이너는 일반적으로 요소가 드롭 다운 메뉴를 여는 것을 아래쪽 화살표와 함께 표시합니다. 이 코드는 메뉴의 모든 요소에 화살표를 추가합니다.
   • .nav 메뉴> ul> li : {
   • 내용 : " 25BC"; / * 아래쪽 화살표에 대한 이스케이프 된 유니 코드 * /
   • 글꼴 크기 : .5em;
   • 디스플레이 : 블록;
   • 위치 : 절대;
   •    }
   • 참고-위쪽, 아래쪽, 오른쪽 또는 왼쪽 속성을 사용하여 화살표 위치를 조정합니다.
   • 참고-모든 메뉴 항목에 드롭 다운이없는 경우 전체 클래스 탐색 메뉴의 모양을 변경하지 마십시오. 대신 화살표를 원하는 각 li 요소에 다른 클래스 (예 : 드롭 다운)를 추가합니다. 위 코드에서 해당 클래스를 참조하십시오.
6. 패딩, 배경 및 기타 속성을 조정합니다. 메뉴는 이제 작동하지만 아직별로 좋지는 않습니다. CSS의 속성을 사용하여 각 클래스 또는 요소의 모양과 위치를 사용자 지정할 수 있습니다.

팁

• 양식에 드롭 다운 메뉴를 추가하려는 경우 HTML5에서 요소 select>를 사용하면 매우 쉽습니다.
• 링크 a href = "#">는 페이지 상단으로 스크롤되고, 존재하지 않는 앵커 (예 : a href = "#!">)를 가리키는 링크는 스크롤되지 않습니다. 너무 엉성해 보이면 CSS로 커서 모양을 변경할 수 있습니다.
• 샘플 코드를 복사하여 붙여 넣을 때 모든 글 머리 기호를 제거하십시오.