DOMANDA Menu pagina HTML navigabile con la tastiera

Pubblicità
M

michael92m

Utente Attivo
Messaggi
257
Reazioni
20
Punteggio
53
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?
 
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?
Clicca per espandere...

Devi utilizzare javascript per gestire gli eventi della tastiera. Usa jquery che ti semplifichi la vita :)
 
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ù?
 
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
 
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.
 
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.
Clicca per espandere...

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
Clicca per espandere...
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!
 
Ibernato ha detto:
Puoi usare anche bootstrap che ha già tutto fatto e non devi impazzire.
Clicca per espandere...
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.
 
Pubblicità
Pubblicità
Indietro
Top