zoukankan      html  css  js  c++  java
  • [HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)

    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);
        }
      }
  • 相关阅读:
    poj1631 LIS 裸题
    UESTC 电子科大专题训练 DP-N
    UESTC 电子科大专题训练 DP-M
    UESTC 电子科大专题训练 DP-D
    Codeforces Round #424 D
    Codeforces Round #424 C
    Codeforces Round #424 B
    Codeforces Round #424 A
    hiho一下159
    hiho一下158(hihocoder 1318)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10524047.html
Copyright © 2011-2022 走看看