만드는 방법: 드롭다운 메뉴 사이드바
- 이전 페이지 상단 탐색 표의下拉菜单位置
- 다음 페이지 드롭다운 메뉴가 있는 반응형 네비게이션 타이틀
사이드 네비게이션에 드롭다운 메뉴 추가하는 방법 배우기.
사이드 네비게이션 바의 드롭다운 메뉴
드롭다운 메뉴 사이드바 생성
첫 번째 단계 - HTML 추가:
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<a href="#contact">Search</a>
</div>
예시 설명:
드롭다운 메뉴를 여는 데 사용할 수 있는 어떤 요소든 사용할 수 있습니다. 예를 들어, <button>, <a> 또는 <p> 요소.
컨테이너 요소(예: <div>)를 사용하여 드롭다운 메뉴를 생성하고, 그 안에 드롭다운 메뉴 링크를 추가합니다. 우리는 사이드바 내 모든 링크에 동일한 스타일을 적용할 것입니다.
第二步 - CSS 추가:
/* 전체 높이의 고정 사이드바 */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* 사이드바 링크와 드롭다운 메뉴 버튼의 스타일 설정 */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* 마우스 오버 시 */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* 주요 내용 */
.main {
margin-left: 200px; /* 측면 바의 너비와 동일합니다 */
font-size: 20px; /* 텍스트를 확대하여 스크롤을 활성화합니다 */
padding: 0px 10px;
}
/* 활성下拉菜单位置 버튼에 활성 클래스 추가 */
.active {
background-color: green;
color: white;
}
/*下拉菜单位置 컨테이너（기본적으로 숨겨져 있습니다）。선택 사항:下拉菜单位置 내용에 더 밝은 배경색과 왼쪽 내간격을 추가하여 디자인을 변경합니다 */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* 선택 사항: 아래로 향하는 아이콘 스타일 설정 */
.fa-caret-down {
float: right;
padding-right: 8px;
}
제3단계 - JavaScript 추가:
/* 모든下拉菜单位置 버튼을 순회하며 숨기기와 표시하기 사이를 전환 - 이는 사용자가 충돌 없이 여러下拉菜单位置을 가질 수 있도록 합니다 */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
관련 페이지
교육:CSS 드롭다운 메뉴
- 이전 페이지 상단 탐색 표의下拉菜单位置
- 다음 페이지 드롭다운 메뉴가 있는 반응형 네비게이션 타이틀
