JavaScript meni

[Ilija Studen]

Treba mi relativno jednostavan JavaScript meni koji animira (ne prost show / hide već animacija pri otvaranju). Neka preporuka?

PS: Sam meni se može videti http://madlenianum.revolutioninteractive.com/. Trenutno je tu CSS meni, ali klijent hoće da on animira (ništa me ne pitajte)...

[bluesman]

To je jako los primer za menu, bar sto se usabiliy tice :)

Pa napravi sam, umesto show, samo stavi neki timeout koji ga slide-uje. Brze je tako nego da trkeljises po tudjem kodu.

[Ilija Studen]

Moguće. Pored sveg posla što imam mislio sam da ovo na neki način mogu da zaobiđem. Kao i obično, Marfi umeša prste :D Bar ću imati zanimljivo veče.

PS: Nisam ja osmišljavao stranicu. Dobio PSD sasekao ga i uklopio sa CMSom.

[bluesman]

Ja sam mislio na menu. Usability onog menija je prilicno los. Hajde sada da objasnim da ne budem neki hater koji pljuje bez argumenata.

Prvo, ovakav vertiklani menu zateva mnogo vise paznje nego horizontalni jer je sam po sebi neprirodniji.

Sledece je sto podmeni ne sme da iskace tako jednostavno na mouseover, pravi menu bi morao da ima bar 1/2 sekunde do 1 sekundu zadrske. To sada izgleda kao da je nebitno (sta je 1/2 sekunde) ali kada probate vidite drasticnu razliku.

Zatim, na mouseout mora takodje da postoji neki delay pre nego sto se skloni menu. Ako malo probate da "krstarite" ovim menijem jednostavno se u jednom trenutku nadjes kako polako pomeras misa na levo, pixel po pixel da ti ne bi pobegao submenu dok ti dodjes misem do podmenija.

Zato mislim da je usability horror, narocito za neiskusnije korisnike.

Strana kao strana, sama po sebi nije losa, mnogo bolja nego taj menu.

[noviKorisnik]

Treba mi relativno jednostavan JavaScript meni koji animira
Ako smem da pitam - KAKO da animira?

[Ilija Studen]

Ako smem da pitam - KAKO da animira?

Pri prelasku preko osnovne stavke navigacije da se podnavigacija "izvuče" od 0px do 240px s leva nadesno :)

[noviKorisnik]

Koristiš z-index - podmeni je ispod glavnog. Postaviš setInterval koji poziva funkciju koja pomera u koracima levu poziciju podmenija. (pre postavljanja intervala resetuješ poziciju i uključiš display... na krajnjoj poziciji isključiš interval)

[ivanhoe]

@Ilija: pogledaj http://webfx.eae.net/dhtml/swipeFade/swipeFade.html, to su dva js skripta koji omogucuju slide-in/out i fade-in/out, prilicno se lako implementiraju...

@bluesman: skroz si u pravu za delay, narocito za onaj na mouseout... nema gluplje stvar nego kad moras da cimas misha ulevo da se meni ne sklopi...to me stvarno iznervira...

@NoviKorisnik: Ima bolja fora, pogledajte kako je uradio ovaj lik sa onog url-a sto sam dao gore...koristi clipping....naprosto stavis clip na div i menjas mu dimenzije i tako simuliras izvlacenje, a da se sam div uopste ne pomera...

a sto se tice samog menija na ovom sajtu, nije bas zgodan za ovo jer su stavke mnogo uske, a dugacke...moras bas pazljivo da vuces misha ili zavrsis na pogresnom submeniju... delay za otvaranje/zatvaraanje bi donekle ovo resio, ali bi mozda ipak mogao malo da dodas paddinga gore i dole na menu item-e, da ljudima bude lakse da ih nabodu..

[noviKorisnik]

Nešto svakako mora da se menja da bi bila animacija ;.)

btw. - setih se kasnije i klipinga, deluje mi bolje nego ovo s preklapanjem.

[Ilija Studen]

Napravio sam meni...

http://madlenianum.revolutioninteractive.com/

Pošto nisam JS ekspert (može se reći da sam upućeni početnik) bilo je jako mnogo stranputica na koje sam zaglavljivao. Stvar je daleko od savršene (ima par "tikova") ali definitivno više namam vreme da se posvetim ovome (drugi projekti su onhold zbog ovoga).

Metoda koju je noviKorisnik spomenuo je odradila posao. Kliping nije mogao jer je bilo potrebno očuvati beli border oko podmenija, a i nikako nisam uspevao da ga nateram da radi korektno. Promena dužine radi posao, s napomenom da overflow bloka mora biti hidden kako ne bismo dobili skrolove, prelomljen tekst i slične "sporedne efekte" koje overflow: visible donosi.

Imam još tri "tika" koja moram da rešim i svi su u IEu:

