non posso caricare immaggini
mario
Html - Menù A Comparsa Animato
 Di  Mario Spanò , June 18, 2020, 6:33 p.m.

In questo tutorial andremo a creare un menù a comparsa, proprio come quello che si può vedere in alto a sinistra dopo aver cliccato sull' icona a freccia : (fontawesome angle right) che potete trovare nella libreria opensource : fontawesome, a questo link. Per completare il tutorial è necessario avere jquery , bootstrap , fontawesome e popper, quest' ultimo se pur non indispensabile è buona norma averlo , in quanto è una dipendenza delle librerie bootstrap . Negli head c'è la versione 4.7 di fontawesome,se volete usare l'ultima versione che ad oggi è la 5 : andate al link fontawesome di prima. Create un file html e inserite il codice sottostatnte al suo interno:

index.html

        <!DOCTYPE html>
        <html lang="it">
        <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>
        <body>
        <div class="container-fluid" style="">
        <div id="asidebar" style="background-color:white;">
           <span id="asidebar" style="margin-top:5%;font-size:5vw" class="fa fa-angle-right" aria-hidden="true"></span>
            </div> <span id="s_left_tutorial" class="badge badge-info">Tutorial</span>
        </div>
         <div  class="d_divaside" style="margin:0;padding:0;position:absolute;width:20%;max-width:20%;">
           <div class="list-group" id="d_asidemenu" role="tablist">
             <a  id="a_html2" class="list-group-item list-group-item-action" data-toggle="list" href="#d_inasidemenu" role="tab"><span id="s_leftmenu" style="color:orange!important;">django</span></a>
             <a id="a_html" class="list-group-item list-group-item-action" data-toggle="list" href="#d_html_inasidemenu" role="tab"><span id="s_leftmenu" style="color:orange!important;">html</span></a>
           <!-- Tab panes -->
           <div id="d_htmlmenu" class="list-group">
               <a id="a_html" class="list-group-item list-group-item-action"   href="#">
                 <span id="s_leftmenu" style="color:orange!important;">Menu Animato</span>
             </a>
           </div>
        </div>
           </div>
        </div>
        <script  src="js/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script  src="js/aside.js"></script>
        </body>
        </html>
       

Applichiamo gli stili in css3 :

impostiamo le proprietà nel file css. E' importante e ovvio che il menu sia inizialmente nascosto, deve essere nascosto perchè esso va visualizzato quando il client che usa la pagina clicca sulla freccia angle-right,perciò per farlo apparire inizialmente nascosto , imposteremo la proprietà left a : left:-700px; in seguito il click del mouse sulla freccia eseguirà la funzione javascript che renderà l' elemento nascosto , di nuovo visibile. impostando left: 0px;

homepage.css

        .d_divaside{
           position:absolute;
           width:20%;
           max-width:20%;
           padding:0;
           margin:0;
           font-size:1vw;
           color:white;
           left:-700px;
           height:auto;
           z-index:100!important;
        }
        #d_htmlmenu{
          display:none;
          background-color:whitesmoke;
          color:orange;
          margin-left:10%;
          margin-top:0%;
          padding:5%;
          width:100%;
        }
        #s_left_tutorial{
          color:white!important;
          font-size:1vw;
        }

        

Il file javascript per gestire gli eventi:

Per mostrare il menu al click del mouse sulla freccia , bisogna intercettare a livello di codice , l' evento click appunto . Il linguaggio scelto per fare ciò è javascript . Nel codice javascript sottostante , la porzione di codice che intercetta il click del mouse sulla pagina html è questa : $('#asidebar').click(function(){.... ecc... Oltre a gestire l' evento click , gestiremo anche l' evento hover, l' evento hover si verifica Quando il mouse passa con il puntatore sull' oggetto interessato : la freccia in questo caso. Quando accadrà l' evento hover la freccia si animerà , spostandosi da destra a sinistra e viceversa in 400 ms . Quest' animazione oltre alla bellezza dell' effetto visivo , contribuisce a far capire al client che usa la freccia appunto , che è possibile interagire con essa attraverso il click del mouse . Quindi , creiamo il file javascript : aside.js inseriamo il contenuto qui sotto al suo interno.

