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

This tutorial shows you how to build a responsive expandable side navigation menu using JavaScript and CSS. 최종 결과는 매끄럽고 현대적인 메뉴입니다.

여기 라이브 데모가 있습니다 :

1. HTML 구조 : 측면 메뉴의 html을 추가하여 시작하십시오 :

이것은 측면 메뉴 (), 햄버거 아이콘 (), 닫기 버튼 () 및 기본 내용 영역 ()을 설정합니다.

2. JavaScript 기능 : 햄버거 아이콘을 클릭하면 메뉴가 확장됩니다. clicking the close button collapses it.

3. CSS Styling:

CSS는 메뉴와 애니메이션을 스타일로 유지합니다 이 CSS는 매끄러운 슬라이드 애니메이션을 제공하고 오버플로를 처리하며 작은 화면에 대한 응답 성을 추가합니다. 신체의

는 수평 스크롤 바를 방지합니다

4. 슬라이드 애니메이션 제거 (옵션) :

슬라이드 애니메이션을 제거하려면 CSS에서

<div class="sidenav" id="sideNavigation">
  <a class="close-btn" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">×</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Features</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact Us</a>
</div>

<nav class="topnav">
  <a class="ham-icon" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
    </svg>
  </a>
</nav>

<main id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

속성을 ​​

로 설정하십시오. sidenav

이것은 메뉴가 나타나고 즉시 사라집니다. ham-icon 결론 : close-btn 이 단순하면서도 효과적인 측면 내비게이션 메뉴는 다양한 설계 요구에 쉽게 사용자 정의 할 수 있으며 적응할 수 있습니다. 보다 고급 스타일 옵션을 위해 Bootstrap 또는 Bulma와 같은 CSS 프레임 워크를 사용하는 것을 고려하십시오. 그의 공헌에 대해 Monty Shokeen에게 감사합니다!

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