w3.css
하위 탐색
CSS를 사용하여 하위 탐색 메뉴를 만드는 방법을 알아보자.
하위 탐색 만들기
1단계) HTML 추가
<!-- Load font awesome icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- The navigation menu --> <div class="navbar"> <a href="#home">Home</a> <div class="subnav"> <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">Link 4</a> </div> </div> <a href="#contact">Contact</a> </div>
하위 탐색/드롭다운 메뉴를 열려면 임의의 요소(예: <button>, <a> 또는 <p> 요소)를 사용하자.
컨테이너 요소(예: <div>)를 사용하여 하위 탐색 메뉴를 만들고 그 안에 하위 탐색 링크를 추가한다.
CSS를 사용하여 하위 탐색 메뉴를 올바르게 배치하려면 버튼과 <div> 주위에 <div> 요소를 래핑하자.
2단계) CSS 추가
/* The navigation menu */ .navbar { overflow: hidden; background-color: #333; } /* Navigation links */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* The subnavigation menu */ .subnav { float: left; overflow: hidden; } /* Subnav button */ .subnav .subnavbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* Add a red background color to navigation links on hover */ .navbar a:hover, .subnav:hover .subnavbtn { background-color: red; } /* Style the subnav content - positioned absolute */ .subnav-content { display: none; position: absolute; left: 0; background-color: red; width: 100%; z-index: 1; } /* Style the subnav links */ .subnav-content a { float: left; color: white; text-decoration: none; } /* Add a grey background color on hover */ .subnav-content a:hover { background-color: #eee; color: black; } /* When you move the mouse over the subnav container, open the subnav content */ .subnav:hover .subnav-content { display: block; }
기본 예시
예제 보기참고
W3C School - How TO - Subnav