2017-10-19 40 views
2

似乎無法獲得下拉鍊接以顯示(聚焦)時使用鍵盤進行切換。嘗試了幾種不同的風格,但沒有運氣。任何幫助,將不勝感激。下拉菜單鏈接顯示在焦點上

body { 
 
\t background: #005bbb; 
 
\t font: 14px Sofia,Arial,sans-serif; 
 
    color: #444; 
 
    height: 100%; 
 
    line-height: 1;} 
 

 
.nav-global a {text-decoration: none} 
 

 
.nav-global ul li { 
 
    color: #005bbb; 
 
    float: left; 
 
\t display: inline; 
 
\t position: relative; 
 
\t margin: 0; 
 
\t width: 235px} 
 
\t 
 
.nav-global ul li:hover { 
 
\t background-color: #003e51;} 
 

 
\t 
 
/* style the first level slightly different */ 
 

 
.nav-global > ul > li { 
 
\t margin: 0; 
 
\t width: auto; 
 
\t background: #fff; 
 
\t color: #005bbb} 
 

 
.nav-global ul li a { 
 
\t color: #005bbb; 
 
\t padding: 12px 16px 14px 16px; 
 
\t display: block; 
 
\t font: 15px Sofia Bold, "Trebuchet MS", sans-serif;} 
 
\t 
 
.nav-global ul li a:hover { 
 
\t color: #fff} 
 
\t 
 
.nav-global > ul > li > a {} 
 

 
.nav-global li:hover > a {color: #fff} \t 
 
\t 
 
\t \t 
 
/* ----------------------------------------------- secondary nav ----------------------------------------------- */ 
 

 

 

 

 
.nav-global ul li ul { 
 
\t position: absolute; 
 
\t max-height: 0; 
 
\t overflow: hidden; 
 
\t margin: 0; 
 
\t opacity: 0;} 
 

 
.nav-global ul li:hover > ul { 
 
\t max-height: 1000px; 
 
\t overflow: visible; 
 
\t opacity: 1;} 
 
\t 
 
.nav-global ul li ul li { 
 
\t background-color: #003e51;} 
 
\t 
 
.nav-global ul li ul li a { 
 
\t color: #fff; 
 
\t font: 13px Sofia, "Trebuchet MS", sans-serif; 
 
\t padding: 0; 
 
\t line-height: 30px; 
 
\t text-indent: 15px;} 
 

 

 
.nav-global ul li ul li a:hover { 
 
\t background: #002935;} 
 

 
.nav-global ul li ul li:first-child { 
 
\t padding-top: 10px} 
 

 
.nav-global ul li ul li:last-child { 
 
\t padding-bottom: 10px} 
 
.
<div class="nav-main"> 
 
<nav class="nav-global"> 
 

 
    <ul> 
 
\t  <li><a href="/findmaterials" class="find">Find Materials</a> 
 
    \t 
 
     <ul> 
 
    \t \t <li><a href="/findmaterials/everything">Everything</a></li> 
 
\t \t \t <li><a href="http://catalog.lib.buffalo.edu/">Catalog</a></li> 
 
\t \t \t <li><a href="/findmaterials/databases">Databases</a></li> 
 
\t \t \t <li><a href="/findmaterials/ebooks">E-Books</a></li> 
 
\t \t \t <li><a href="http://ll3md4hy6n.search.serialssolutions.com">E-Journals</a></li> 
 
\t \t \t <li><a href="/reserve">Course Reserve</a></li> 
 
\t \t \t <li><a href="/off-campus">Off Campus Access</a></li> 
 
    \t </ul> 
 
    </li> 
 
      </ul> 
 
    
 
    
 
    
 
    </nav> 
 
    </div> 
 
=

我試着用這樣的代碼爲 「焦點」,但不工作:

.nav-global ul li:focus > ul { 
max-height: 1000px; 
overflow: visible; 
opacity: 1;} 
+1

請嘗試創建一個[最小的,完整的和可驗證的示例](https://stackoverflow.com/help/mcve)。簡單地鏈接到您的網站是不夠的。 – jfeferman

+0

這不是我的網站。只是導航本身。沒有其他的。 – closeyetfar

+0

瞭解,但您仍然應該能夠生成一個最簡單的示例並提供代碼,以便其他人可以幫助您。 – jfeferman

回答

0

添加tabindex="0"nav-global:focus選擇將工作。在下面的代碼片段中,我應用此更改並將所有子菜單鏈接添加到tabindex訂單。請參閱this technique for WCAG 2.0

請注意,一旦您打開帶有標籤鍵的菜單,您的下一個標籤將關閉菜單,因爲nav-global失去焦點,如對您的問題的評論所示。如果鼠標懸停在菜單上,它將保持打開狀態,並且您可以鍵入TAB以查看tabindex中的每個鏈接如何獲得焦點。

我建議用javascript控制菜單的可見性,所以你不要依賴css來保持它的狀態。 Js可以讓您更好地控制用戶體驗。例如,添加一個密鑰管理器來在輸入ESC時關閉菜單。

下面的代碼:

body { 
 
    background: #005bbb; 
 
    font: 14px Sofia, Arial, sans-serif; 
 
    color: #444; 
 
    height: 100%; 
 
    line-height: 1; 
 
} 
 

 
.nav-global a { 
 
    text-decoration: none 
 
} 
 

 
.nav-global ul li { 
 
    color: #005bbb; 
 
    float: left; 
 
    display: inline; 
 
    position: relative; 
 
    margin: 0; 
 
    width: 235px 
 
} 
 

 
.nav-global ul li:hover { 
 
    background-color: #003e51; 
 
} 
 

 

 
/* style the first level slightly different */ 
 

 
.nav-global>ul>li { 
 
    margin: 0; 
 
    width: auto; 
 
    background: #fff; 
 
    color: #005bbb 
 
} 
 

 
.nav-global ul li a { 
 
    color: #005bbb; 
 
    padding: 12px 16px 14px 16px; 
 
    display: block; 
 
    font: 15px Sofia Bold, "Trebuchet MS", sans-serif; 
 
} 
 

 
.nav-global ul li a:hover { 
 
    color: #fff 
 
} 
 

 
.nav-global>ul>li>a {} 
 

 
.nav-global li:hover>a { 
 
    color: #fff 
 
} 
 

 

 
/* ----------------------------------------------- secondary nav ----------------------------------------------- */ 
 

 
.nav-global:focus>ul>li>ul { 
 
    max-height: 1000px; 
 
    overflow: visible; 
 
    opacity: 1; 
 
} 
 

 
.nav-global>ul>li:focus>ul { 
 
    max-height: 1000px; 
 
    overflow: visible; 
 
    opacity: 1; 
 
} 
 

 
.nav-global:focus>ul>li { 
 
    background-color: #003e51; 
 
} 
 

 
.nav-global:focus>ul>li>a { 
 
    color: white; 
 
} 
 

 
.nav-global ul li ul { 
 
    position: absolute; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    opacity: 0; 
 
} 
 

 
.nav-global ul li:hover>ul { 
 
    max-height: 1000px; 
 
    overflow: visible; 
 
    opacity: 1; 
 
} 
 

 
.nav-global ul li ul li { 
 
    background-color: #003e51; 
 
} 
 

 
.nav-global ul li ul li a { 
 
    color: #fff; 
 
    font: 13px Sofia, "Trebuchet MS", sans-serif; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    text-indent: 15px; 
 
} 
 

 
.nav-global ul li ul li a:hover { 
 
    background: #002935; 
 
} 
 

 
.nav-global ul li ul li:first-child { 
 
    padding-top: 10px 
 
} 
 

 
.nav-global ul li ul li:last-child { 
 
    padding-bottom: 10px 
 
} 
 

 
.
<div class="nav-main"> 
 
    <nav class="nav-global" tabindex="0"> 
 

 
    <ul> 
 
     <li> 
 
     <a href="/findmaterials" class="find" tabindex="-1">Find Materials</a> 
 

 
     <ul> 
 
      <li><a href="/findmaterials/everything" tabindex="0">Everything</a></li> 
 
      <li><a href="http://catalog.lib.buffalo.edu/" tabindex="0">Catalog</a></li> 
 
      <li><a href="/findmaterials/databases" tabindex="0">Databases</a></li> 
 
      <li><a href="/findmaterials/ebooks" tabindex="0">E-Books</a></li> 
 
      <li><a href="http://ll3md4hy6n.search.serialssolutions.com" tabindex="0">E-Journals</a></li> 
 
      <li><a href="/reserve" tabindex="0">Course Reserve</a></li> 
 
      <li><a href="/off-campus" tabindex="0">Off Campus Access</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 

 

 

 
    </nav> 
 
</div>

+0

以下是我想要導航所做的:https://youtu.be/hDl-3JA8mJ0 我需要能夠選中下拉列表中的所有鏈接。似乎這是使用JavaScript。謝謝您的幫助。我會繼續努力的。 – closeyetfar

+0

我相信你需要一個js解決方案。按照您的菜單結構化菜單項,並使用tabindex =「0」'將菜單項包含在tabindex順序中。你可以使用'onmouseover'和'onfocus'來打開菜單。除非採取特定行動,否則保持菜單打開,例如當選擇菜單項時,當鍵入ESC時,當用戶在菜單外單擊時。由於tabindex項目在DOM中是按順序排列的,因此菜單應該和您的視頻一樣。要用js創建菜單,請參考[https://www.w3schools.com/howto/howto_js_dropdown.asp](https://www.w3schools.com/howto/howto_js_dropdown.asp) – jfeferman