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