HTML 태그를 탐색으로 사용

<자세히> ?

나는 이것이 가장 귀엽다고 생각했습니다. 기본적으로 HTML은 기본적으로 클릭으로 요소를 열고 닫는 방법을 제공합니다. 아름다운. 사람들이 많이 사용하지 않는 것 같습니다! 이상하다, 나는 생각했다.

<details>
  <summary>The bit you click goes in here</summary>
  Once clicked, you get to see the rest of the stuff here
</details>

그리고 그것은 꽤 유연합니다. 거기에 원하는 것은 무엇이든 넣을 수 있습니다!

<details id="nav">
  <summary id="hamburger" role="button" aria-haspopup="menu">
    <div></div>
    <div></div>
    <div></div>
  </summary>
  <ul id="menu">
    <li><a href="#intro">Intro</a></li>
    <li><a href="#stuff">Stuff</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</details>

그래서 나는 그것을 가지고 놀았습니다. 링크 드롭다운이 있는 충분히 보기 좋은 햄버거 스타일 메뉴로 스타일을 지정하는 데 너무 오래 걸리지 않았습니다.


그리고 그것은 아름답게 작동했습니다. 햄버거 메뉴 아이콘을 클릭하면 메뉴가 나타납니다. 다시 클릭하면 사라집니다.

</세부 사항>

하지만 딱 한 가지 빠진 것이 있었습니다. 제 근육 기억력이 그 문제를 해결해 주었습니다. 메뉴 밖을 클릭해도 사라지지 않고, 가고 싶은 것을 클릭해도 자동으로 사라지지 않습니다.

JS 필요

그래서 우리는 JavaScript와 함께 왔습니다. '외부 클릭' 영역에서 전체 드롭다운 메뉴를 선택하지 않고 전체 '버튼' 영역(3개의 대시 포함)을 선택 해제하는 올바른 코드를 찾는 데 시간이 좀 걸렸습니다. .closest() 감사합니다!

오랫동안 나는 어디에서나 클릭하여 닫기 기능을 작동하도록 관리했지만 버튼 자체를 클릭하면 즉시 메뉴가 다시 열렸습니다. 한숨을 쉬다. 물론 StackOverflow 덕분에 결국 거기에 도달했습니다.

let menu = document.getElementById('nav');

//listen for clicks everywhere
window.addEventListener('click', function (event) {
  // if clicks are not on the menu button itself
  if (!event.target.closest('#hamburger')) {
    // Hide the menu if open.
    if (menu.open) { menu.removeAttribute('open'); }
  }
});

이 데모를 자유롭게 클릭하고 HTML 및 CSS만으로 작동하는 것을 보려면 JavaScript를 끄십시오: https://details-nav.netlify.app/

접근성

를 이런 식으로 사용하는 것이 의미상 문제가 있는지 확실하지 않습니다. 그렇지 않은 경우에도 여전히 role="button"이 필요할 수 있으며 aria-pressed 및 aria-expanded 속성이 올바르게 설정되어 있을 수도 있습니다. 물론 더 많은 JavaScript가 필요합니다...

결론

귀여운 숏컷인 것 같습니다. 그리고 어느 정도는 실제로 그것을 진지하게 사용하고 싶고 스크린 리더가 그것을 이해하고 우리가 알고 있는 현대 웹에 의해 훈련된 근육 기억력(나와 같은)을 가진 사람들을 좌절시키지 않기 전까지는 말입니다. 그것.

따라서 어쨌든 많은 JS를 작성하게 되며 그렇게 하려는 경우 을 사용하고 (매우 약간만) 더 먼 길을 갈 수도 있습니다.

이 모든 것에도 불구하고 저는

가 우리의 HTML 무기고에 있는 유용한 태그라고 생각합니다. 다만 이 특별한 경우에는 그렇지 않습니다.

추신

나는 이것이 그것을 찾고 이것이 일을 하는 편리한 방법일 수 있다고 생각하는 모든 사람에게 유용하기를 바랍니다!

또한 저는 더 현대적인 웹 개발을 처음 접했고 배워야 할 것이 많기 때문에 이에 대한 의견을 환영합니다!