[Javascript] Transition in OnClick Dropdown Menu

[giacomomar]

Salve ragazzi.
Premetto che non ho grandi conoscenze di JS, però ho effettivamente bisogno di esso affinchè possa fare un Menu Dropdown OnClick.
Quindi sono riuscito a 'racimolarne' uno, solo che mi sarebbe molto gradito se qualcuno di voi avesse del tempo per poter aggiungere una 'transition' al volo.
ve ne sarei veramente grato, questo è il codice:

<div class="dropdown">
<div onclick="myFunction()" class="dropbtn"></div>
<div id="myDropdown" class="dropdown-content">
<a href="#loginScreen" class="mangiare">mangiare</a>
<a class="dormire">dormire</a>
<a class="esplorare">esplorare</a>
<a class="divertirsi">divertirsi</a>
<a class="utilia">utilità</a>
</div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 180px;
background-color:transparent;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align:center;
border: 6px solid #FFFFFF;
border-radius:30px;
font-family: "Century Gothic";
}
.dropdown-content a {
color:#FFFFFF;
padding: 14px 10px;
text-decoration: none;
display: block;
font-size: 18px;
}
.mangiare {
border-bottom:4px solid #FFFFFF;
background-color: rgba(193,39,45,1);
}
.mangiare:hover {
background-color: rgba(240,51,59,1.00);
transition:0.4s;
}
.dormire {
border-bottom:4px solid #FFFFFF;
background-color:#009245;
}.dormire:hover {
background-color:#02C25D;
transition:0.4s;
}
.esplorare {
background-color: #01A2FF;
border-bottom:4px solid #FFFFFF;
}
.esplorare:hover {
background-color: #4CBDFF;
transition: 0.4s;
}
.divertirsi {
background-color: #662D91;
border-bottom:4px solid #FFFFFF;
}
.divertirsi:hover {
background-color: #8037B7;
transition: 0.4s;
}
.utilia {
background-color:#FBB03B;
}
.utilia:hover {
background-color:#FBBD5C;
transition:0.4s;
}
.show {display:block;}

 

[WmbertSea]

Ciao, per creare un effetto di transizione (più o meno semplice) puoi intervenire direttamente sul css senza scomodare il JavaScript che già fa il suo lavoro. Ti basterà definire opportunamente la proprietà transition, e relative proprietà che vuoi coinvolgere nella transizione, per le classi .dropdown-content e .show, dove la prima identifica il dropmenu allo stato iniziale (quindi chiuso), mentre la seconda (che viene applicata mediante JavaScript) lo identifica allo stato aperto.

