순수 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 구조를 수정하고 하위 메뉴 항목에 대한 드롭다운 메뉴 태그를 추가해야 합니다.

<li class="menu-item">首页</li>
<li class="menu-item dropdown">
  关于我们
  <ul class="dropdown-menu">
    <li class="dropdown-menu-item">公司简介</li>
    <li class="dropdown-menu-item">团队</li>
    <li class="dropdown-menu-item">历史</li>
  </ul>
</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

ul>

다음으로 드롭다운 메뉴에 스타일을 추가해야 합니다:

.dropdown {
position:relative;
}

.dropdown-menu {
display: none ;
위치: 절대;
상단: 100%;
배경색: #f2f2f2;
패딩: 10px;
}

.dropdown:hover .dropdown-menu {
디스플레이: 블록;
}

이 예에서는 , 상대 위치 지정을 사용합니다. 상위 메뉴 항목을 기준으로 드롭다운 메뉴의 위치를 ​​지정합니다. 드롭다운 메뉴는 너비가 100%이고 배경색이 #f2f2f2인 절대 위치에 스타일이 지정되어 있습니다. 상위 메뉴 항목 위에 마우스를 올리면 드롭다운 메뉴가 나타납니다.

요약:
위 단계를 통해 우리는 순수 CSS 반응형 탐색 메뉴를 성공적으로 구현했습니다. 미디어 쿼리와 몇 가지 기본 CSS 스타일을 사용하면 다양한 화면 크기에 맞춰 조정되는 탐색 메뉴를 쉽게 만들 수 있습니다. 이 방법은 간단하고 사용하기 쉬울 뿐만 아니라 좋은 사용자 경험을 제공합니다. 필요에 맞게 스타일과 레이아웃을 추가로 조정할 수 있습니다.

위 내용은 순수 CSS를 사용하여 반응형 탐색 메뉴를 구현하는 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!