순수 CSS를 사용하여 반응형 탐색 메뉴를 구현하는 구현 단계

Pure CSS는 JavaScript를 사용하지 않고도 반응형 탐색 메뉴를 만드는 빠른 방법입니다. 이 문서에서는 구체적인 코드 예제와 함께 반응형 탐색 메뉴를 구현하는 자세한 단계를 제공합니다.

1단계: HTML 구조
먼저 탐색 메뉴의 HTML 구조를 설정해야 합니다. 다음은 간단한 예입니다.

<li class="menu-item">首页</li>
<li class="menu-item">关于我们</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

2단계: CSS 스타일링
다음으로 탐색 메뉴의 스타일을 지정하겠습니다. 다음은 몇 가지 기본 스타일 설정입니다.

.navbar {
background-color: #f2f2f2;
padding: 10px;
}

.menu {
list-style: none;
display: flex;
justify-content: center ;
}

.menu-item {
margin: 0 10px;
}

이 예에서는 탐색 메뉴를 배경색과 함께 탐색 막대에 배치하고 CSS Flexbox 레이아웃을 사용하여 메뉴 항목을 수평으로 정렬하고 센터.

3단계: 반응형 레이아웃
반응형 탐색 메뉴를 구현하려면 미디어 쿼리를 사용해야 합니다. 미디어 쿼리는 다양한 화면 크기를 수용하기 위해 장치의 너비에 따라 스타일을 변경할 수 있습니다.

@media 화면 및 (최대 너비: 768px) {
.menu {

flex-direction: column;
align-items: center;

}

.menu-item {

margin: 10px 0;

}
}

위 코드에서 기기 너비가 또는 768px과 같으면 미디어 쿼리를 사용하여 탐색 메뉴의 레이아웃을 변경합니다. 메뉴 항목을 수직으로 정렬하고 중앙에 정렬합니다.

4단계: 드롭다운 메뉴
경우에 따라 탐색 메뉴에 여러 하위 메뉴 항목이 포함될 수 있습니다. 작은 화면에서 더 나은 사용자 경험을 제공하기 위해 드롭다운 메뉴 기능을 추가할 수 있습니다.

먼저 HTML 구조를 수정하고 하위 메뉴 항목에 대한 드롭다운 메뉴 태그를 추가해야 합니다.