DOMANDA Menu pagina HTML navigabile con la tastiera

michael92m · 1 Maggio 2018

Buonasera,
avrei necessità di inserire in un div di una pagina html un menù navigabile esclusivamente con le frecce destra e sinistra della tastiera.
Le varie voci devono comparire una alla volta e quando viene selezionata quella desiderata, questa deve poi indirizzare ad un' altra pagina alla pressione del tasto invio.
A dirlo sembra molto semplice, ma avendo limitate conoscenze in materia non riesco a concludere nulla. idee?

Ibernato · 1 Maggio 2018

michael92m ha detto:
Buonasera,
avrei necessità di inserire in un div di una pagina html un menù navigabile esclusivamente con le frecce destra e sinistra della tastiera.
Le varie voci devono comparire una alla volta e quando viene selezionata quella desiderata, questa deve poi indirizzare ad un' altra pagina alla pressione del tasto invio.
A dirlo sembra molto semplice, ma avendo limitate conoscenze in materia non riesco a concludere nulla. idee?

Devi utilizzare javascript per gestire gli eventi della tastiera. Usa jquery che ti semplifichi la vita :)

michael92m · 2 Maggio 2018

Ciao! Grazie della risposta :)
Per la tastiera ok, ho già fatto qualcosa di simile.
Per avere queste "voci" che scorrono e che indirizzano alle varie pagine invece riesci a darmi qualche dritta in più?

Mursey · 2 Maggio 2018

michael92m ha detto:
Per avere queste "voci" che scorrono e che indirizzano alle varie pagine invece riesci a darmi qualche dritta in più?

https://deliciousthemes.com/create-a-drop-down-navigation-menu-with-html5-and-css3/

michael92m · 3 Maggio 2018

Se qualcuno ha voglia di darci un'occhiata, con qualche "sotterfugio" sono riuscito ad arrangiare una bozza del risultato che vorrei ottenere :

HTML:

<!DOCTYPE html>
<html >
    <head>
    <meta charset="UTF-8">
        <title>Home</title>
        <link href="home_style.css" rel="stylesheet" />
        
    </head>

    <body style="background-color:black">
        
    <div id="mod_select">
    <form>
  <input type="radio" name="fancy" value="slide1" id="slide1"autofocus />
  <input type="radio" name="fancy" value="slide2" id="slide2" />
  <input type="radio" name="fancy" value="slide3" id="slide3" />
  <input type="radio" name="fancy" value="slide4" id="slide4" />
  <label for="slide1">PAGINA 1</label>
  <label for="slide2">PAGINA 2</label>
  <label for="slide3">PAGINA 3</label>
  <label for="slide4">PAGINA 4</label>
</form>
        
    </div>
    

    </body>
</html>

CSS:

    /*div per selezione modalità*/
#mod_select{   
    /*posizione div */
    position:fixed;
    width:20%;
    height:15%;
    bottom:38%;
    left:18%;
    z-index:1;
    /*proprietà testo*/
    color:white;
    background:grey;
    
    }
    
    /*impostazioni carousel*/
    
    label {
  -webkit-transition: -webkit-transform 400ms ease-out;
  transition: transform 400ms ease-out;
  display: inline-block;
  min-height: 100%;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 2;
  font-size: 5em;
 
}

form {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  white-space: nowrap;
}

input {
    position: absolute;
    opacity:0;
    }

input:focus ~ .keys { opacity: 0.8; }

input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4) { z-index: 0; }

