Il primo programma JS

Andremo a realizzare insieme un programma jQuery all'interno di una pagina web per gestire un menu che scorre lateralmente dentro e fuori dalla pagina.

Il risultato potete visualizzarlo su questa pagina:

• Cliccate sull'icona (ad hamburger) del menu. Viene visualizzato il menu facendo scorrere il corpo della pagina a destra.
• Cliccate sull'icona a forma di X. Il menu si chiude riportando il corpo della pagina nella sua posizione.

Lo scheletro

Iniziamo a costruire l'animazione del menu partendo dalla pagina "base".

Se guardiamo l'HTML questo include due tag script che caricano, il primo jQuery, ed il secondo la nostra applicazione (in verità JsBin non li usa, ma lasciamoli ugualmente).

Ora prepariamo lo scheletro per il nostro primo programma JS.

1. Nel pannello Javascript, utilizzare la parola chiave var per creare una funzione denominata main.

   var main = function() {
   
   };
   

2. Di seguito, utilizzate jQuery per lanciare la funzione main appena la pagina è completamente caricata.

   $(document).ready(main);
   

Al momento non succede ancora nulla.

Selezioniamo un elemento

All'interno della funzione main utilizziamo jQuery per selezionare un elemento della pagina.

1. Utilizza la funzione jQuery $()
2. Utilizza il selettore CSS per individuare l'elemento con classe icon-menu, cioè scrivi '.icon-menu' all'interno di $()*

Il codice risultante della funzione mail dovrebbe essere come segue:

var main = function() {
  $('.icon-menu');
};

Abbiamo solo selezionato l'elemento, non succede ancora niente.

Attendiamo l'evento click

Vogliamo ora rispondere all'azione di un utente che clicca sull'elemento che abbiamo selezionato.

1. Dopo il codice $('.icon-menu') aggiungi il metodo .click().

Sarà all'interno di quel metodo tra la parentesi aperta e quella chiusa che inseriremo una funzione e inizieremo a fare accadere qualcosa.

Apertura del menu

Gestiamo ora l'apertura del menu.

Aggiungiamo una funzione all'interno del metodo .click() che diventa .click(function() { ... })

Al posto dei puntini andremo a inserire il nostro codice come segue:

• Selezioniamo l'elemento con classe menu $('.menu') e animiamolo con il metodo .animate()

Al momento il menu è 285 pixel oltre il margine sinistro della pagina. Ecco perchè non è visibile.

• All'interno del metodo .animate() (tra le parentesi) inseriamo i dati per fare sì che si sposti in posizione { left: '0px'} e impostiamo un tempo di esecuzione dell'animazione, il secondo parametro, a 200 millisecondi , 200;.

Per contro, dobbiamo spostare il corpo della pagina body a destra

• Selezioniamo l'elemento con tag body $('body') ed eseguiamo anche su di esso il metodo .animate()
• All'interno del metodo animate inseriamo i dati per fare sì che il corpo della pagina si sposti in posizione { left: '285px'}, sempre il 200 millisecondi (aggiungendo anche) , 200;.

Il codice risultante apparirà come riportato qui nella soluzione.

Ora provate a cliccare sull'icona ad hamburger per verificare che il menu si "apra".

Chiusura del menu

Per gestire la chiusura del menu occorre aggiungere anche il codice seguente all'interno della funzione principale. In modo analogo a quanto abbiamo fatto per icon-menu procedere come segue:

• Selezioniamo l'elemento con classe icon-close $('.icon-close')
• Invochiamo su di esso il metodo .click() e al suo interno definiamo la "solita" function() { }

Ora prepariamoci a inserire anche qui i due comandi animate che provvedono a fare l'operazione inversa rispetto all'apertura del menu. All'interno della function (tra le parentesi graffe) facciamo come segue:

• Selezioniamo l'elemento di classe menu $('.menu') per riposizionarlo, tramite il metodo .animate() in posizione {left: '-285px'} in 200 millisecondi , 200
• Di seguito selezioniamo anche l'elemento con tag body $('body') per riportarlo, tramite il metodo .animate() in posizione {left: '0px'} in 200 millisecondi ,200.

Dopo aver completato il codice realizzato in questo passo all'interno della funzione main il programma completo dovrebbe risultare come qui nella soluzione.

Benissimo, operazione conclusa. Funziona? Provatelo!

Se vi siete persi, non c'è problema, guardate qui il codice completo.

Soluzioni

Apertura del menu (soluzione)

var main = function() {
  $('.icon-menu').click(function() {
      $('.menu').animate({ left: '0px'}, 200);
      $('body').animate({ left: '285px'}, 200);
  });
};

Chiusura del menu (soluzione)

  $('.icon-close').click(function() {
    $('.menu').animate({ left: "-285px" }, 200);
    $('body').animate({ left: "0px" }, 200);
  });