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);
        }
      }
  • 相关阅读:
    数据结构 队列
    数据结构 堆栈
    UNP学习 广播
    UNP学习 路由套接口
    QTcpSocket发送结构体
    线性表及实现
    [转]理解WSRF之一 使用WS-ResourceProperties (整理自IBM网站)
    详解x86、IA-32、IA-64等CPU系列
    gsoap框架下的onvif程序流程分析
    【LeetCode】从contest-21开始。(一般是10个contest写一篇文章)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10524047.html
Copyright © 2011-2022 走看看