PROBLEMA Menu slide con javascript

joker320t

Nuovo Utente
73
1
Ciao a tutti ragazzi, ho un problema al quale non sono riuscito a trovare ancora una soluzione e sto impazzendo, vorrei fare un menu e comparsa, con javascript per il mio sito, il probelma e che ho trovato qualcosina in rete ma nulla che mi soddisfi.
Praticamente vorrei che quando schiaccio la classica iconcina del menu, facesse un slide down con tutti gli elementi che ho inserito, per esempio come in questo sito per farmi capire meglio http://joechiang.com.au/

Grazie in anticipo per il vostro aiuto.:):)
 
M

Mursey

Ospite
Se non usi script di terze parti come jQuery UI una strada e' farlo a mano modificando la size dell'elemento con un for da 0 alla dimensione massima che vuoi.
 
  • Like
Reactions: Stefano Novelli

joker320t

Nuovo Utente
73
1
Se non usi script di terze parti come jQuery UI una strada e' farlo a mano modificando la size dell'elemento con un for da 0 alla dimensione massima che vuoi.

Grazie mille per la risposta, per caso non sai dell'esistenza di qualche tutorial che spiega come fare? Sono abbastanza all'inizio e non saprei benissimo come fare sinceramente
 
M

Mursey

Ospite
Se sei all'inizio consiglio di giocare semplicemente con la proprieta' height dello stile, col tempo invece potrai usare delle funzione proprie del CSS3 che ti faciliteranno la vita.

Non so a che livello sei ma provo a descriverti un esercizio e vediamo se sai farlo :
Crea un div e coloralo posizionandolo come absolute
Da codice javascript prendi l'elemento e leggi la sua height
Fai un ciclo che incrementa la height fino ad un valore da te scelto


Vedrai il rettangolo che si ingrandisce in altezza.
 

joker320t

Nuovo Utente
73
1
Perfetto, sei stato gentilissimo proverò sicuramente a farlo, ti farò sapere se sono stato in grado di farlo

- - - Updated - - -

Se sei all'inizio consiglio di giocare semplicemente con la proprieta' height dello stile, col tempo invece potrai usare delle funzione proprie del CSS3 che ti faciliteranno la vita.

Non so a che livello sei ma provo a descriverti un esercizio e vediamo se sai farlo :
Crea un div e coloralo posizionandolo come absolute
Da codice javascript prendi l'elemento e leggi la sua height
Fai un ciclo che incrementa la height fino ad un valore da te scelto


Vedrai il rettangolo che si ingrandisce in altezza.


ciao ho provato a fare un ciclo con il quale aumentavo il valore dell'altezza del div però non funziona cosa c'e che non va?
Codice:
  <script type="text/javascript">
      var h = getElementById('demo').offsetHeight;
      function(){
        for(i=h; i<= 1000; i++){
          document.getElementById('demo').style.height=i+'px';
        }
      }
    </script>
 
Ultima modifica da un moderatore:
M

Mursey

Ospite
Ci sono alcune cose che non vanno.

Prova questo
Codice:
<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<div id='demo' style="height: 100px; background-color: red;"></div>
<input type="button" value="ingrandisci1 div" onclick="ingrandisci1()" />
<input type="button" value="ripristina" onclick="document.getElementById('demo').style.height = '100px'" />
<input type="button" value="ingrandisci2 div" onclick="ingrandisci2()" />
<script>
function ingrandisci1() {
	var h = document.getElementById('demo').style.height;
	h = parseInt(h.split('px')[0]);
	for (var i=0; i<400; i++) {
		document.getElementById('demo').style.height = (h + i) + 'px';		
	}
}
function ingrandisci2() {
	var i = 0;
	var h = document.getElementById('demo').style.height;
	h = parseInt(h.split('px')[0]);
	var resizeInterval = setInterval(function() {
		if (i < 400) {
			document.getElementById('demo').style.height = (h + i) + 'px';
			i = i + 4; // se aumenti questo valore va piu' veloce
		}
		else {
			clearInterval(resizeInterval);
		}
	}, 5);
}
</script>
</body>
</html>

Copialo dentro un blocco note e salvalo come html.
Il pulsante ingrandisci1 div e' il tuo codice corretto, il ingrandisci2 div una variante piu' avanzata e vicina a quello che vuoi tu.

Il codice con il for va bene come studio ma come vedi e' troppo veloce per dare una bella resa all'animazione.
La soluzione finale e' usare la funzione setInterval che esegue codice all'infinito ogni tot tempo (nel mio caso 5 millisecondi) fino a che non viene fermata con la funzione clearInterval.
 

joker320t

Nuovo Utente
73
1
perfetto, sono anche riuscito a capire tutto tranne un cosa, non mi e' chiarissimo perche tu usci questa istruzione
h = parseInt(h.split('px')[0]);
 
M

Mursey

Ospite
perfetto, sono anche riuscito a capire tutto tranne un cosa, non mi e' chiarissimo perche tu usci questa istruzione
h = parseInt(h.split('px')[0]);

Visto che la height dello style e' una stringa contenente 100px io :
splitto la stringa basandomi su px, ottengo un array del quale prendo il primo elemento -> h.split('px')[0] -> '100'
converto la stringa 100 in un numero intero -> parseInt('100') -> 100
 
  • Like
Reactions: joker320t

joker320t

