Sintassi

Significato dei valori principali:

• auto: (default) Il browser determina automaticamente la direzione del focus in base alla struttura DOM.

• none: Disabilita la navigazione verso l’alto da questo elemento.

• selector ID o nome: Specifica un elemento preciso da focalizzare. Es: nav-up: #box1;

• inherit: L’elemento eredita il valore dal genitore.

⚠️ Nota sul supporto:
Anche nav-up, come tutte le proprietà della serie nav-*, non è supportata nei browser desktop comuni. È utilizzata principalmente in ambienti embedded (es. Smart TV) o browser personalizzati con supporto per navigazione direzionale.

Esempio proprietà: nav-up

Codice Esempio: nav-up

CODE: CSS

1. .nav-up-example {

2.   width: 250px;

3.   height: 60px;

4.   margin: 20px auto;

5.   text-align: center;

6.   line-height: 60px;

7.   background-color: #f8bbd0;

8.   border: 2px solid #c2185b;

9.   border-radius: 8px;

10.   font-size: 18px;

11. }

13. #up1 {

14.   nav-up: none;

15. }

17. #up2 {

18.   nav-up: #up1;

19. }

21. #up3 {

22.   nav-up: #up2;

23. }

Contenuto Esempio: nav-up

  
  <style>
    .nav-up-example {
      width: 250px;
      height: 60px;
      margin: 20px auto;
      text-align: center;
      line-height: 60px;
      background-color: #f8bbd0;
      border: 2px solid #c2185b;
      border-radius: 8px;
      font-size: 18px;
    }

    #up1 {
      nav-up: none;
    }

    #up2 {
      nav-up: #up1;
    }

    #up3 {
      nav-up: #up2;
    }
  </style>

  <div id="up1" class="nav-up-example" tabindex="0">Elemento 1</div>
  <div id="up2" class="nav-up-example" tabindex="0">Elemento 2</div>
  <div id="up3" class="nav-up-example" tabindex="0">Elemento 3</div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser