[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);
}
}
[HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)的更多相关文章
- e617. Determining the Opposite Component of a Focus Event
The opposite component is the other component affected in a focus event. Specifically, in a focus-lo ...
- HTML5的服务器EventSource(server-sent event)发送事件
参考资料: HTML5的服务器(server-sent event)发送事件有什么应用场景? W3school HTML 5 服务器发送事件 『后台消息推送功能』,前端除了轮询.scoket.第三方服 ...
- HTML5 aria- and role
HTML5 aria-* and role 在video-js的demo中看到了很多aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet ...
- bootstrap 中关于 HTML5 aria-* and role的用法
HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Ap ...
- 10令人惊叹的模型的影响HTML5应用程序及源代码
HTML5已经越来越流行起来了.尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用.方便大家学习,也将应 ...
- html5 拖拽(drag)和f放置(drop)
知识要点 HTML5 (drag&drop) API (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...
- Chromium Embedded Framework 中文文档(简介)
转自:http://www.cnblogs.com/think/archive/2011/10/06/CEF-Introduce.html 简介 Chromium Embedded Framework ...
- 【Leafletjs】4.L.Map 中文API
L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with ...
- bootstrap风格的multiselect插件——类似邮箱收件人样式
在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...
随机推荐
- PHP 快速排序算法详解
备注:下面转载的快速排序算法有bug,数组中重复值会被删除,修改后如下: function quickSort($arr){ //递归出口 if(!isset($arr[1])){ return $a ...
- wpf企业应用之带选项框的TreeView
wpf里面实现层次绑定主要使用HierarchicalDataTemplate,这里主要谈一谈带checkbox的treeview,具体效果见 wpf企业级开发中的几种常见业务场景. 先来看一下我的控 ...
- 「HNOI2018」转盘
「HNOI2018」转盘 现场推出了大部分结论但是只写了 \(40\) 分暴力,被贺指导踩爆,现在还有点怀念 HNOI2018 贺指导对着镜子荒野行动的日子,那几天他云球迷瞎**指点篮球,被送上指导称 ...
- 【推导】Codeforces Round #472 (rated, Div. 2, based on VK Cup 2018 Round 2) B. Mystical Mosaic
题意:给你一个棋盘的最终局面. 你的一次操作可以选择一些行和列,将它们的交叉点染黑,不能重复选择某行或者某列.问你是否能经过数次操作之后,达到目标局面. 就枚举所有黑点,如果该点行列都没被标记,就给它 ...
- hdu 2110 基础母函数
题意:退出本身并不麻烦,麻烦的是,退出的人需要取走相应比例(1/3)金额的资产.假设公司此时一共有n种价值的资产,每种价值的资产数量已知,请帮助心烦意乱的XHD夫妇计算一共有多少种分割资产的方法. ...
- [asp.net web api] HttpStatusCode的使用
摘要 在开放api的时,我们需要返回不同的状态给调用方,以告诉它们当前请求的结果,是成功了还是失败了.当然这种给调用方的反馈有很多种做法,这里就说是web api内置的对Http状态码.http状态码 ...
- 使用Bootstrap 3开发响应式网站实践02,轮播
本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...
- Bootstrap 3之美02-Grid简介和应用
本篇主要包括: ■ Grid简介■ 应用Grid■ Multiple Grids Grid简介 Bootstrap中,把页面分成12等份,这就是所谓的Grid. 在Bootstrap中,用类名控 ...
- 为DropDownListFor设置选中项
在MVC中,当涉及到强类型编辑页,如果有select元素,需要根据当前Model的某个属性值,让Select的某项选中.本篇只整理思路,不涉及完整代码. □ 思路 往前台视图传的类型是List< ...
- java常见包
常见的软件包: java.lang : language java的核心包,Object System String Throwable jdk1.2版本后,该包中的类自动被导入. java.awt ...