디자인 요소 확인

필터 있는 갤러리

사용자가 네비게이션 메뉴의 요소 위로 마우스를 이동하면 모든 하위 메뉴가 함께 표시되는 드랍다운(Drop down) 메뉴를 만듭니다:

필터가 있는 갤러리 만들기

Step 1) HTML 코드 추가하기:

<div class=”navbar”>
  <a href=”#home”>Home</a>
  <a href=”#news”>News</a>
  <div class=”dropdown”>
    <button class=”dropbtn”>Dropdown
      <i class=”fa fa-caret-down”></i>
    </button>
    <div class=”dropdown-content”>
      <div class=”header”>
        <h2>Mega Menu</h2>
      </div>
      <div class=”row”>
        <div class=”column”>
          <h3>Category 1</h3>
          <a href=”#”>Link 1</a>
          <a href=”#”>Link 2</a>
          <a href=”#”>Link 3</a>
        </div>
        <div class=”column”>
          <h3>Category 2</h3>
          <a href=”#”>Link 1</a>
          <a href=”#”>Link 2</a>
          <a href=”#”>Link 3</a>
        </div>
        <div class=”column”>
          <h3>Category 3</h3>
          <a href=”#”>Link 1</a>
          <a href=”#”>Link 2</a>
          <a href=”#”>Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2) CSS 코드 추가하기:

* {
box-sizing: border-box;
}

body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}

/* 웹사이트 가운데 정렬 */
.main {
max-width: 1000px;
margin: auto;
}

h1 {
font-size: 50px;
word-break: break-all;
}

.row {
margin: 10px -16px;
}

/* 각 열 사이에 간격 추가 */
.row,
.row > .column {
padding: 8px;
}

/* 세 개의 동일한 너비 열을 옆으로 부유시키는 스타일 */
.column {
float: left;
width: 33.33%;
display: none; /* 기본적으로 모든 요소 숨김 */
}

/* 행 이후에 부유 해제 */
.row:after {
content: “”;
display: table;
clear: both;
}

/* 내용 */
.content {
background-color: white;
padding: 10px;
}

/* “show” 클래스가 추가된 요소 스타일 */
.show {
display: block;
}

/* 버튼 스타일 */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}

.btn:hover {
background-color: #ddd;
}

.btn.active {
background-color: #666;
color: white;
}

Step 3) 자바스크립트 (JavaScript) 코드를 추가합니다:

필터링 기능을 구현하기 위한 JavaScript 코드입니다.
filterSelection 함수는 사용자가 클릭한 버튼에 따라 이미지를 필터링합니다.
w3AddClass 및 w3RemoveClass 함수는 요소에 클래스를 추가하거나 제거합니다.
클릭 이벤트를 처리하여 활성화된 버튼을 강조 표시합니다.

filterSelection(“all”)
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName(“column”);
if (c == “all”) c = “”;
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], “show”);
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], “show”);
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(” “);
arr2 = name.split(” “);
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);

}