DevProTalk
Strana 1 od 4 1 234 >
Prikažite 40 poruka iz ove teme na jednoj stani

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   JavaScript meni (http://www.devprotalk.com/showthread.php?t=404)

Ilija Studen 02. 12. 2005. 17:48
JavaScript meni
 
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 02. 12. 2005. 18:59
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 02. 12. 2005. 21:56
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 02. 12. 2005. 22:19
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 03. 12. 2005. 00:57
Citat:
Treba mi relativno jednostavan JavaScript meni koji animira
Ako smem da pitam - KAKO da animira?

Ilija Studen 03. 12. 2005. 01:02
Citat:
Originalno napisao noviKorisnik
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 03. 12. 2005. 01:45
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 03. 12. 2005. 08:47
@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 03. 12. 2005. 19:12
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 04. 12. 2005. 16:26
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):

Kôd:
#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.


Vreme je GMT +2. Trenutno vreme je 19:30.
Strana 1 od 4 1 234 >
Prikažite 40 poruka iz ove teme na jednoj stani

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.