1. Prilikom prelska preko osnovne stavke menija podmeni koji treba da se pojavi dobija klasu toFront, a ostali dobijaju klasu toBack. Prva ima pun opacity i z-index 100 (izbija napred), a druga postaje poluprozirna i povlači se nazad (z-index 1):

#navigation ul li ul.toFront {
z-index: 100;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity: 100);
}

#navigation ul li ul.toBack {
z-index: 1;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity: 50);
}

To savršeno korektno radi u Firefoxu (1.5), ali z-index ne radi u Internet Exloreru tj. meniji koji trebaju da se sakriju se ne povlače nazad.

Ima li neko ideju zbog čega se to dešava?

2. Dodatna dva piksela na dnu podmenija... Tu bi trebala da bude bela linija, tj. da poslednja stavka menija "zatvori" blok sa svojim border-bottom. U FF sve u redu, IE brlja...

3. Odvratno treperenje kursora u Exploreru. Znam, timer i opacity su prilično zeznuti, posebno u IEu. Još dodajte tome da je iza Flash objekat... Hteo bih da fiksiram kursor u pointer (hand) bez poščanog sata. Moguće?

PS: Kakva glavolomka. Ne mogu da verujem da sam toliko vremena utrošio na jedan običan meni... No, dobra stvar je što sam naučio par korisnih trikova.

[nixa]

A zasto nisi probao sa ovim meni softwerom

www.milonic.com

[Ilija Studen]

Kasno Marko na Kosovo stiže...

[nixa]

Jbg :) al eto ti za ubuduce ...mada ako samo prepakujes ovo tvoje u milonic ,imace bolje perfomanse nego ovo tvoje :)

[Ilija Studen]

Performanse su degradirane zbog osetljivog timera (0.025), poluprozirnosti (ovo je kritično) i činjenice da je iza Flash. Takva su pravila igre, ja sam samo vodoinstalater u ovoj priči.

Znali li neko neki način da se ubrza? Nekako mi se čini da transparencija najviše kolje, ali bez nje ne može...

[nixa]

Samo ti probaj :)

[Ilija Studen]

1. IE bug - position: relative kreira novi sloj za svoje child elemente, a time zezne z-index. Našao sam problem, ali ne i rešenje.
2. IE whitespace bug (http://www.google.com/search?hl=en&q=ie+whitespace+bug&btnG=Google+Search)
3. Niko nije pravio probleme oko ovoga, a zbog stiske sa vremenom nisam se baš posvetio rešavanju istog.

[ivanhoe]

vidi ovo
http://www.dizajnzona.com/forums/index.php?showtopic=7323

ja sam imao slican problem, pa je bilo i par saveta, mada sam ja na kraju to ipak resio preraspodelom div-ova, sto nije resenje negao izbegavanje...ali radi...

[Dragan Babić]

"možda" ti je kasno za ovo ali probaj dynarchov hmenu. http://dynarch.com

[jasmanac]

Sto se tice usability-ja, drop down meni je sam po sebi daleko od usability komponente tako da rasprava o vremenima animacije samog menija je bespotrebna.

@Nixa: Mnogo je bre ruzan ovaj meni :P

[zextra]

kad budes smoren, napravi neku foru da se brzina izvlacenja i uvlacenja menija menja eksponencijalno (tipa, kada treba da se prikaze, ide brzo do pred kraj, a onda usporava; kad se zatvara, krece polako, da bi nedugo zatim ubrzao i "zalupio" se ;))

[Petar Marić]

To je valjda logaritamska funkcija (za prikazivanje) :P

[noviKorisnik]

Jok, nego algoritamska :-)))

[ivanhoe]

To je valjda logaritamska funkcija (za prikazivanje) :P


pa lepo covek rece exponencijalno, sto je potpuno ista stvar....skroz ne razumem ovaj komentar?


@jasmanac: ok, u pravu si za usability (to jest manjak istog), ali jedna stvar je da li ce moci da ga koristi daltonista na lynx-u, a drugo da li ce ti se u 50% slucajeva zatvoriti pre nego sto stignes da pomeris misa do submenija...delay kod zatvaranja je naprosto neophodna stvar za normalno funkcionisanje...

[zextra]

...a sta je logaritamska nego inverzna exponencijalna... :P

[DejanVesic]

Napravio sam meni...

http://madlenianum.revolutioninteractive.com/

Pošto nisam JS ekspert (može se reći da sam upućeni početnik) bilo je jako mnogo stranputica na koje sam zaglavljivao. Stvar je daleko od savršene (ima par "tikova") ali definitivno više namam vreme da se posvetim ovome (drugi projekti su onhold zbog ovoga).


Veoma, veoma dobar meni je ovde:

http://www.aplus.co.yu/adxmenu/intro/

Vrlo prilagodljiv i testiran na zilion platformi/browsera.

Obavezno ga probajte.

[bluesman]

Pa i nije nešto, vrlo je basic, slabe performanse ima, koči se i poskakuje (FF) a naročito mi se ne sviđa na ovoj strani background koji se jednostavno odseče levo i dole.

