Egy olyan menüt szerettem volna készíteni, ahol a menü elemeit egy szakács sapkáján lévő szamócák jelzik, melettük a menü szövege. Azt is szerettem volna ha a user az egérrel rámutat a menüre akkor a szamóca elfordul.
Valahogy így:
Grafikai előkészítés
Szükség lesz a html-en és a css-en kívül egy grafikai programra (Gimp, Photoshop) amivel a grafikai elemeket el tudjuk készíteni. Kerestem a neten egy mosolygós szakács / cukrász arcot, aki szembe néz és van a fején sapka. Az egész menü kialakításában – figyelembe véve a css és html kódolást és a Gimppel való munkát is – ez tartott a legtovább. Aztán fogtam és körbevágtam a fejet sapkástól. Elmentettem egy átlátszó hátterű gif képként. Aztán szépen három darabba vágtam. Az első szelet a sapka teteje volt, a második a sapka középső része, ami ismétlődni fog, a harmadik szelet pedig a fej. Erre azért van szükség, mert akár egy elem van a menüben, akár tíz a sapka teteje és az arc ugyanúgy néz ki. Az egyetlen dolog ami változik az a sapka közepe (magassága). Ezen felül el kellett készítenem egy animált gif-et, ami a szamócát forgatja el. Persze biztosan pár flash párti olvasó felháborodik ezen az eljáráson, de vannak akik nem szeretik a flasht. Például én sem. Meg ehhez a megoldáshoz nem kell egy jogtiszta flash gyártó program ;-).
Az alap html kód
<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en"><br /><br /> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-2"> <title>CSS nyalánkságok</title> </head> <body> <div class="menualap"> <div><img src="sapkacsucs.gif" width="143" height="27" border="0"></div> <ul class="menu"> <li class="menuitem"><a href="edesseg.html"> Édességek</a></li> </ul> <div><img src="pofa.gif" width="143" height="167" border="0"></div> </div> </body> </html>
A menüalap div
fogja össze a menünket, a div
a sapkacsucs.gif-fel adja a menünk tetejét, ami a szakács sapkájának a teteje, a következő ul
adja meg a menü elemeit, ahol egyenlőre egyetlen elemünk van, és végül az utolsó div
adja a menünk alját, ami a szakács arca lesz.
Itt egyből beleütközünk az Internet Explorer hiányosságaiba, ugyanis ha a forráskódunkban a div
és a /div
elem nincs egy sorban az img
elemmel, akkor ez a böngésző betesz egy felesleges soremelést a kép elé, ami miatt a képünk szétesne. Ennyit arról, hogy az alap html kód hogyan befolyásolja a css-sel design-osított oldalunkat… Persze plusz css definíciókkal biztosan ki lehetne ezt küszöbölni, de ez esetben egyszerűbb a html kód módosítása.
CSS definíciók
A menualap
megadja, hogy milyen széles legyen maga a fő div
-ünk. Azért pont 143 px-re álítottam, mert a felszeletelt gif képem ilyen széles volt.
.menualap {width: 143px;}
A menu
margin
és padding
értékek 0-ra állításával megakadályozza, hogy az ul
és li
elemünk behúzza magát. A háttérképként használt kép a sapkaalap.gif
a sapka törzsét adja. Ezt úgy kell elkészíteni, hogy varratok nélkül tudjon ismétlődni, ahogy újabb és újabb menü elemeket adunk majd a listához. Szélességét örökli a menualap
-tól, tehát amiatt nem kell aggódnunk, hogy széltébe elkezdené ismételni a háttérképet. Lefelé meg fogja ismételni, de pont ez az amit akarunk.
.menu {background-image: url('sapkaalap.gif'); color: #f00; margin: 0 0 0 0; padding: 0 0 0 0;}
A menuitem
adja maguknak a menüpontoknak a definícióját. Kirakjuk a szamóca képét a bal szélre háttérképként, letiltjuk az ismétlődést, a list-style-type
-ot none
-ra állítjuk, hogy ne rajzoljanak ki semmit a böngészők, és a padding
-ot úgy állítjuk be, hogy a menü szövege ne lógjon rá a szamócára, és kb a szamóca magasságának a közepénél legyen. Mivel a szamoca.gif
35 px
magas megadjuk ezt az értéket magasságnak, segítve ezzel az Internet Explorert, hogy meg tudja jeleníteni a menünket kb úgy ahogy mi szeretnénk.
.menuitem {background-image: url('szamoca.gif'); background-repeat: no-repeat; background-position: top left; font-size: 14px; font-weight: bold; padding: 18px 0 0 50px; list-style-type: none; height: 35px;}
Ezután arról kell gondoskodnunk, hogy úgy nézzen ki a link ahogy mi szeretnénk, vagyis ne legyen aláhúzva, piros és small-caps legyen.
.menuitem a {text-decoration: none; color: #f00; font-variant: small-caps;}
Végezetül pedig megadjuk, hogy hover esemény bekövetkezésekor (vagyis ha az egérmutató a menü fölé kerül) akkor az álló szamóca forduljon el. Ezt úgy érjük el, hogy a háttérképet lecseréljük egy animált gif képre. Ennél az animációt úgy állítottam be, hogy csak egyszer játsza le.
.menuitem:hover {background-image: url('szamoca-anim.gif'); background-repeat: no-repeat; background-position: top left; text-decoration: underline;}
Egész jól állunk, de ha kipróbáljuk rájövünk, hogy az Internet Explorer egyenlőre nem tud megbírkózni a feladattal, míg a többi böngésző már igen. Bevezetjük ezért a iedebilseg
definíciót. Hiába adtuk meg, hogy a menuitem
35 px magas, az Explorert ez egyáltalán nem hatotta meg, ami azért baj, mert e nélkül levágja a szamócánk alját. Módosítanunk kell tehát a html kódot és létre kell hoznunk az új css class-t.
A html-t így módosítjuk:
<li class="menuitem"><span class="iedebilseg"><a href="edesseg.html">Édességek</a></span></li>
A css-t meg így:
.iedebilseg {height: 35px; margin: 0; padding: 0;}/*IE debilség*/
Kész is vagyunk. Ezután kipróbálhatjuk, hogy hogyan néz ki a menünk amikor több mint egy elem van benne.
Bugok
- A Windowsos Firefoxban a menü szamócái csak egyetlen alkalommal animálódnak, a többi alkalommal csak átkattannak a végállapotba. A Linuxos Firefox nem csinálja ezt a hibát.
- Macintosh alatt Firefoxban a linkre mutatáskor felvillan valamivel jobbrább a szamóca. ez a hiba szintén nem megfigyelhető másik oprendszerekben.
- Az IE lejátsza a háttérben lévő animált gifeket, de ha hover eseménynél cserélni kell a képet, akkor már nem játsza le. Sajnos ezért IE alatt a szamócák egyáltalán nem mozdulnak meg.
- A menü megnevezésének elég rövidnek (vagy kisebb betűméretűnek) kell lennie, hogy ne lógjon le a sapkáról
Ez csak egy ötlet. Nem próbáltam ki de lehet, működik. A lényeg az, hogy hovernél ne kelljen képet cserélni. A lényeg, hogy egy képben legyen a sima és az animált háttér. Kell csinálni egy olyan gif-t ami kétszeres magasságú.A a felső része az álló szamóca az alsó az animált. Így gondolom: http://www.techproba.extra.hu/szamoca-anim2.gif
Ezután nem kell más mint h a css-ben a kép magaságának felét adjuk meg. Hovernél pedig egyszerűen feljebb csúsztatjuk. Nagyjából így:
(nálam 100px magas let a kép)
.szamoca a {
background: url(szamoca-anim.gif) no-repeat;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
overflow: hidden;
}
.szamoca a:hover {
background-position: 0 -50px;
}
Így nem kell képcsere, mert ugyan azt a képet használja.
Szerinted? Nekem most nincs kedvem kipróbálni.Álmos vagyok.
Amúgy az ötlet innen:
http://www.tutorial.hu/node/62