ugrás a tartalomhoz

Weboldal menü-gombjainak megjelenése

planB777 · 2013. Júl. 24. (Sze), 12.55
Hali!

Kezdő weblapszerkesztőként szeretném megkérdezni, hogy hogyan lehetne a weboldal menüpontjainak effektjeit olyanra megváltoztatni, hogy ha az egeret a menüpontra húzzuk, akkor az nem csak például más színű lesz mielőtt rákattintunk, hanem szépen fokozatosan sötétedik be olyan színűre, ami majd olyankor lesz, amikor már "current_page_item" a menüpont.
Valami ilyesmi effektre gondolok, ami ezen a honlapon van a menüpontoknál

Elnézést a bonyolult megfogalmazásért tényleg!
Segítségeteket előre is köszönöm!
‹ Ez hamis feltételezés Linkek kezelése AJAX esetén ›
 ■
1

jQuery

Steve31 · 2013. Júl. 24. (Sze), 13.23
Találkoztál már a jQuery-vel ? Annak animate metódusával varászlatos dolgokat tudsz, mint például a fent leírtak szerint. http://www.w3schools.com/jquery/default.asp
Itt egyszerűen elsajátítod, de ha bővebben bele akarod ásni magad, akkora következő helyen nézelődj: http://jquery.com/
2

Plugin nélkül

Poetro · 2013. Júl. 24. (Sze), 13.46
A jQuery plugin nélkül nem tud színeket, ezáltal háttérszínt sem animálni. Sokkal egyszerűbb CSS transition-nel megoldani a problémát, és még felesleges 90kb-tal sem terheltük az oldalt egyetlen animáció kedvéért.
Egyébként, miért nem a hivatalos dokumentációt linkelted, miért a w3schools-osat?

Ha mindenképpen JavaScriptet szeretne használni az animációra, és még nem használ semmilyen keretrendszert, akkor már inkább Émile, mivel ez tud színeket is animálni, és mindössze 2kb.
3

Ha nem találkoztál még a

bamegakapa · 2013. Júl. 24. (Sze), 14.07
Ha nem találkoztál még a jQuery-vel, semmiképp ne emiatt kezdd el használni. A DOM és az események kezelésére nyújt egy praktikus felületet, elsimítva a böngészők közti különbségeket.

Ugyanígy, ha eddig nem találkoztál a w3schools-szal, semmiképp NE kezdd használni. Ha jó átfogó webes dokumentációt szeretnél, ott a Mozilla Developer Network, a jQuery leírását pedig értelemszerűen a jQuery saját honlapján érdemes keresni. A w3schools már eddig is elég kárt okozott.
4

A linkelt oldal CSS

bamegakapa · 2013. Júl. 24. (Sze), 14.22
A linkelt oldal CSS transitiont használ, ahogy Poetro is írta.


/* definiálja a linken (a), hogy ha változik a háttérszín és a szín, azt milyen animációval tegye */
.header-menu > ul > li > a {
    -webkit-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
    -moz-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
    -o-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

/* hovernél megváltoztatja a háttérszínt, az animáció pedig működésbe fog lépni */
.header-menu > ul > li > a:hover {
    background-color: #a20058;
}
A caniuse.com oldalon tudod ellenőrizni az egyes funkciók böngészőtámogatottságát. A böngészőspecifikus prefixek (-webkit, -moz, stb.) azért vannak a kódban, mert bizonyos böngészők bizonyos verziói még csak prefixszel értelmezték az adott funkciót, mert a szabvány nem volt végleges. Láthatod a transition támogatottságát mutató táblázatból, hogy a -moz és -o prefixeket akár már el is lehetne hagyni, a -webkit viszont még szükséges.
5

Ettől a kódtól máris úgy fog

planB777 · 2013. Júl. 24. (Sze), 16.36
Ettől a kódtól máris úgy fog kinézni, ahogy fentebb linkeltem?

Ha igen, akkor hova illesszem be? A .css fájlba?
6

HTML

Poetro · 2013. Júl. 24. (Sze), 16.37
Ha ugyanaz a HTML struktúrád, mint a linkelt oldalnak, akkor igen, és igen, a CSS fájlba.
7

Mint kezdő

bamegakapa · 2013. Júl. 24. (Sze), 16.42
Mint kezdő weblapszerkesztőnek, mindenképp jeleznem kell neked, hogy ebben a szakmában kevés dolog működik úgy, hogy beilleszted valaki más kódját a te kódodba és máris működik :). A kódod ismerete nélkül pedig semmiképp nem jelenthetek ki ilyesmit.

Minden erőforrást megadtunk, amire szükséged lesz a feladathoz, ha további problémák merülnek fel, várjuk a részletesebb kérdést.
8

SIKER

planB777 · 2013. Júl. 24. (Sze), 17.14
Sikerült!

Legelőször jQuery-vel próbáltam megcsinálni, de nem sikerült, végül CSS Transition-nal sikerült megcsinálnom.

Köszönöm a segítségeteket!
9

IE8 ?

Steve31 · 2013. Júl. 25. (Cs), 10.14
Ime a válasz, hogy jQuery-ven is lehet színt animálni: http://www.bitstorm.org/jquery/color-animation/. Ha az oldalnak IE8-ban is kell működnie, akkor ezt használnám. Különben a CSS transition is megfelelő megoldás, ahogy írtátok, ha csak az oldal IE9-től támogatott.
10

Lehet

Poetro · 2013. Júl. 25. (Cs), 10.47
Nem mondtam, hogy nem lehet, de plugin kell hozzá, és a fenti oldalon is használnak egyet. Azaz kell neked egy 90KB-os jQuery és egy 2KB-os plugin, amit megtehetnél mindössze 2KB-ból pl Émile használatával. Nem mondom, hogy rossz a jQuery, csak nem erre való. Ha legalább a 50%-át használod, és nem tudsz jobbat, akkor érdemes csak használni szerintem.
11

A transition tipikusan olyan

bamegakapa · 2013. Júl. 25. (Cs), 12.45
A transition tipikusan olyan dolog, ami nem nagy érvágás ilyen esetben. A funkcionalitás legyen meg a régi IE-ben, de ha nem olyan szép, hát egye fene. Persze lehet ilyen JS megoldásokat alkalmazni, de ezek csak tovább lassítják az amúgy is fájdalmasan lassú régi IE-ket.