- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个位于页面左侧的垂直导航。导航通过悬停调用子菜单。但这里的问题是我想构建此导航可以按 TAB 响应。
我得到的情况是,当我将鼠标悬停在导航栏上时,子菜单会缓入。但我想使用 Tab 键来聚焦主菜单,然后子菜单也会缓入。但它不起作用。
可以用HTML和CSS来完成吗???
示例:https://www.whitehouse.gov/
这是我的 HTML 代码:
<nav id="menu">
<ul class="parent-menu">
<li >
<a href="#" tabindex="1" >Home & Kitchen</a>
<ul>
<li><a href="#" tabindex="2">item</a></li>
<li><a href="#" tabindex="3">item</a></li>
<li><a href="#" tabindex="4">item</a></li>
<li><a href="#" tabindex="5">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li tabindex="2">
<a href="#" >Electronics</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li tabindex="3">
<a href="#" >Clothing</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li>
<a href="#">Cars & Motorbikes</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li>
<a href="#">Books</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li>
<a href="#">Support</a>
<ul>
<li>
<a href="#">Contact Us</a>
</li>
<li><a href="#">Forum</a>
</li>
<li><a href="#">Deliveries</a></li>
<li><a href="#">T&C</a></li>
</ul>
</li>
</ul>
</nav>
这是我的 CSS 代码:
p, ul, li, div, nav { padding:0; margin:0; }
#menu {
overflow: auto;
position:fixed;
left:0%;top:20%;
z-index:2; }
.parent-menu {
background-color: #0c8fff;
min-width:200px;
float:left; }
#menu ul {
list-style-type:none;
}
#menu ul li a {
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
}
#menu ul li a:hover {
background-color:#007ee9;
}
#menu ul li:hover > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li:focus > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul {
position: fixed;
background-color: #333;
top: 20%; left: -200px;
min-width: 200px;
z-index: -1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover {
background-color:#2e2e2e;
}
这是我觉得棘手的地方。悬停在这里工作正常。但是当涉及到专注时,它就不起作用了。
#menu ul li:hover > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li:focus > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
希望你们能明白我在说什么:)
最佳答案
你可以不使用 tabindex,如下所示:
#menu ul li a:focus + ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
检查这个 fiddle https://jsfiddle.net/toz7n3ym/1/ )
OR 从 a 中删除 href,因为当您使用 href 时它关注 而不是
关于javascript - tabindex focus 使用 CSS 调用子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34868602/
如果每个元素都有自己的tabindex,如下所示: Link Option A Option B Option C Hello world Button 现在,我向 bu
例如,这是一个脚本: 所以,当用户按下 tab 并浏览六个文本框,到达最后一个然后按下 tab 时,它会转到第一个评论上方的内容,对吗?那么,如何让它再次从 tabindex="1"
$(document).on("keyup", function(e) { var code = e.which; var currentTabIndex = document.act
当提交按钮获得焦点时按 Tab 键,焦点应返回到 tabindex="1"。这是 HTML: 这是 JQuery: $("input").keydown(function (e) {
我们正在运行一个名为 Axe 的工具检查 HTML 页面的有效性和 508 合规性/可访问性。 此错误作为违规出现: Elements should not have tabindex greater
我有几个 LinearLayouts 包含在它们各自的 ScrollView 中,而 ScrollView 又包含在 ViewFlipper 中。奇怪的是,在某些布局中,一旦获得焦点,它就会自动从顶部
我有一个简单的窗口,其中嵌入了一个简单的复合控件。 (主窗口) First Second (复合控制) Third F
我刚刚把 two textbox(tabindex=0,2), one autocompletebox(tabindex=1) and one button(tabindex=3) 但在运行时自动完
WPF中的TabIndex和KeyboardNavigation.TabIndex有什么区别?什么时候使用每个? 最佳答案 @akjoshi在他的回答中包含了有关TabIndex的非常重要的信息,
我在一个文本框旁边有 2 个按钮,在这 2 个按钮后面还有另一个文本框。第一个文本框的 tabindex 为 1000,第一个按钮为 1001,第二个按钮为 1002。第二个文本框的 tabindex
如何在表单字段上设置 html 属性“tabindex”? 我的模板目前看起来像.. Email Address {{ form.email }} 最佳答案 选项卡索引是布局的一项功能
我有一个奇怪的行为:我有一个包含文本框和(简单)用户控件(文本框和按钮)的 MainWindow,但出于调试目的,我将其剥离为仅一个文本框。 当我使用文本框和用户控件而不设置 TabIndex 属性时
在我的 gwt 应用程序中,在某些屏幕上,我创建了一个带有输入表单的对话框。我希望能够使用 tabindex 属性,但只能在该对话框中使用。 (即:仅将该对话框的第一个字段循环到最后一个字段)现在,如
我正在使用 jQuery 自定义我自己的保管箱,但想知道如何将 tabindex 应用于它。 我尝试使用隐藏的选择焦点/模糊事件,但似乎不起作用。 我还尝试将 tabindex 属性应用于我的自定义保
我有一个带有字段的表单,其中一些字段可以隐藏。为了获得正确的可访问性,我使用 jQuery 添加 tabindex,仅添加到当前可见的元素: $(':input:visible').each(func
我有一个使用 jQuery UI 的对话框,上面有两个按钮。 对话框内部有一些表单元素,我可以使用 TAB 键进行切换。现在无法使用 TAB 键访问"is"按钮。接缝处没有 TabIndex。 我怎样
我在我的应用程序中使用 Angular JS。我在某些可点击元素上使用 tabindex 来支持应用程序的键盘用户。 我对 tabindex 的理解是,假设元素 A 的 tabindex = 1,元素
如果用户跳转到特定的选项卡索引,是否可以添加类?我想在用户选项卡到达特定索引时添加类,并在跳转到另一个索引时删除类?谢谢! 这里我想在选项卡聚焦于 tabindex=3 时添加事件类: Hello
如何为数字文本框设置标签索引..我的代码是.. $("#max_award_amount").kendoNumericTextBox({ min:0, max: 99999999.99
鉴于 浏览器有一个页面加载了带有 tabindex=1 的现有字段(称为 ef), 通过书签插入两个新字段(nf1 和 nf2) 第一次(不正确的行为)当鼠标单击 nf1 并随后单击一个选项卡时焦点的
我是一名优秀的程序员,十分优秀!