Рубрики

CSS | свойство nav-left

CSS свойство nav-left используется для навигации по веб-странице с помощью клавиши навигации с клавиатуры. Этот nav-left определяет, где фокусироваться, когда пользователь перемещается с помощью навигационной клавиши. Nav-left можно использовать со свойствами nav-right , nav-up и nav-down .

Синтаксис:

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

Атрибут:

  • auto: это значение по умолчанию, в котором браузеры определяют, по какому элементу перемещаться.
  • <id>: определяет идентификатор для навигации.
  • <target-name>: определяет цель для навигации.
  • Initial: это значение по умолчанию.
  • наследовать: он наследует от своего родительского элемента.

Примечание. Это свойство поддерживает только Opera 12.0.
Ниже приведен пример свойства CSS nav-left :

Пример: 1

<!DOCTYPE html>

<html>

  

<head>

    <title>CSS nav-left Property</title>

    <link rel="stylesheet" href=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>

        button {

            position: absolute;

        }

          

        h1 {

            color: green;

        }

          

        button {

            background-color: #80ff80;

            nav-right: auto;

            nav-left: auto;

            nav-down: auto;

            nav-up: auto;

            border-radius: 25px;

            font-size: 20px;

        }

          

        #Geeks1 {

            top: 35%;

            left: 43%;

            nav-index: 1;

        }

          

        #Geeks2 {

            top: 50%;

            left: 65%;

            nav-index: 2;

        }

          

        #Geeks3 {

            top: 65%;

            left: 43%;

            nav-index: 3;

        }

          

        #Geeks4 {

            top: 50%;

            left: 20%;

            nav-index: 4;

        }

    </style>

</head>

  

<body>

    <center>

        <h1>GeeksforGeeks</h1>

        <h4>CSS nav-left Property</h4>

        <p>

            Press the <samp>Shift</samp

          key while navigating with the arrow keys.

        </p>

    </center>

    <button id="Geeks1">Button

      <i class="fa fa-arrow-circle-up"></i>

    </button>

    <button id="Geeks2">Button

      <i class="fa fa-arrow-circle-right"></i>

    </button>

    <button id="Geeks3">Button

      <i class="fa fa-arrow-circle-down"></i>

    </button>

    <button id="Geeks4">

      <i class="fa fa-arrow-circle-left"></i>

      Button

    </button>

  

    <div>

  

    </div>

</body>

  

</html>

Выход:

Поддерживаемые браузеры . Основные браузеры не поддерживают CSS nav-left свойство .

Рекомендуемые посты:

CSS | свойство nav-left

0.00 (0%) 0 votes