creare un menu a comparsa

Creare un menu a comparsa – Funzioni HTML&JS

Hai bisogno di creare un menu a comparsa da inserire nella parte alta del tuo sito? Devi realizzare un pulsante con un menu nascosto, che al click visualizza le pagine del tuo sito? Devi inserire un menu a comparsa come quello per i dispositivi mobili da aggiungere all’header (o toolbar) del tuo sito ma non sai come fare?

Programmare un menu a comparsa per un sito

Nella seguente guida spiegheremo come realizzare e programmare un pulsante da cui appaia un menu nascosto nel tuo sito, attraverso un semplice click del mouse su tale pulsante aprirà un nuovo pannello con tutte le pagine del sito interessate.

Per procedere alla creazione andremo ad implementare dei codici JQuery programmati per azionare un pulsante (button) HTML. Non è necessario conoscere il linguaggio JavaScript/JQuery per continuare, dato che il codice va esclusivamente incollato nella tua pagina web, ma consiglio un minimo di conoscenza di base dell’HTML (e CSS preferibile) per sapere come integrarlo e personalizzarlo.

Se non conosci l’HTML e il CSS ti consiglio di seguire il nostro rapido corso per principianti.

Realizzare un tasto con un menu a comparsa si rivela molto utile da implementare su dispositivi mobili, anche se a spazio ridotto. Potresti visualizzarlo proprio ora se stai visitando BytePost da uno smartphone o tablet.

Procedura

Qui di seguito ti spiego passo passo cosa fare per integrare un menu a comparsa nella toolbar o header della tua pagina HTML. La posizione puoi deciderla e cambiarla in qualsiasi momento, in quanto ti basterà spostare solo l’intera riga di codice <button…></button> (che vedrai in basso) dove preferisci.

menu a comparsa di codewith

Se non hai idea di dove piazzarla per ora, inseriscila subito sotto il tag <body> per visualizzare gli effetti nella parte alta (o capo) della pagina.

Se hai già scritto del codice ed hai paura di perdere le modifiche, effettua un backup della pagina .html, semplicemente copiando il file da un’altra parte e rinominando la copia.

HTML

La configurazione degli elementi nella pagina HTML si divide in due parti:

  • Creazione del tasto o pulsante tramite il tag <button>.
  • Creazione del div o contenitore, ovvero il menu nascosto vero e proprio con le varie voci e pagine del sito.
Pulsante

Il primo step per creare un menu a comparsa è realizzare il pulsante fisico, che gli utenti andranno a cliccare e di conseguenza aprirà il menu con tutte le pagine o elementi nascosti.

Per fare questo utilizzeremo un classico tag <button>, cioè il tag per la creazione di pulsanti HTML.

Questo è il codice:

<button id="menuButton">Menu</button>

Esaminando il codice potrai notare che nel tag <button> abbiamo dichiarato il suo id personale, questo ci servirà per associare l’apertura del menu a questo pulsante tramite istruzione JQuery. A fondo pagina troverai un esempio di come verrà visualizzato il pulsante.

Menu

Ora abbiamo bisogno di realizzare il menu a comparsa, ma non visibile, che verrà aperto al solo click del pulsante precedentemente creato.

Creiamo un menu semplice con 5 voci comuni in HTML:

<div id="menu" style="display:none;">
  <p>Home</p>
  <p>Dove siamo</p>
  <p>Chi siamo</p>
  <p>Contatti</p>
  <p>Social</p>
</div>

Qui puoi facilmente notare che nel div chiamato “menu” sono presenti 5 voci distinte, che potrai poi convertire in collegamenti ipertestuali cambiando il tag <p> con <a href=””> (leggi la guida sui collegamenti/link HTML qui).

Il div principale ha un attributo “display:none;“, questo in CSS significa che al caricamento della pagina non dovrà essere visibile.

Ora che è tutto pronto per essere utilizzato, non ci rimane che passare al codice per la programmazione del tasto.

JQuery

Libreria JQuery

JQuery è una libreria JavaScript ideata per la semplificazione della procedura di programmazione. In quanto libreria, ha bisogno di essere richiamata all’interno della pagina web per funzionare.

Questa libreria è possibile trovarla nei più noti CDN delle grandi aziende informatiche come Google o Microsoft.

Per richiamare JQuery ti basterà inserire tra i tag <head> e </head> della tua pagina HTML il seguente codice:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Adesso JQuery è operativo e pronto all’uso e si può passare all’ultima fase: la programmazione del tasto.

Script

Il codice vero e proprio può essere scritto in poche righe ed è facilmente modificabile in qualsiasi momento. Copia e incolla all’interno del tag <head> di seguito allo script della libreria JQuery.

<script>        
    $(document).ready(function(){
          $("#menuButton").click(function(){
            $("#menu").slideToggle();
          }); 
        });
</script>

Puoi subito notare che al click del “menuButton” avviene un evento slideToggle (apertura e chiusura) dell’elemento “menu“, ovvero il div nascosto.

Se dovrai inserirlo all’interno di un documento .html, copia e incolla tutto il codice compreso dei tag <script>. Altrimenti se decidi di includerlo in un file esterno in formato .js […] rimuovi questi tag HTML.

Esempio

Al primo click sul tasto verrò visualizzato il menu, al secondo click verrà chiuso. Puoi testare tu stesso nell’esempio qui in basso.

Clicca qui:

Codice completo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#menuButton").click(function(){
      $("#menu").slideToggle();
    }); 
  });

</script>
<!-- eventuale chiusura </head>, apertura <body> -->
<button id="menuButton">Menu</button>
<div id="menu" style="display:none;">
  <p>Home</p>
  <p>Dove siamo</p>
  <p>Chi siamo</p>
  <p>Contatti</p>
  <p>Social</p>
</div>

Ora non ti resta che personalizzare lo stile del pulsante e del menu con il CSS, aggiungere colori, dimensioni, ombre e molto altro.

Segui il nostro corso CSS qui.

Se hai trovato difficoltà con la guida, faccelo sapere nei commenti qui in basso.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Leggi anche: Funziona per muovere liberamente gli oggetti nella pagina HTML

Articoli Recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA