반응형 디자인 슬라이딩 사이드 탐색 메뉴 만들기

이 튜토리얼에서는 JavaScript와 CSS를 사용하여 확장 가능한 측면 탐색 메뉴를 만듭니다. 최종 제품은 아래와 같습니다:

1. 마크 만들기

먼저 사이드 메뉴에 몇 가지 마크업을 추가해 보겠습니다.

으아악

여기서 클래스 sidenav 创建了一个侧边菜单 div 。接下来，我们通过 <nav></nav> 태그를 사용하여 실제 상단 표시줄 탐색을 추가하고 사이드 메뉴 아이콘에 SVG를 사용하는 것을 볼 수 있습니다.

웹사이트의 모든 콘텐츠를 div id="main"컨테이너에 넣어 오른쪽으로 슬라이드되도록 하세요.

2. JavaScript 코드 작성

다음으로 ham-icon 클래스를 사용하여 햄버거 아이콘의 클릭 이벤트와 측면 탐색 메뉴가 화면으로 슬라이드된 후 나타나는 닫기 버튼을 수신하는 JavaScript를 추가해 보겠습니다.

으아악

햄버거 아이콘을 클릭하면 측면 탐색이 표시됩니다. 이를 위해 탐색 너비를 250px，同时向主要网站内容添加 250px의 왼쪽 여백으로 설정했습니다.

닫기 버튼을 클릭하면 측면 탐색이 숨겨집니다. 이를 위해 탐색 너비를 다시 0으로 변경하고 기본 사이트 콘텐츠의 왼쪽 여백도 0으로 설정합니다.

3. CSS 스타일 사용

마지막으로 일부 CSS를 사용하여 페이지의 사이드 메뉴와 링크 스타일을 지정해야 합니다. CSS는 모든 웹페이지 요소를 우리가 원하는 위치에 정확하게 배치합니다. 또한 transition 속성을 사용하여 간단한 애니메이션을 적용해 보겠습니다. CSS를 한 번에 한 부분씩 살펴보겠습니다.

으아악

측면 탐색을 height设置为100%，并将其初始width设置为0以使其隐藏。但是，只有当 overflow-x 属性的值设置为 hidden할 때 측면 탐색의 내용은 숨겨진 상태로 유지됩니다.

전환 속성은 측면 탐색 너비의 변경이 갑자기 발생하지 않도록 보장하고 완화 기능은 약간의 탄력성을 제공합니다.

사이드 탐색 내 링크의 경우 white-space 属性的值设置为 nowrap 메뉴 텍스트가 여러 줄로 넘치지 않도록 하겠습니다.

으아악

위의 CSS 스타일은 닫기 버튼을 측면 탐색의 다른 링크와 분리합니다. 닫기 버튼에 절대 위치 지정을 적용하고 마우스를 올리면 배경이 밝은 회색으로 바뀌는 것을 방지했습니다. 또한 사용자가 위로 마우스를 가져가면 크기가 20% 증가합니다.

다음 CSS는 이제 동일한 전환 기간과 동일한 여유 기능을 사용하여 기본 콘텐츠 위치가 탐색 메뉴와 동기화되도록 이동합니다. overflow-x 属性的值设置为 hidden를 배치하면 콘텐츠가 이동할 때 가로 스크롤 막대가 나타나지 않습니다.

으아악

다음 CSS를 사용하여 햄버거 아이콘에 약간의 회전 동작을 추가할 수도 있습니다. 햄버거 아이콘을 0.5초 만에 180도 회전시킵니다.

으아악

마지막으로 다음 CSS를 사용하여 링크의 간격과 크기를 조정하여 탐색 메뉴를 반응형으로 만들어 보겠습니다. 이는 수직 공간이 적은 화면에서 메뉴가 범위를 벗어나지 않도록 보장합니다.

으아악

이 시점에서 탐색 메뉴는 아래 CodePen 데모와 같아야 합니다.

4. 슬라이드쇼 제거

슬라이드 애니메이션 없이 메뉴를 표시하려면 CSS 속성을 transition 아래 축약된 형식과 같이 변경하세요.

으아악

transition 中没有指定延迟。我们使用的默认值是 0.5s에 지정된 지연이 없으므로 변경 사항이 즉시 나타납니다. 우리가 사용하는 기본값은 0.5s입니다.

결론

사이드 메뉴를 만드는 데는 몇 줄의 코드만 필요하며 많은 리소스가 필요하지 않습니다. 특정 사례에 대한 미디어 쿼리를 추가하여 CSS를 수정하여 다양한 장치 화면 해상도에 반응하는 코드를 만드세요.

한 단계 더 나아가려면 Bootstrap 또는 Bulma와 같은 CSS 프레임워크를 사용하여 메뉴 스타일을 지정할 수 있습니다.

이 기사는 Monty Shokeen의 기여로 업데이트되었습니다. Monty는 튜토리얼 작성과 새로운 JavaScript 라이브러리 학습을 즐기는 풀 스택 개발자입니다.

위 내용은 반응형 디자인 슬라이딩 사이드 탐색 메뉴 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!