CSS: menü villogás kivédése

A probléma

Legtöbb esetben a sitebuilderek a menügombokat úgy oldják meg, hogy a gomb minden állapota egy külön kép. A probléma az, hogy például egy a:hover vagy a:active állapotváltozásnál, ha a felhasználó a gomb fölé viszi az egeret, eltünik a háttere amíg a hover állapothoz kapcsolódó képet le nem tölti.

[A régi szép időkben, amikor az ilyen egyszerű menüket JavaScript-el csinálták, volt egy opció erre amit preload image-nek hívtak, ám a jelen megoldás egyszerűbb, és szemantikailag, illetve SEO szempontjából is helyes kódot kapunk.]

A megoldás

Ennek kiküszöbölésére van egy olyan megoldás, hogy mentsük el az összes menüállapotot egy képbe, így a képet a böngésző csak egyszer tölti le, és a képet utána CSS-ből pozícionáljuk minden állapotnak megfelelően. A következőkben ezt fogom bemutatni.

Készítsük el a menügombunk mindhárom változatát (a:link, a:hover, a:active). Hozzunk létre egy képfájlt úgy hogy a szélessége akkora legyen, mint a menügomb, a magassága pedig a menügomb állapotok (képek) számának legyen az összege. Tehát akkor, ha a menügomb 150px széles, és 32px magas, akkor egy 150px széles, és 96px magas képet kell létrehoznunk.

Most illesszük be egymás alá a három állapotnak megfelelő képet, felülről lefelé a következő sorrendben: a:link, a:hover, a:active. Figyeljünk kivágásnál minden pixelre, mert ez fontos a sikerhez. Egy pixel is számít! Ha mindent jól csináltunk, akkor egy hasonló dolgot kellett hogy kapjunk:

Illetve vágjuk ki a menü hátterét is egy 1px széles csíkban.

Elérkeztünk ahhoz a részhez, amikor ezt lekódoljuk. A kódunk alapjául a HD CSS Framework fog szolgálni. Ezt azért fontos kiemelni, mert lesznek bizonyos dolgok, amik esetleg egy ?csupasz? html fájlnál másképpen működnek.

A HTML kód a következő képen fog kinézni:

1
2
3
4
5
6
7
8
9
10

<div id="main">
  <ul class="menu">
	<li>
      <a class="active" href="#">Menüpont 1</a></li>
	<li>
      <a href="#">Menüpont 2</a></li>
	<li>
      <a href="#">Menüpont 3</a></li>
  </ul>
</div>

A CSS kód pedig a következő képen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 11px;
}
 
#main {
  display:block;
  float: left;
  width: 980px;
  left: 50%;
  margin-left: -490px;
  position: relative;
}
 
.menu {
  display:block;
  float: left;
  width: 980px;
  height: 32px;
  background: url(../img/menu_bg.jpg) repeat;
}
 
.menu li {
  display: block;
  float: left;
  width: 150px;
  height: 32px;
  padding-left: 15px;
}
 
.menu li a:link {
  display: block;
  float: left;
  width: 150px;
  height: 25px;
  padding-top: 7px;
  background: url(../img/buttons.jpg) no-repeat;
  text-align: center;
  text-decoration: none;
  color:#135000;
}
 
.menu li a:hover {
  background: url(../img/buttons.jpg) no-repeat center;
}
 
.menu li a.active {
  background: url(../img/buttons.jpg) no-repeat bottom;
}

Látható, hogy gyakorlatilag a center, és bottom értékét változtatom a háttérnek. Ennyire egyszerű. Ha nagyobb az egyik állapotban a gomb, mint a másiknak, akkor a különbséget ki kell hagyni köztük. Tehát ha a állapotban 20px magas, hover állapotban 25px magas, active állapotban pedig szintén 25px magas, akkor az a állapot és a hover állapot között kell hagyni 5px transparent (átlátszó), vagy a háttérnek megfelelő helyet.

Ez a módszer, nem csak menüre, hanem bármilyen olyan elemre ráhúzható, aminek szükséges hover, vagy active állapot. Remélem, sokaknak nyújt majd segítséget ez a megoldás, a minőségi weboldalkészítésben.

A példa és a leírás (PDF) csomaga letöltése (ZIP)