提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

html5 to The Using Event navigation focus Improve
2023-09-14 08:59:14 时间

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);
    }
  }

 

相关文章