input:nth-of-type(1):checked ~ label {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

input:nth-of-type(2):checked ~ label {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

input:nth-of-type(3):checked ~ label {
  -webkit-transform: translate3d(-200%, 0, 0);
  transform: translate3d(-200%, 0, 0);
}

input:nth-of-type(4):checked ~ label {
  -webkit-transform: translate3d(-300%, 0, 0);
  transform: translate3d(-300%, 0, 0);
}

Quello che cerco però è una soluzione "più elegante" , che mi fornisca lo stesso risultato e che permetta di aprire la pagina corrispondente alla voce visualizzata premendo invio

Mursey · 3 Maggio 2018

HTML:

<!DOCTYPE html>
<html >
    <head>
        <title>Home</title>
        <link href="home_style.css" rel="stylesheet" />
    </head>
    <body style="background-color:black">
        <div id="mod_select">
            <label id="mod_label"></label>
        </div>
        <script>
            var pages = [ 'PAGINA 1', 'PAGINA 2', 'PAGINA 3', 'PAGINA 4' ];
          
            var pageIndex = 0;
          
            var body = document.querySelector('body');
            body.onkeydown = function (e) {
                if ( !e.metaKey ) {
                    e.preventDefault();
                }
                if (e.key == 'ArrowRight') {
                    pageIndex++;
                    if ((pageIndex + 1) > pages.length) {
                        pageIndex = 0;
                    }
                    document.getElementById('mod_label').innerHTML = pages[pageIndex];
                }
                if (e.key == 'ArrowLeft') {
                    pageIndex--;
                    if (pageIndex == -1) {
                        pageIndex = pages.length - 1;
                    }
                    document.getElementById('mod_label').innerHTML = pages[pageIndex];
                }
                if (e.key == 'Enter') {
                    alert('Apri pagina ' + (pageIndex + 1));
                }
            };
          
            document.getElementById('mod_label').innerHTML = pages[pageIndex];
        </script>
    </body>
</html>

Lasciando il tuo css puoi sostiture il file HTML (fai una copia del tuo originale :-P) con questo.
Un pò grezzo e senza l'effetto di translate ma è solo per farti vedere come puoi implementarlo in Javascript.

Ibernato · 3 Maggio 2018

Puoi usare anche bootstrap che ha già tutto fatto e non devi impazzire.
Devi solo gestire gli eventi poi

michael92m · 4 Maggio 2018

Mursey ha detto:

HTML:

<!DOCTYPE html>
<html >
    <head>
        <title>Home</title>
        <link href="home_style.css" rel="stylesheet" />
    </head>
    <body style="background-color:black">
        <div id="mod_select">
            <label id="mod_label"></label>
        </div>
        <script>
            var pages = [ 'PAGINA 1', 'PAGINA 2', 'PAGINA 3', 'PAGINA 4' ];
         
            var pageIndex = 0;
         
            var body = document.querySelector('body');
            body.onkeydown = function (e) {
                if ( !e.metaKey ) {
                    e.preventDefault();
                }
                if (e.key == 'ArrowRight') {
                    pageIndex++;
                    if ((pageIndex + 1) > pages.length) {
                        pageIndex = 0;
                    }
                    document.getElementById('mod_label').innerHTML = pages[pageIndex];
                }
                if (e.key == 'ArrowLeft') {
                    pageIndex--;
                    if (pageIndex == -1) {
                        pageIndex = pages.length - 1;
                    }
                    document.getElementById('mod_label').innerHTML = pages[pageIndex];
                }
                if (e.key == 'Enter') {
                    alert('Apri pagina ' + (pageIndex + 1));
                }
            };
         
            document.getElementById('mod_label').innerHTML = pages[pageIndex];
        </script>
    </body>
</html>

Lasciando il tuo css puoi sostiture il file HTML (fai una copia del tuo originale :-P) con questo.
Un pò grezzo e senza l'effetto di translate ma è solo per farti vedere come puoi implementarlo in Javascript.

Non so che dire, mi hai letto nel pensiero ! Avevo cominciato a scrivere la stessa identica funzione, ma mancava all'appello qualche metodo e non ero riuscito a completarla:varie13:

Ibernato ha detto:
Puoi usare anche bootstrap che ha già tutto fatto e non devi impazzire.
Devi solo gestire gli eventi poi

Avevo provato anche quella strada, ma con boostrap mi ero un po' perso sinceramente ahah :blush:

Aggiungo le transizioni e dovrei essere a posto. Grazie mille!

Mursey · 4 Maggio 2018

Ibernato ha detto:
Puoi usare anche bootstrap che ha già tutto fatto e non devi impazzire.

Concordo, però secondo me un pò di pratica con Javascript non fa mai male.
Meglio avere una discreta base e poi usare jQuery o altro per facilitarti la vita, ma almeno le cose a mano bene o male le sai fare.

Secondo me nello studio meglio evitare librerie ma usarle solo dopo quando si hanno le conoscenze.

Cerca

DOMANDA Menu pagina HTML navigabile con la tastiera

michael92m

Utente Attivo

Ibernato

michael92m

Utente Attivo

Mursey

Super Moderatore

michael92m

Utente Attivo

Mursey

Super Moderatore

Ibernato

michael92m

Utente Attivo

Mursey

Super Moderatore

Entra