aside.js :

    $(document).ready(function(){
      alert(window.innerWidth)
    /* quando il mouse tocca la freccia , quest' ultima si sposterà di 14 pixel e assumera un opacità di 0.5 . Tutto cio in 400 millisecondi*/
      $('#asidebar').hover(function(){
        $('#asidebar').animate({ "margin-left" : '14px','opacity' : '0.5',},400);
      },

    /* quando il mouse si allontenerà dalla freccia quest' ultima tornerà nella posizione iniziale e l' opacita tornerà a 1*/

      function(){
        $('#asidebar').animate({ "margin-left" : '0px','opacity' : '1',},400);});

    /* quando cliccheremo sulla freccia comparirà il menu .... a 0px torna visibile visto che la posizione iniziale era -700px: quindi era nascosta*/

      $('#asidebar').click(function(){
        $('.d_divaside').animate({ "left" : '0px',},400);});

    /* quando il mouse passera(hover) su #a_html , e il cursore del mouse diventerà a forma di mano*/
    $('#a_html').hover(function(){
      $('#d_htmlmenu').css('cursor','pointer');},
    function(){
      /*$('#d_htmlmenu').css('display','none');*/
    });
  /* l' elemento #d_htmlmenu torna visibile quando si fa click sull elemento con id #a_html2 con "display:block" */+
    $('#a_html2').click(function(){
      $('#d_htmlmenu').css('display','block');
      $('#a_html').css('display','block');
    });
      /*quando clicchiamo fuori dagli elementi .d_divaside e fa-angle-right tornerà tutto alla posizione iniziale */
    $(document).click(function(event) {
      $target = $(event.target);
      if(!$target.closest('.d_divaside').length && !$target.closest('.fa-angle-right').length &&
      $('.d_divaside').is(":visible")) {
        $('.d_divaside').animate({ "left": '-700px',},300);
        $('#d_htmlmenu').css('display','none');
      }
    });
    });


    

se usate la versione fontawesome 4.7 vi troverete con una freccia (.fa fa-angle-right) diversa da quella su questa pagina, se volte la stessa freccia del tutorial dovete usare la versione
5 , che trovate qui.E ricordate che nella versione 5 "fa fa-angle-right" diventa : "fas fa-angle-right" e in una pagina html va inserita così : <i class="fas fa-angle-right"><i>




Alternare i Menù Visualizzati

Un problema da superare è : che dobbiamo nascondere il sub-menù visualizzato quando si fa click su una nuova opzione del menù, per evitare che si sovrappongano due sub-menù , evento ovviamente indesiderato . Se ad esempio faccio click sul menu "html" la pagina visualizza l' opzione "menu animato" , però se subito dopo decido di cliccare sul menu "Linux" mi tocca nascondere l 'opzione "menu animato" affinchè non si sovrapponga con la nuova opzione visualizzata in seguito al click sul menù "Linux" . Un altro problema da superare, è ,come nascondere tutti i menù, quando l' utente fa click con il mouse sulla pagina , però fuori dal menù . Questo problema è affrontato nell' ultima funzione javascript , quella che gestisce $(document).click(function(){ ..... Sotto i files : html,css,javascript modificati . La prima modifica riguarda il file html , in cui vanno aggiunte un paio di voci ai menu. Quindi di seguito il nuovo file html

index.html

    <!DOCTYPE html>
       <html lang="it">
       <head>
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       </head>
            <body>

         <div class="container-fluid" style="">
           <div id="asidebar" style="background-color:white;">
             <span id="asidebar" style="margin-top:5%;font-size:5vw" class="fas fa-angle-right" aria-hidden="true"></span>
             </div> <span id="s_left_tutorial" class="badge badge-info">Tutorial</span>
           </div>
           <div  class="d_divaside">
             <div class="list-group" id="d_asidemenu" role="tablist">
               <a  id="a_html1" class="list-group-item list-group-item-action" data-toggle="list" href="#tutorial_django" role="tab"><span id="s_leftmenu_django" style="color:orange!important;">Django</span></a>
               <a id="a_html2" class="list-group-item list-group-item-action" data-toggle="list" href="#tutorial_html" role="tab"><span id="s_leftmenu_html" style="color:orange!important;">Html</span></a>
               <a id="a_html3" class="list-group-item list-group-item-action" data-toggle="list" href="#tutorial_linux" role="tab"><span id="s_leftmenu_linux" style="color:orange!important;">Linux</span></a>

               <div id="d_htmlmenu" class="list-group">
                 <a id="a_tutorial_html_menu" class="list-group-item list-group-item-action"   href="#">
                   <span id="s_leftmenu1" style="color:orange!important;">Menu Animato</span>
                 </a>
                 <a id="a_tutorial_django_urls" class="list-group-item list-group-item-action"   href="#">
                   <span id="s_leftmenu2" style="color:orange!important;">urls.py in django</span>
                 </a>
                 <a id="a_tutorial_pdf_converter" class="list-group-item list-group-item-action"  href="#">
                   <span id="s_leftmenu3" style="color:orange!important;">Converti Testo</span>
                 </a>
               </div>
             </div>
           </div>
         </div>

         <script  src="js/jquery.min.js"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
         <script  src="js/aside.js"></script>
         </body>
         </html>
         


Qui Il file css



         .d_divaside{
           position:absolute;
           width:20%;
           max-width:20%;
           padding:0;
           margin:0;
           font-size:1vw;
           /*left:0%;*/
           color:white;
           left:-700px;
           height:auto;
           z-index:100!important;
         }
         .fa-angle-right{
         font-size: 2vw;
         }
         #d_htmlmenu{
           display:none;
           background-color:whitesmoke;
           color:orange;
           margin-left:10%;
           margin-top:0%;
           padding:5%;
           width:100%;
         }
         #s_left_tutorial{
           color:white!important; font-size:1vw;
         }
         


