분류 javascript

완벽한 반응형 메뉴 (2019)

컨텐츠 정보

  • 조회 638 (작성일 )

본문

데스크톱에는 웹 사이트에 전체 메뉴를 표시 할 수 있는 공간이 있지만 해당 공간이 없는 휴대 기기에는 햄버거 아이콘과 같은 토글 뒤에 메뉴를 숨기고 사람들이 해당 토글을 클릭 할 때 표시하려는 경우 . 메뉴를 복제하지 않고도 HTML을 단순하게 유지하는 접근성 있는 방법을 어떻게 제공합니까? 

이것이 바로 완벽한 반응형 메뉴입니다.


원본 : https://polypane.rocks/blog/the-perfect-responsive-menu-2019/


햄버거 아이콘은 지금까지 잘 알려져 있지만, 익숙하지 않은 사람들을 돕기 위해 "메뉴"라는 단어와 함께 아이콘을 표시 할 수 있습니다.


이 기사에서는 모든 뷰포트에서 동일한 HTML을 사용하고 반응형이며 멋지게 보이는 반응형 메뉴를 만드는 방법을 보여줍니다. 완벽한 반응형 메뉴.


HTML 


우리는 HTML로 시작합니다.


<nav class="navigation"> <button aria-expanded="false" aria-controls="menu">Menu</button> <ul id="menu" hidden> <li><a href="/">Home</a></li> <li><a href="/benefits">Benefits</a></li> <li><a href="/pricing">Pricing</a></li> <li><a href="/blog">Blog</a></li> </ul> </nav> 


기본 메뉴는 이전에 작성한 것입니다. 탐색 요소에 래핑 된 링크 (ul) 목록입니다. 그러나 두 가지가 다릅니다.


먼저 추가 버튼이 있습니다. 이 버튼에는 익숙하지 않은 일부 속성이 있습니다. Aria 속성. 이러한 속성을 통해 화면 판독기와 같은 보조 도구가 버튼의 목적을 알 수 있습니다. 이 경우 버튼은 ID가 "menu"인 요소를 제어하며 현재 확장되어 있지 않습니다.


둘째, hidden 속성을 사용하여 메뉴가 처음에 숨겨집니다. 모바일을 먼저 개발하기 때문에 처음에는 숨기고 모바일에서는 버튼 만 표시합니다.


자바 스크립트 


버튼 자체는 아무것도 하지 않습니다. 이를 위해 JavaScript를 사용합니다.


const toggleMenu = document.querySelector(".navigation button"); const menu = document.querySelector(".navigation ul"); toggleMenu.addEventListener("click", function () { const open = JSON.parse(toggleMenu.getAttribute("aria-expanded")); toggleMenu.setAttribute("aria-expanded", !open); menu.hidden = !menu.hidden; }); 


버튼을 클릭하면 "aria-expanded"속성의 현재 값을 가져 와서 반전 시키는 함수를 호출합니다. 메뉴의 "숨겨진"속성에 대해서도 동일하게 수행됩니다. JSON.parse 함수는 문자열에서 실제 부울로 속성을 변환하는 데 도움이 됩니다.


이 시점에서 토글이 작동합니다.


https://codepen.io/Kilian/pen/wvwQwgo


CSS 


숨겨진 속성에 대한 지원은 IE11로 돌아가지만 이전 브라우저를 지원해야 하는 경우 아래 CSS를 추가하면 지원할 수 있습니다. (위의 자바 스크립트도 변경해야 할 수도 있습니다)


[hidden] { display: none; } 


특정 너비에서 뷰포트는 버튼을 숨기고 메뉴를 표시 할 수 있을 만큼 넓습니다.


@media ( min-width: 40rem ) { #navigation button { display: none } #menu { display: block } } 


이런 일이 발생하는 폭은 디자인과 메뉴 길이에 따라 다르므로 40rem은 저에게 효과적이지만 효과가 없을 수도 있습니다.


이 기능을 실제로 표시하려면 아래 펜의 "CSS"패널을 토글 하십시오. 버튼과 메뉴 만 표시되도록 전환됩니다.


https://codepen.io/Kilian/pen/NWKEKag


마무리(finishing touch) : 스타일링


이 시점에서 단추와 메뉴의 스타일을 지정하는 방법은 사용자에게 달려 있습니다. 원하는 만큼 간단하거나 복잡하게 만들 수 있습니다.

예를 들어, Polypane 웹 사이트의 모바일 메뉴는 애니메이션 배경이 증가하고 메뉴 항목의 엇갈린 애니메이션이 있는 메뉴에 svg 아이콘을 사용합니다. PostCSS (중첩 가능)로 전환하여 내용을 좀 더 읽기 쉽게 만들었습니다.


https://codepen.io/Kilian/pen/yLBQBpK


그래도 이렇게 보일 필요는 없습니다! 이 기본 HTML과 JavaScript만으로 CSS를 사용하여 다양한 방식으로 스타일을 지정할 수 있습니다. 드롭 다운과 같이 메뉴를 열거나 나머지 내용을 아래로 밀거나 사이드 패널처럼 왼쪽에서 슬라이드 하도록 선택할 수 있습니다. CSS 변환을 사용하면 원하는 방식으로 전환에 애니메이션을 적용 할 수 있습니다.


HTML과 JavaScript의 핵심 기능을 그대로 유지하는 한 모바일 및 더 넓은 뷰포트 모두에서 동일한 HTML을 사용하는 액세스 가능한 반응 형 메뉴가 제공됩니다. 완벽한 반응 형 메뉴.