CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS nav-down

La proprietà CSS3 nav-down controlla la navigazione verticale verso il basso

La proprietà nav-down in CSS3 viene usata per personalizzare la navigazione tra elementi tramite tastiera o controller direzionali. È utile in ambienti come interfacce TV, console e applicazioni accessibili. Indica quale elemento riceverà il focus premendo la freccia giù.

Sintassi

nav-down: valore;

Significato dei valori principali:

  • auto: (valore predefinito) Il browser decide il comportamento in base al flusso del documento.

  • none: Disattiva la navigazione verso il basso da questo elemento.

  • selector ID o nome: Indica esplicitamente l’ID o il nome dell’elemento da focalizzare. Esempio: nav-down: #elemento2;

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


⚠️ Nota sul supporto:
Anche se è specificata in CSS3, il supporto di nav-down nei browser è molto limitato e generalmente non supportato nei principali browser desktop. È pensata per dispositivi con ambienti utente personalizzati (smart TV, WebKit per TV, ecc.).

In pratica, il comportamento di nav-down è simile a quello di altre proprietà come tabindex, ma è pensato per specificare come il focus deve essere spostato quando si preme la freccia giù (freccia verso il basso) sulla tastiera o con un controller direzionale.


Esempio proprietà: nav-down


Codice Esempio: nav-down

CODE: CSSpreleva codice
  1. .nav-example {
  2.   width: 300px;
  3.   height: 60px;
  4.   margin: 20px auto;
  5.   text-align: center;
  6.   line-height: 60px;
  7.   background-color: #c5cae9;
  8.   border: 2px solid #3f51b5;
  9.   border-radius: 8px;
  10.   font-size: 18px;
  11. }
  12.  
  13. #box1 {
  14.   nav-down: #box2;
  15. }
  16.  
  17. #box2 {
  18.   nav-down: #box3;
  19. }
  20.  
  21. #box3 {
  22.   nav-down: none;
  23. }

Contenuto Esempio: nav-down

Esempio di utilizzo di nav-down

In questo esempio, la pressione del tasto 'giù' sulla tastiera sposta il focus da un box all'altro:



CSS e HTML per la navigazione direzionale:

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

    #box1 {
      nav-down: #box2;
    }

    #box2 {
      nav-down: #box3;
    }

    #box3 {
      nav-down: none;
    }
  </style>

  <div id="box1" class="nav-example" tabindex="0">Box 1 (Premi ↓)</div>
  <div id="box2" class="nav-example" tabindex="0">Box 2 (Premi ↓)</div>
  <div id="box3" class="nav-example" tabindex="0">Box 3 (fine)</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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies