Számos weboldalon látni szebbnél szebb, csillogó hatású menüket. Ezt a csillogó hatást szokták “Web 2.0″ stílusnak nevezni, ami elég nagy népszerűségnek örvend a látványossága miatt. A mostani leírásban egy ilyet fogunk csinálni mi magunk is. Nincs másra szükségünk, mint egy Adobe Photoshop-ra (30 napos próbaverzió letöltése) és egy egérre! Lássunk is neki, az alább látható mintát fogjuk elkészíteni!

1.Lépés

Első lépésben hozzunk létre egy 800px széles, 30px magas dokumentumot, fehér háttérrel. Természetesen a méretektől el lehet térni, én most jelen esetben egy olyan oldalhoz tervezem a menüt, ahol a tartalmi rész 800px széles, így a felső menüsor kitölti majd az egészet.

2.Lépés

A layers palettán látható background layerre kattintsunk duplán, így átalakíthatjuk ezt az amúgy zárolt réteget hagyományos réteggé. Ha ezzel megvagyunk, az egér jobb gombjával kattintsunk rá a rétegünkre, majd válasszuk ki a Blending Options menüpontot. A felugró új ablakban navigáljunk a Gradient Overlay részre, ahol a gradient részre kattintva állíthatjuk be a színeket. (ha nem a színcsíkra, hanem a lefele mutató nyílra kattintunk, akkor egy legördülő menüben találjuk a gradient-mintákat) Miután megnyitottuk a színátmenet beállításához szükséges ablakot, a mellékelt kép segítségével állítsuk be a színeket. Segítségül álljanak itt a színkódok, valamint a százalékos arányszám, hogy hova kell rakni őket. (új szín-pozíció lehelyezéséhez egyszerűen kattintsunk a csík alatti részre)

• 0%: #94c516
• 52%: #8eb92a
• 52%: #72aa00
• 92%: #a8c732
• 100%: #b9ce44

3.Lépés

A munka felével már meg is vagyunk. Most a Text tool segítségével helyezzünk el menüelemeket a sávon, igény szerint, lehetőleg egyenlő távolságra egymástól. Én 16px méretű Arial betűtípust használtam, vastag kivitelben, fehér (#fff) színben.

4.Lépés

És a záróakkordja a menünek: a hover effect, azaz a gomb azon állapotba, amikor az egeret a menüpont fölé visszük! Ezt egy egyszerű bemélyítéssel fogjuk megoldani! A Layers palettán válasszuk ki a legalsó réteget (amin a zöld színátmenet van), majd az eszköztárból a Rounded Rectangle Tool-t. (Lehet, hogy nem ez lesz aktív, hanem a Rectangle Tool, ebben az esetben nyomjuk le hosszan a gombot, mire a felugró menüből válasszuk ki a megfelelőt.) Mindegy, hogy milyen szín van beállítva a téglalaphoz, utólag meg tudjuk változtatni. Miután kiválasztottuk a megfelelő eszközt, rajzoljunk egy 3px saroklekerekítésű téglalapot az első menüpont “alá”. (a saroklekerekítés mértékét az ablak tetejénél lévő “Radius” értéknél lehet megadni) Ha elégedettek vagyunk az eredménnyel, menjünk be a réteghez tartozó Blending Optionsbe, ott is az Inner Shadow részbe. Állítsuk át az Opacity-t 33%-ra, a Distance-t 3%-ra, a Choke-t 0%-ra, a Size-t pedig 3%-ra. Ezután már csak annyi a dolgunk, hogy a Color Overlay-ben beállítunk egy nekünk megfelelő színt, és készen is vagyunk!

Zárszó

Remélhetőleg sikerült egy kis ihletet adnom, valamint segítséget egy egyszerű, gyorsan kivitelezhető, de látványos menü elkészítéséhez, amit bátran lehet használni szinte bármilyen oldalon!