Múltkor áttekintettük, hogy milyen egyéni hátteret lehet
készíteni kép felhasználás nélkül, csupán CSS3-mal. Most menüszerkezetet fogunk készíteni CSS3-mal és animációt is teszünk rá.
Először is készítsünk egy menüt, melyben van pár menüpont.
HTML5-öt használva a body-n belül nav tagek közt tudjuk definiálni.
<nav>
<a
href="#">Kezdőlap</a>
<a
href="#">Rólunk</a>
<a
href="#">Szolgáltatásaink</a>
<a
href="#">Elérhetőség</a>
</nav>
A menüpontoknak bármilyen formázást adhatunk, így
meghatározzuk a betű színét és akár hátteret is kaphat. Kiindulásként kap egy
narancsos betűszínt, kivastagítjuk, az aláhúzást eltűntetjük a linkről és kap
egy kis paddingot, hogy legyen távolság a pontok között.
nav a{
text-decoration:none;
color:#FF7E22;
font-weight:bold;
padding:10px;
}
Így most egy átlagos menü megjelenése van és most jön a
lényeg. CSS3-ban meg lehet adni transition-t, mellyel késleltetett változást
idézhetünk elő és így olyan hatása lesz, mintha egy animáció futna le a
háttérben. Ennél is figyelni kell a böngészőkre –webkit, -moz, -ms, és –o előtaggal
tudjuk működésre bírni a különböző böngészőkben. Ezt a hover eseményre tesszük
rá és csupán a betűszínt módosítjuk, illetve háttérszínt adunk neki.
nav a:hover{
-webkit-transition: all 600ms
linear;
-moz-transition:
all 600ms linear;
-ms-transition:
all 600ms linear;
-o-transition:
all 600ms linear;
transition:
all 600ms linear;
color:#FEFEFE;
background:#FF7E22;
}
Ennek eredménye az lesz, ha bármely menüpont fölé visszük az
egeret, annak 600ms alatt megváltozik a betűszíne és megjelenik a háttér. Az
all megnevezés azt jelöli, hogy mindenre érvényes a transition, értéke lehet:
all, color, background, height, weight, outline.
A linear az animáció típusát jelöli, melynek értéke lehet a javascriptből jól ismert: easy, linear, easy-in, easy-out, easy-in-out.
Az átváltás ideje secondban és milisecondban adható meg.
A linear az animáció típusát jelöli, melynek értéke lehet a javascriptből jól ismert: easy, linear, easy-in, easy-out, easy-in-out.
Az átváltás ideje secondban és milisecondban adható meg.
Ezzel a technikával könnyedén egyedivé tehetjük bármely menü
szerkezetünket és remekül alkalmazható legördülő menü esetében is, így nem
terheljük a felhasználó gépét, és nem áll fenn a veszélye annak, hogy nem engedélyezte böngészőjében
a javascriptet, és ezért nem jelenne meg valami.
Nincsenek megjegyzések:
Megjegyzés küldése