css властивість nav-index


Властивість nav-index вказує послідовний порядок навігації (коли Ви натискаєте кнопку "Tab") для елемента.

автор: Svitlana

Нотатка

Увага! Ця властивість підтримується лише браузером Opera 11.5-12, в усіх інших браузерах (навіть пізніших версіях Opera) вона не працює!

автор: Svitlana

Синтаксис

nav-index: auto|number|initial|inherit;

Властивість nav-index може отримувати 4 значень:

auto

Значення без задання. Порядок табуляції елементу присвоюється браузером

автор: Svitlana

number

Вказує порядок табуляції для елемента. 1 означає, що перший

автор: Svitlana

initial

Встановлює властивість у значення без задання

автор: Svitlana

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

Значення без задання: auto
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.navIndex=2

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft Internet Explorer
nav-index Не підтримується Не підтримується Не підтримується 11.5 – 12.0 Не підтримується

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

nav-index задає власний порядок обходу фокуса (аналог tabindex у CSS): кнопки нумеруються 1–4 незалежно від розмітки. Родину nav-* реалізовували лише стара Opera і ТВ-браузери; у сучасних переглядачах фокус ходить лише клавішею Tab, тож демо ілюструє синтаксис.

HTML

<div class="pad">
    <button id="b1">Кнопка 1</button>
    <button id="b2">Кнопка 2</button>
    <button id="b3">Кнопка 3</button>
    <button id="b4">Кнопка 4</button>
</div>

CSS

.pad {
    position: relative;
    height: 200px;
}

button {
    position: absolute;
}

button#b1 { top: 10%; left: 25%; nav-index: 1; nav-right: #b2; nav-left: #b4; nav-down: #b2; nav-up: #b4; }
button#b2 { top: 40%; left: 50%; nav-index: 2; nav-right: #b3; nav-left: #b1; nav-down: #b3; nav-up: #b1; }
button#b3 { top: 70%; left: 25%; nav-index: 3; nav-right: #b4; nav-left: #b2; nav-down: #b4; nav-up: #b2; }
button#b4 { top: 40%; left: 0;   nav-index: 4; nav-right: #b1; nav-left: #b3; nav-down: #b1; nav-up: #b3; }
автор: Svitlana

Приклад використання властивості

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід