Egyéni menü CSS3-mal

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.

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.