HTML и CSS | Атрибут tabindex и панели навигации

Опубликовано: 1 Марта, 2022

Атрибут tabindex определяет порядок табуляции элемента. Кнопка «вкладка» используется для навигации. Атрибут содержимого tabindex позволяет пользователям контролировать, должен ли элемент быть фокусируемым, должен ли он быть достижимым с использованием последовательной навигации по фокусу и каков должен быть относительный порядок элемента для целей последовательной навигации по фокусу.
Синтаксис:

 элемент tabindex = "число"

Атрибут:

number : задает порядок «табуляции», когда клавиша табуляции используется для навигации.

Example :

<div tabindex = "0"><p>GFG Article 1</P></div>
<div tabindex = "1"><p>GFG Article 2</P></div>
<div tabindex = "2"><p>GFG Article 3</P></div>

В приведенном выше примере, когда кнопка табуляции используется для навигации по элементам, сначала будет сфокусирована статья 1 , а затем статья 2 и статья 3 .

Примечание. Если значение tabindex равно -1, фокусировка на нем невозможна. Например, ссылка ниже не будет фокусироваться при использовании клавиш табуляции для перехода.
Пример :

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Панели навигации:
Панели навигации важны для любых веб-сайтов. Это блоки, связанные со ссылками на разные страницы веб-сайтов.

Есть два типа меню навигации:

Вертикальные панели навигации
Горизонтальные панели навигации

Vertical Nav bars: Vertical bar menu displays one above another.
Examples :

Code :

<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 20%;
        background-color: white;
        position: fixed;
        height: 25%;
        overflow: hidden;
    }
      
    li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
      
    .hme {
        background-color: #4CB96B;
    }
</style>
  
<body>
    <ul>
        <li><a class="hme" href="#" tabindex="2">Home</a></li>
        <li><a href="#" tabindex="1">Blog</a></li>
        <li><a class="hme" href="#" tabindex="4">About Us</a></li>
        <li><a href="#a" tabindex="3">Contact Us</a></li>
    </ul>
</body>

Horizontal Nav bars:
Horizontal Nav bars menu displays one followed by other or side by side.
Examples :

Code :

<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: white;
        height: 25%;
        overflow: hidden;
    }
      
    li {
        float: left;
    }
      
    li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
      
    .hme {
        background-color: #4CB96B
    }
</style>
  
<body>
    <ul>
        <li><a class="hme" href="#" tabindex="1">Home</a></li>
        <li><a href="#" tabindex="2">Blog</a></li>
        <li><a class="hme" href="#" tabindex="3">About Us</a></li>
        <li><a href="#" tabindex="4">Contact Us</a></li>
    </ul>
</body>

HTML Web технологии CSS

HTML и CSS | Атрибут tabindex и панели навигации

РЕКОМЕНДУЕМЫЕ СТАТЬИ