使用 CSS 调用子菜单的 tabindex 焦点
tabindex focus to call submenu using 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 时它关注 而不是
检查这个 fiddle https://jsfiddle.net/toz7n3ym/
我正在构建一个位于页面左侧的垂直导航。 导航通过悬停调用子菜单。 但这里的问题是我想建立这个导航可以 按 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 时它关注 而不是