Chiaramente questo è ciò che dovresti fare a grandi linee; se ti serve però capire meglio come impostare il tutto provo a prepararti qualcosa io ma dovresti chiarire nel dettaglio che tipo di transizione vorresti ottenere (ad esempio, una semplice dissolvenza piuttosto che una dissolvenza con un lieve spostamento dal basso verso l'alto o da sinistra verso destra, ecc.).

 

[giacomomar]

Ciao, per creare un effetto di transizione (più o meno semplice) puoi intervenire direttamente sul css senza scomodare il JavaScript che già fa il suo lavoro. Ti basterà definire opportunamente la proprietà transition, e relative proprietà che vuoi coinvolgere nella transizione, per le classi .dropdown-content e .show, dove la prima identifica il dropmenu allo stato iniziale (quindi chiuso), mentre la seconda (che viene applicata mediante JavaScript) lo identifica allo stato aperto.

Chiaramente questo è ciò che dovresti fare a grandi linee; se ti serve però capire meglio come impostare il tutto provo a prepararti qualcosa io ma dovresti chiarire nel dettaglio che tipo di transizione vorresti ottenere (ad esempio, una semplice dissolvenza piuttosto che una dissolvenza con un lieve spostamento dal basso verso l'alto o da sinistra verso destra, ecc.).

Ho provato a fare qualcosa ma non ci sono riuscito:/ se ne fossi in grado di abbozzare un codice, sarebbe veramente il massimo per me

 

[Max 1]

@giacomomar
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag

quando posti del codice, oppure la funzione codice dalla barra degli strumenti

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro

 

[WmbertSea]

Ho provato a fare qualcosa ma non ci sono riuscito:/

Una cosa importante da tenere presente nella creare di transizioni con effetto a comparsa, è il fatto di non poter usare la proprietà display e rispettivi valori none e block (come è sul tuo codice), perché questa non rientra tra le proprietà animabili, quindi il suo valore verrebbe applicato istantaneamente rendendo inconsistente la transizione stessa. In sostituzione a questa, puoi usare invece la proprietà visibility e rispettivi valori hidden e visible. Questa proprietà è infatti animabile, quindi è soggetta agli eventuali valori di durata e ritardo definiti per la transizione. Il passaggio tra visible e hidden (e viceversa) avviene quindi nel tempo stabilito opportunamente per duration e delay della transition, così che sia possibile, ad esempio, utilizzare altre proprietà (come opacity o proprietà che definiscono la posizione) in modo da creare l'effetto voluto considerando quel lasso di tempo in cui l'elemento resta comunque visibile prima di essere nascosto.

se ne fossi in grado di abbozzare un codice, sarebbe veramente il massimo per me

Sì, ne sono in grado, anzi ti dirò di più: a parte la transition per la comparsa del menu (di cui ti ho indicato di chiarire che effetto vorresti avere esattamente, ma non lo hai fatto), personalmente rivedrei comunque anche il resto del css; alcune parti mi sembrano ridondanti e sicuramente possono essere ottimizzate; vedi "transition: 0.4s;" che è applicato sull'hover di ogni singola voce, si potrebbe invece indicare giusto una volta, magari definendo meglio un unico selettore che acchiappi tutte le voci; o anche lo stesso colore delle voci, che viene definito due volte per ciascuna voce relativamente ai due stati "normale" e "hover" (dove si ha giusto una variazione di luminosità), personalmente applicherei un qualche filtro giusto per schiarire il colore, perché alla fine questo è l'effetto che stai ottenendo, così da poter definire solo un unico colore di base per ciascuna voce (nonché, avere un codice più gestibile in caso di personalizzazione).

Nonostante tu non abbia specificato quale effetto vorresti avere, ti posto comunque un esempio completo. La transizione avviene con un effetto di dissolvenza (creato con opacity), un leggero movimento verticale (creato con top) e uno stiramento verticale (creato con padding); poi vedi te come meglio personalizzarlo secondo i tuoi gusti:

<!doctype html>
<html lang="it">

<head>
   <meta charset="utf-8">
   <title>Transition Dropdown Menu</title>
   <style>
      .dropdown {
         position: relative;
         display: inline-block;
      }

      .dropdown-content {
         position: absolute;
         min-width: 160px;
         overflow: hidden;
         text-align: center;
         border: 6px solid #fff;
         border-radius: 30px;
         font-family: "Century Gothic";
         font-size: 18px;
         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
         z-index: 1;
         visibility: hidden;
         opacity: 0;
         top: 160px;
         transition: visibility 0s .4s, opacity .4s, top .4s;
      }

      .dropdown-content a {
         color: #fff;
         display: block;
         padding: 10px 10px;
         text-decoration: none;
         transition: .4s;
      }

      .dropdown-content a:not(:last-child) {
         border-bottom: 4px solid #fff;
      }

      .dropdown-content a:hover {
         filter: saturate(1.2) brightness(1.2);
      }

      .dropdown-content.show {
         visibility: visible;
         opacity: 1;
         top: 180px;
         transition: visibility 0s, opacity .4s, top .4s;
      }

      .dropdown-content.show a {
         padding: 14px 10px;
      }

      /* -- COLORI -- */

      .mangiare   { background: #c1272d; }
      .dormire    { background: #009245; }
      .esplorare  { background: #01a2ff; }
      .divertirsi { background: #662d91; }
      .utilia     { background: #fbb03b; }

   </style>
</head>

<body>
   <div class="dropdown">
      <div onclick="myFunction()" class="dropbtn">dropdown</div>
      <div id="myDropdown" class="dropdown-content">
         <a href="#loginScreen" class="mangiare">mangiare</a>
         <a href="#" class="dormire">dormire</a>
         <a href="#" class="esplorare">esplorare</a>
         <a href="#" class="divertirsi">divertirsi</a>
         <a href="#" class="utilia">utilità</a>
      </div>
   </div>
   <script>
      /* When the user clicks on the button,
      toggle between hiding and showing the dropdown content */
      function myFunction() {
         document.getElementById("myDropdown").classList.toggle("show");
      }
      // Close the dropdown if the user clicks outside of it
      window.onclick = function(event) {
         if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
               var openDropdown = dropdowns;
               if (openDropdown.classList.contains('show')) {
                  openDropdown.classList.remove('show');
               }
            }
         }
      }
   </script>
</body>

</html>

Per eventuali chiarimenti sul codice, chiedi pure.

Buon proseguimento

 

[giacomomar]

G

Una cosa importante da tenere presente nella creare di transizioni con effetto a comparsa, è il fatto di non poter usare la proprietà display e rispettivi valori none e block (come è sul tuo codice), perché questa non rientra tra le proprietà animabili, quindi il suo valore verrebbe applicato istantaneamente rendendo inconsistente la transizione stessa. In sostituzione a questa, puoi usare invece la proprietà visibility e rispettivi valori hidden e visible. Questa proprietà è infatti animabile, quindi è soggetta agli eventuali valori di durata e ritardo definiti per la transizione. Il passaggio tra visible e hidden (e viceversa) avviene quindi nel tempo stabilito opportunamente per duration e delay della transition, così che sia possibile, ad esempio, utilizzare altre proprietà (come opacity o proprietà che definiscono la posizione) in modo da creare l'effetto voluto considerando quel lasso di tempo in cui l'elemento resta comunque visibile prima di essere nascosto.



Sì, ne sono in grado, anzi ti dirò di più: a parte la transition per la comparsa del menu (di cui ti ho indicato di chiarire che effetto vorresti avere esattamente, ma non lo hai fatto), personalmente rivedrei comunque anche il resto del css; alcune parti mi sembrano ridondanti e sicuramente possono essere ottimizzate; vedi "transition: 0.4s;" che è applicato sull'hover di ogni singola voce, si potrebbe invece indicare giusto una volta, magari definendo meglio un unico selettore che acchiappi tutte le voci; o anche lo stesso colore delle voci, che viene definito due volte per ciascuna voce relativamente ai due stati "normale" e "hover" (dove si ha giusto una variazione di luminosità), personalmente applicherei un qualche filtro giusto per schiarire il colore, perché alla fine questo è l'effetto che stai ottenendo, così da poter definire solo un unico colore di base per ciascuna voce (nonché, avere un codice più gestibile in caso di personalizzazione).

Nonostante tu non abbia specificato quale effetto vorresti avere, ti posto comunque un esempio completo. La transizione avviene con un effetto di dissolvenza (creato con opacity), un leggero movimento verticale (creato con top) e uno stiramento verticale (creato con padding); poi vedi te come meglio personalizzarlo secondo i tuoi gusti:

<!doctype html>
<html lang="it">

<head>
   <meta charset="utf-8">
   <title>Transition Dropdown Menu</title>
   <style>
      .dropdown {
         position: relative;
         display: inline-block;
      }

      .dropdown-content {
         position: absolute;
         min-width: 160px;
         overflow: hidden;
         text-align: center;
         border: 6px solid #fff;
         border-radius: 30px;
         font-family: "Century Gothic";
         font-size: 18px;
         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
         z-index: 1;
         visibility: hidden;
         opacity: 0;
         top: 160px;
         transition: visibility 0s .4s, opacity .4s, top .4s;
      }

      .dropdown-content a {
         color: #fff;
         display: block;
         padding: 10px 10px;
         text-decoration: none;
         transition: .4s;
      }

      .dropdown-content a:not(:last-child) {
         border-bottom: 4px solid #fff;
      }

      .dropdown-content a:hover {
         filter: saturate(1.2) brightness(1.2);
      }

      .dropdown-content.show {
         visibility: visible;
         opacity: 1;
         top: 180px;
         transition: visibility 0s, opacity .4s, top .4s;
      }

      .dropdown-content.show a {
         padding: 14px 10px;
      }

      /* -- COLORI -- */

      .mangiare   { background: #c1272d; }
      .dormire    { background: #009245; }
      .esplorare  { background: #01a2ff; }
      .divertirsi { background: #662d91; }
      .utilia     { background: #fbb03b; }

   </style>
</head>

<body>
   <div class="dropdown">
      <div onclick="myFunction()" class="dropbtn">dropdown</div>
      <div id="myDropdown" class="dropdown-content">
         <a href="#loginScreen" class="mangiare">mangiare</a>
         <a href="#" class="dormire">dormire</a>
         <a href="#" class="esplorare">esplorare</a>
         <a href="#" class="divertirsi">divertirsi</a>
         <a href="#" class="utilia">utilità</a>
      </div>
   </div>
   <script>
      /* When the user clicks on the button,
      toggle between hiding and showing the dropdown content */
      function myFunction() {
         document.getElementById("myDropdown").classList.toggle("show");
      }
      // Close the dropdown if the user clicks outside of it
      window.onclick = function(event) {
         if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
               var openDropdown = dropdowns;
               if (openDropdown.classList.contains('show')) {
                  openDropdown.classList.remove('show');
               }
            }
         }
      }
   </script>
</body>

</html>

Per eventuali chiarimenti sul codice, chiedi pure.

Buon proseguimento

Grazie Mille, sei stato veramente di aiuto e mi hai dato una lezione che terrò sicuramente a mente, grazie di tuttto