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

Írta: | 2008. november 23. | kategóriák: (X)HTML, CSS, Design, Web

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 menü különféle állapotai

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:
A gombok állapotai

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

A menü háttere (vízszintes irányban felnagyítva)

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)



Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Remek, nekem nagyon tetszik!

Meg tudod adni mi a plugin neve amivel a HTML és CSS részt beillesztetted?

Csáki István 2008. november 24. - 16:26

Szia!
Gondolom WP plugin-re gondolsz!?
Sajnos ezt én nem tudom megmondani, ezt a bejegyzést Tupacko adta közre, és csak elküldtem neki. Remélem majd válaszol.

Hutchington 2008. november 24. - 16:50

Igen arra!

Köszönöm, akkor még visszanézek 🙂

Csáki István 2008. november 24. - 16:59

Persze, hogy válaszolok 🙂 A wordpress kódformázó plugin neve WP-Syntax.

Avatar Tupacko
2008. november 24.
19:20

Ha két képet akarsz használni, arra is van mód egy egyszerű css trükkel:

a {
background-image: url(/image_hover.jpg);
}

a:link {
background-image: url(/image.jpg);
}

a:hover {
background-image: url(/image_hover.jpg);
}

Így be fogja tölteni az a-ra a hover képet, de mivel linkről van szó, legyeréli a sima képre, a hover eseménynél viszont megint előveszi, de mivel az már egyszer betöltődött, így nem kell neki mégegyszer.

wintercounter 2009. május 30. - 01:21

Erdekes, koszi a tippet 🙂
En a :link-et nem szoktam hasznalni, valahogy csak a leggyakrabban hasznalt pseudo parancsokat :hover, :active merem nyugodtan alkalmazni 😛 Nehany esetben, igy is elegge maskent ertelmezik a kulonfele bongeszok.

Avatar Tupacko
2009. május 30.
13:33

Mégjobb, ha egy képben letároljuk az összes menü képét. Így maga a kép mérete is kisebb lesz, mert a meta információk csak egyszer szerepelnek benne, a tömörítés is jobb stb. Ekkor a center, bottom technika helyett lehet két számból álló értékkel pozicionálni a kép helyét a látható részen.

Weblap.ro 2010. február 14. - 14:36

Az osszest is lehet, meg egyeb kepeket is, de szerintem csoportositani kell, ha mar ugynevezett “sprite”-okat hasznalunk.

Avatar Tupacko
2010. február 15.
00:33

Persze, aztán lőttek a SEO-nak 🙂

István 2010. február 15. - 00:34

@Istvan, mibol gondolod?

Avatar Tupacko
2010. február 16.
00:44