Il file javascript aside.js



           $(document).ready(function(){
           /* quando il mouse tocca la freccia , quest' ultima si sposterà di 14 pixel e assumera un opacità di 0.5 . Tutto cio in 400 millisecondi*/
             $('#asidebar').hover(function(){
               $('#asidebar').animate({ "margin-left" : '14px','opacity' : '0.5',},400);
             },

           /* quando il mouse si allontenerà dalla freccia quest' ultima tornerà nella posizione iniziale e l' opacita tornerà a 1*/

             function(){
               $('#asidebar').animate({ "margin-left" : '0px','opacity' : '1',},400);});

           /* quando cliccheremo sulla freccia comparirà il menu .... a 0px torna visibile visto che la posizione iniziale era -700px: quindi era nascosta*/

             $('#asidebar').click(function(){
               $('.d_divaside').animate({ "left" : '0px',},400);});

           /* quando il mouse passera(hover) su #a_html , l' elemento #d_htmlmenu torna visibile con "display:block" e il cursore del mouse diventerà a forma di mano*/
           $('#a_html2').hover(function(){
             $('#d_htmlmenu').css('cursor','pointer');},
           function(){
             /*$('#d_htmlmenu').css('display','none');*/
           });
           /*quando clicchiamo fuori dagli elementi .d_divaside e fa-angle-right tornerà tutto alla posizione iniziale */
           $('#a_html2').click(function(){
             $('#d_htmlmenu').css('display','block'); // mostro il menu che mi interessa
             $('#a_tutorial_html_menu').css('display','block');
             $('#a_tutorial_pdf_converter').css('display','none');// nascondo questo menù nel caso sia visibile
               $('#a_tutorial_django_urls').css('display','none');// nascondo questo menù nel caso sia visibile
           });
           $('#a_html3').click(function(){
             $('#d_htmlmenu').css('display','block'); // mostro il menu che mi interessa
             $('#a_tutorial_pdf_converter').css('display','block');// mostro il menu che mi interessa
               $('#a_tutorial_html_menu').css('display','none');// nascondo questo menù nel caso sia visibile
                 $('#a_tutorial_django_urls').css('display','none');// nascondo questo menù nel caso sia visibile
           });
           $('#a_html1').click(function(){
             $('#d_htmlmenu').css('display','block'); // mostro il menu che mi interessa
               $('#a_tutorial_django_urls').css('display','block'); // mostro il menu che mi interessa
             $('#a_tutorial_pdf_converter').css('display','none');// nascondo questo menù nel caso sia visibile
               $('#a_tutorial_html_menu').css('display','none');// nascondo questo menù nel caso sia visibile

           });

           /*nascondo tutto se clicco al di fuori del documento*/
           $(document).click(function(event) {
             $target = $(event.target);
             if(!$target.closest('.d_divaside').length && !$target.closest('.fa-angle-right').length &&
             $('.d_divaside').is(":visible")) {
               $('.d_divaside').animate({ "left": '-700px',},300);
               $('#d_htmlmenu').css('display','none');
             }
           });
           });