Padajući izbornik - pitanje

Bok,

sviđa mi se efekt kod svih tema na stranici
http://www.yootheme.com/demo/wordpress/venture

mislim na efekt kad pređete mišem preko izbornika pa se pojavi submenu ali ne iskoči dole nego sklizne ,

kako to napraviti da submenu sklizne, neki jquery ili ?

Hvala :bljesak:

Možes na 2 nacina:
1.Koristeci CSS3 transition opciju
2.Koristeci jquery

Tačnije preko transitiona:
[php]transition: height 0.3s ease-in;[/php]
ili jQuery slideToggle() funkcija :slight_smile:

hvala na odgovoru :slight_smile: budem vidio što mi više odgovara :slight_smile:

a gore navedene teme koriste jquery ili ?

CSS Transitions nemoj koristit narednih 3 godine, jer ga svaki browser drugačije podržava ako ga i podržava, jQuery je puno bolja opcija, najbolja opcija ti je ovo: LINK

nemrem naći nekakav tutorial kako pravilno koristit taj jquery pa ako može molim te.
i kolko vidim radi i u IE8 što je dobro :slight_smile:

hvala :slight_smile:

Odi na nettuts i pogledaj kurs 30 days to learn jquery(free je),ako ne znas bas nista o jqueyu,sigurno neces pozalit :slight_smile:

za css transition pogledaj na kojim preglednicima radi Can I use… Support tables for HTML5, CSS3, etc

Ma da, najbolje da čekamo još 10 godina :slight_smile:

CSS3 je sadašnjost, takve animacije se ionako koriste samo u prezentacijske svrhe, a ne radi funkcionalnosti, tako da se pobrineš da imaš fallback za starije browsere i to je to.

Pogledaj si ovaj tut: CSS3 animated dropdown menu - RedTeamDesign

hvala :slight_smile: budem vidio kaj ću na kraju napraviti

nego yoo theme za svoje teme koristi jquery ili css ? :slight_smile:

Ako nepodrška ne utječe na funkcionalnost, zašto ne koristiti?
Evo, ovaj demo CSS3 animated dropdown menu - demo radi dobro u Chromeu.
U IE9 se ne vidi transition, ali izbornik je i dalje funkcionalan, a IE9 korisnici neće ni znati da nešto propuštaju.

[quote=“chief_wolfinjo”]hvala :slight_smile: budem vidio kaj ću na kraju napraviti

nego yoo theme za svoje teme koristi jquery ili css ? :)[/quote]

jQuery + CSS (netočno je reći da koriste samo jQuery jer upravo s jQuery-em modificiraš css :slight_smile: ).

Ja sam za jQuery, jer nevidim smisao da korisnici Chromea i FFa imaju animaciju a korisnici IE-a nemaju, čak i te animacije se razlikuju od verzije do verzije browsera.

Za sada najbolje radi jQuery, sa blagom iznimkom Firefoxa koji ga najlošije renderira od ovih poznatijih browsera, bar si ziher da radi a pitanje vremena je kada će radit glatko kao u Chromeu i IEu.

Bitna prednost jQueryja je jednostavnost koda kojim radiš animiranje, neusporedivo jednostavnije (kraće) od CSS transitiona. Nadam se da za godinu dve ove diskusije neće više bit, ali živi bili pa umrli :stuck_out_tongue:

[quote=“Uber_Gosu”]Ja sam za jQuery, jer nevidim smisao da korisnici Chromea i FFa imaju animaciju a korisnici IE-a nemaju, čak i te animacije se razlikuju od verzije do verzije browsera.

Za sada najbolje radi jQuery, sa blagom iznimkom Firefoxa koji ga najlošije renderira od ovih poznatijih browsera, bar si ziher da radi a pitanje vremena je kada će radit glatko kao u Chromeu i IEu.

Bitna prednost jQueryja je jednostavnost koda kojim radiš animiranje, neusporedivo jednostavnije (kraće) od CSS transitiona. Nadam se da za godinu dve ove diskusije neće više bit, ali živi bili pa umrli :p[/quote]

Ali zato radi najsporije :slight_smile:

Za godinu dvije će doći CSS4 koji opet neće biti podržan od strane svih browsera, dokle ćeš čekati :slight_smile:

CSS4 je još u izradi Selectors Level 4
Neki čekaju CSS5 da bi počeli koristiti CSS3 :zub:

-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;

:smiley: :banana:

a za padajući izbornik ću još vidjeti :smiley:

sada sam se pozabavio sa time i ovaj GSAP je dobar ali kod odabira objekta

TweenLite.to(logo, 1, {left:"632px"});

u ovom primjeru logo, nema predznaka # ili .
jer ako se doda onda ne radi, ali onda nastaje problem jer ovaj jquery samo radi s div id-ovima
a ne radi s div class objektima… onda ako i napravim da taj objekt bude div id
onda recimo ovaj objekt neće raditi : #categories.nav li ul i onda kad ubacim ovako : categories.nav li ul isti vrag…
jer nesmije biti razmaka… kak to srediti tj. dali je moguće da to proradi sa gore navedenim objetkom ?

hvala :slight_smile:

evo riješio sam :yo:

code potreban :

jQuery(function () {  
  jQuery('#categories.nav li').hover(function () {
     clearTimeout(jQuery.data(this, 'timer'));
     jQuery('ul', this).stop(true, true).slideDown(450, 'easeInOutCubic');
  }, function () {
    jQuery.data(this, 'timer', setTimeout(jQuery.proxy(function() {
      jQuery('ul', this).stop(true, true).slideUp(450, 'easeInOutCubic');
    }, this), 450));
  });
});

koji sam pronašao ovdje :

JQuery dropdown menu using slideup and slidedown on hover is jumpy - Stack Overflow

a ja sam samo dodao unutar zagrada : ‘easeInOutCubic’ jer mi se taj efekt svidio, a za ostale efekte možete vidjeti ovdje : jQuery Easing Plugin

te da bi taj efekt bio funkcionalan ili neki drugi potrebno je downlodati :

jquery.easing.1.3.js
jquery.easing.compatibility.js

i zvati ih u temi.

:yo:

[quote=“APazinjan”]Ali zato radi najsporije :slight_smile:
Za godinu dvije će doći CSS4 koji opet neće biti podržan od strane svih browsera, dokle ćeš čekati :)[/quote]

[quote=“gambo”]CSS4 je još u izradi Selectors Level 4
Neki čekaju CSS5 da bi počeli koristiti CSS3 :zub:[/quote]

There is No Such Thing as CSS4:
A Word About CSS4

Imam još jedno pitanje :o

zakaj se dešava sljedeća situacija :

kad otvorim početnu stranicu ili bilo koju drugu od wp teme i sa mišem pređem preko izborniku da bi mi se otvorio odnosno prikazao submenu dogodi se ovo da samo prvi prijelaz mišem submenu se prikaže normalno kao da nema nikakvog .js file vezanog za slideup i slidedown, ako ponovo pređem mišem nakon toga ili bilo kolko puta kasnije submenu se prikazuje kako bi se trebao prikazavit pomoću .js file koje je vezan za to. ako refresham stranicu opet ista stvar da prvi prikaz submenu-a je standaran, a tek nakon toga radi kako treba…

kaj bi trebao napraviti da odmah od prve radi kako treba ?

hvala :o

Trebaš keširat logo (stavit ga da je jQuery varijabla saa: var logo = $(’#logo’); )

PS
easeInOutCubic je ok ali sad imaju noviji način označavanja efekata: Jump Start: GSAP JS « GreenSock