Nuovo Utente
73
1
ciao ancora :D grazie mille per le tue risposte fino ad ora :)
Volevo chiederti un altra cosa, sto provando a mettere in pratica quello che mi avevi scritto, ma ho un problema praticamente se nel div al quale controllo l'altezza metto qualcosa dentro e per esempio metto l'altezza a 0px comunque gli elementi dentro si vedono lostesso come posso fare? Grazie mille :)
 
M

Mursey

Ospite
Ho provato e non si vedono, puoi mettere il codice del div ?
 

joker320t

Nuovo Utente
73
1
ciao scusa se ci ho messo un po' h rispondere allora il codice del div e' questo
Codice:
  <div id="menu">
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>CONTACTS</li>
      </ul>
    </div>

Style

#menu{
background-color: blue;
height: 0px;
position: absolute;
width: 100%;
}


Per esempio se imposto l'altezza del div a 0px la lista del menu si vede lostesso pero non si vede lo sfondo blu, non so se mi sono spiegato bene
 
Ultima modifica da un moderatore:
M

Mursey

Ospite
Hai beccato un caso particolare, gli unordered list non seguono il padre che li contiene, ci sono alcune domande on-line sull'argomento
html - ul is not inside div container - Stack Overflow
html - UL don't stay within their containing DIVs? - Stack Overflow
https://www.sitepoint.com/community/t/unordered-list-not-staying-inside-div/5250

Nel tuo caso potresti risolvere usando dei div al posto di ul e il ma vorrei spostare il discorso su un'altro livello...

Se guardi come e' fatta la pagina che vuoi copiare (usando F12 sul tuo browser) vedi che l'animazione e' fatta con fogli di stile e jQuery che permette la transizione da una classe all'altra.
Lui ha il div con top -100% e opacita' 0, poi lo mette a top 0px e opacita' 1. Quindi non lo ingrandisce ma lo sposta solo verso il basso, in questo modo evita i problemi degli ul che ti dicevo all'inizio.

La sua pagina ha pochissimo codice perche' il grosso del lavoro e' fatto dai fogli di stile e da jQuery.
 

joker320t

Nuovo Utente
73
1
Cercati un codice su codepen, ne trovi un'infinità di menù fatti come quello ;)

Grazie per la risposta, ma e' troppo facile fare copia e in colla e per altro non mi da neanche nessuna soddisfazione personale, io voglio capire quello che sto facendo e anche se ci metto una settimana voglio farlo io con la mia testa è le mie mani ;)

- - - Updated - - -

Hai beccato un caso particolare, gli unordered list non seguono il padre che li contiene, ci sono alcune domande on-line sull'argomento
html - ul is not inside div container - Stack Overflow
html - UL don't stay within their containing DIVs? - Stack Overflow
https://www.sitepoint.com/community/t/unordered-list-not-staying-inside-div/5250

Nel tuo caso potresti risolvere usando dei div al posto di ul e il ma vorrei spostare il discorso su un'altro livello...

Se guardi come e' fatta la pagina che vuoi copiare (usando F12 sul tuo browser) vedi che l'animazione e' fatta con fogli di stile e jQuery che permette la transizione da una classe all'altra.
Lui ha il div con top -100% e opacita' 0, poi lo mette a top 0px e opacita' 1. Quindi non lo ingrandisce ma lo sposta solo verso il basso, in questo modo evita i problemi degli ul che ti dicevo all'inizio.

La sua pagina ha pochissimo codice perche' il grosso del lavoro e' fatto dai fogli di stile e da jQuery.

Ciao, allora mi sono visto qualcosina su jquery in questi giorni e ho visto la funzione animate(), sono giunto a due soluzioni una che e' un "truccaccio" per ovviare al problema che <ul> non segue il padre, la soluzione sarebbe mentre ingrandisco il div ingrandisco anche il font-size delle scritte ma non mi piace molto come soluzione. L'altra era di spostare tutto il div come hai detto tu, ma c'è qualcosa dei CSS che mi permetta di farlo? Grazie mille ancora ;)
 

Andrea1234567

Utente Attivo
228
28
Grazie per la risposta, ma e' troppo facile fare copia e in colla e per altro non mi da neanche nessuna soddisfazione personale, io voglio capire quello che sto facendo e anche se ci metto una settimana voglio farlo io con la mia testa è le mie mani ;)

- - - Updated - - -



Ciao, allora mi sono visto qualcosina su jquery in questi giorni e ho visto la funzione animate(), sono giunto a due soluzioni una che e' un "truccaccio" per ovviare al problema che <ul> non segue il padre, la soluzione sarebbe mentre ingrandisco il div ingrandisco anche il font-size delle scritte ma non mi piace molto come soluzione. L'altra era di spostare tutto il div come hai detto tu, ma c'è qualcosa dei CSS che mi permetta di farlo? Grazie mille ancora ;)

Sì, si puo fare con css. Prova ad usare Transitions per fare l'animazione: CSS3 Transitions
Metti al div height:0 e overflow:hidden e con una funzione in javascript quando clicchi il bottone fai aggiungere al div una classe che ti "crea" l'animazione.
 
  • Like
Reactions: Mursey

Entra

oppure Accedi utilizzando

Hot: E3 2021, chi ti è piaciuto di più?

  • Ubisoft

    Voti: 28 21.5%
  • Gearbox

    Voti: 2 1.5%
  • Xbox & Bethesda

    Voti: 84 64.6%
  • Square Enix

    Voti: 10 7.7%
  • Capcom

    Voti: 6 4.6%
  • Nintendo

    Voti: 18 13.8%
  • Altro (Specificare)

    Voti: 11 8.5%

Discussioni Simili