Я создаю вертикальную навигацию, которая размещается в левой части страницы. и навигация вызывает подменю при наведении. но проблема здесь в том, что я хочу создать эту навигацию, которая может быть отвечать 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;
}
Вот где я нахожу сложным. Hover здесь работает нормально. но когда дело доходит до фокусировки, это не работает.
#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;
}
Надеюсь, вы, ребята, понимаете, о чем я говорю :)