[ivanhoe]

Meni je ok radio onaj demo sa XP look-om (na FF 1.5), nije seckao, samo bi trebalo dodati preload slicica za meni, a ne da se ucitavaju kad otvoris meni....

[bojan_bozovic]

Secka i koci i to nevidjeno (FF 1.5) na IE6 radi brzo, ali se transparentni meni skoro i ne vidi. Na Operi je sve vrlo brzo, ali ona ne podrzava opacity. Moja je preporuka da izbacis alphablending, narocito je lose na FF a ni na IE nije najbolje jer se i ne primecuje... Meni je lose postavljen sto se usability tice, jer se podmeniji otvaraju iznad animacije, sto odvlaci paznju sa menija.

[aleck]

Pa i nije nešto, vrlo je basic, slabe performanse ima, koči se i poskakuje (FF) a naročito mi se ne sviđa na ovoj strani background koji se jednostavno odseče levo i dole.

Nisam siguran da li govoriš o mom (ADxMenu) meniju ili o ovom na Madlenianum sajtu...

Anw, vidim da me Dejan izreklamirao. Video sam da ima diskusija na ovu temu no nisam hteo da pominjem ADxMenu jer na njemu nisam radio ništa ozbiljno duže od godinu dana, izašle u međuvremenu nove verzije browsera, koristio sam neke sasvim druge varijante (bez .htc fajla) na projektima itd.

Čim se pronađe vremena biće updatea...no "pronađe vremena" je gadna stvar. :(

Značili bi mi svi primeri što je neko isprobavao (ako iko) jer problema uvek može da bude. Nekoliko stvari je ipak važno znati kada se radi o istom:
- ovo je namenjeno standard-compliant stranama, tj. vro je moguće da se sve zbinguje u quirks režimu rada browsera
- pogledati http://www.aplus.co.yu/adxmenu/intro/#troubleshoot ako se naiđe na problem - neke stvari su prestale da važe sa izlaskom FF 1.5
- cilj menija i jeste da bude jednostavan i da radi posao sa što manje koda - fancy efekti kao ovaj slide na Ilijinom primeru nikada nisu bili predviđeni da postoje*

Generalna ideja ADxMenu dizajna - što možeš da uradiš sa CSS-om uradio si. Javascript je tu samo nužno zlo i služi samo da popravi ponašanje menija, nikako da kreira vizuelne efekte.

Ovaj meni u radu se može videti na www.stanjames.com i www.betfred.com - to su dve verzije čija je IE implementacija bitno različita. Betfred koristi posebno pisan skript koji nisam objavio na blogu, jer je napravljen za taj slučaj .


* - baš prošle nedelje mi je jedan tip nudio 250$ da mu napravim sličan feature za ADxMenu, no sam odbio. Em što nemam kad, em što ADxMenu čvrsto držim free pa bi takav feature bio javan kad bi postojao, em što mi Enterprise verzija i ovako ima previše koda za moj ukus pa mi samo treba još neka komplikacija

[bluesman]

Govorio sam o onome koji sam link video... ima neke čudne pozadine... ne znam čiji je.

Ali na ovom linku koji si dao (betfred.com) i dalje fali malo usability. Ne znam koji script hoćeš da pogledam (ako uopšte hoćeš tako nešto).

[aleck]

Ali na ovom linku koji si dao (betfred.com) i dalje fali malo usability. Ne znam koji script hoćeš da pogledam (ako uopšte hoćeš tako nešto).

Ne, to mi nije bila namera. Teško da bi išta mogao da provališ tamo bez izrazito mnogo truda - skriptovi su spojeni (više malih u jedan veći) a zatim crunchovani (izbačeni komentari i beline).

Imao sam na umu prijavu nekog očiglednog vizuelnog ili funkcionalnog problema, na koju se slučajno nabasa, ne neku posebnu proveru. Spomenuo si background koji se odseče, pa me to zainteresovalo...
Kod spomenutih menija nema potrebe za tim - urađeni su kako je dati klijent tražio i rade tako mesecima/godinama unazad, te je sve poznato i rešeno šta je trebalo.

[bluesman]

urađeni su kako je dati klijent tražio

You're my nigga' :) That's all that counts, **** usability :)

[nixa]

all that matters ineed :)

[Dragan Babić]

videcemo crnci kada bude osveta slepih paraplegicara koju cete onda pesmu pevati!


:D :P

[aleck]

More, nemo' me dirate u staru ranu. :o

Da je bilo po mome, taj šugavi meni ne bi uopšte bi tu. Ogroman je i povećava svaku stranicu na sajtu, ponegde je 50% stranice sam taj meni. A tek što sam imao muke na serveru sa tim sranjcetom koje mora da se osvežava svakih par minuta, a zahteva 100+ upita da se kompletno i tačno pročita. Pičvajz...