[HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)

最新推荐文章于 2022-02-21 18:55:34 发布

吃素的小动物

最新推荐文章于 2022-02-21 18:55:34 发布

阅读量68

点赞数

原文链接：http://www.cnblogs.com/Answer1215/p/10524047.html

版权

For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu will show up. In the post, we will see how to achieve it by using JS+css, we will also see how to use 'nextElementSibling' to only focus the elemnt has menu popup.

HTML: Highlighted part is the submenue

    <nav>
      <ul class="menu">
        <li class="menu__item">
          <a href="/" class="menu__link">About</a>
        </li>
        <li class="menu__item">
          <a href="/" class="menu__link">News</a>
          <ul class="submenu">
            <li class="submenu__item">
              <a href="/" class="submenu__link">Press Releases</a>
            </li>
            <li class="submenu__item">
              <a href="/" class="submenu__link">Blog</a>
            </li>
          </ul>
        </li>
        <li class="menu__item">
          <a href="/" class="menu__link">Contact</a>
        </li>
      </ul>
    </nav>

JS: We want to add 'focus' class when element get focused, in the meanwhile, we only apply focus class to the element which has 'nextElementSibling' which is <ul class="submenu">

const topMenuLinks = document.querySelectorAll(".menu__link");

topMenuLinks.forEach(link => {
  if (link.nextElementSibling) {
    link.addEventListener("focus", function() {
      this.parentElement.classList.add("focus");
    });
  }
});

CSS:

.menu {
  display: flex;
  list-style: none;

  &__item {
    position: relative;

    &:hover .submenu,
    &.focus .submenu {
      transform: scaleY(1);
    }
  }