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

Властивість nav-left вказує, де здійснювати навігацію за допомогою клавіші зі стрілкою "Ліворуч".

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

nav-left: auto|id|target-name|initial|inherit;

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

auto

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

автор: Svitlana

правити

id

Визначає ідентифікатор елемента для навігації

автор: Svitlana

правити

target-name

Задає цільової фрейм для навігації

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
nav-left	Не підтримується	Не підтримується	Не підтримується	11.5 – 12.0	Не підтримується

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

Приклади

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

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

.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; }

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

<hr>

<div class="wrapper">
  <button id="b1">Button 1</button>
  <button id="b2">Button 2</button>
  <button id="b3">Button 3</button>
  <button id="b4">Button 4</button>
</div>

body {
  line-height: 1.5;
  font-size: 18px;
  color: #444;
  font-family: sans-serif;
}

button {
    position: absolute;
}

button#b1 {
    top: 25%; left: 45%;
    nav-index: 1;
    nav-right: #b2; nav-left: #b4;
    nav-down: #b2; nav-up: #b4;
}

button#b2 {
    top: 45%; left: 75%;
    nav-index: 2;
    nav-right: #b3; nav-left: #b1;
    nav-down: #b3; nav-up: #b1;
}

button#b3 {
    top: 75%; left: 45%;
    nav-index: 3;
    nav-right: #b4; nav-left: #b2;
    nav-down: #b4; nav-up: #b2;
}

button#b4 {
    top: 45%; left: 15%;
    nav-index: 4;
    nav-right: #b1; nav-left: #b3;
    nav-down: #b1; nav-up: #b3;
}