Bevillanó menügomb kiküszöbölése állapotváltozásnál

Legtöbb esetben a sitebuilderek a menügombokat úgy oldják meg, hogy a gomb minden állapota egy-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.

(ez természetesen nem 1px széles, de ha azt raknám be, akkor nem látnád:)

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. LETÖLTÉS

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

1
2
3
4
5
6
7

<div id="main">
	<ul class="menu">
		<li><a href="#" class="active">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
50
51
52
53
54
55
56
57

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 {
	display: block;
	float: left;
	width: 150px;
	height: 25px;
	padding-top: 7px;
	background: url(../img/buttons.jpg) no-repeat bottom;
	text-align: center;
	text-decoration: none;
	color:#135000;
}

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:link állapotban 20px magas, a:hover állapotban 25px magas, és a.active állapotban pedig szintén 25px magas, akkor az a:link állapot és a 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.

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

12 HOZZÁSZÓLÁS

  1. typo:
    “következő képen” = következőképpen
    “a.active” = a:active

    szükségtelen kód:
    .menu li a:link-nél és .menu li a:active-nél a már korábban (.menu li-ben) meghatározott tulajdonságok… (ez így nagyon rendetlen.)

    a hd css framework jó dolog lehet, bár e kód szempontjából teljesen szükségtelen. inkább pontosabb css kellene, gondolok arra, hogy a hátteret ne shorthand módon írd a kódba, mivel épp annak pozícionálása a lényeg. background-attachment: ***; background-color: #******; background-image: url( ./*.* ); background-position: *** ***; background-repeat: ***;… csak mert a default állapot csak akkor létezik, ha a júzer nem határozott meg helyette valami mást (egy rész-kód esetében ebben nem szabad bízni)… sőt, egy jó tutorial példa paddingot sem használ, csak bezavar, mert valószínűleg senki más nem fog ugyanezekkel az értékekkel dolgozni. a negatív margókról nem is beszélve…

    mindegy, sokaknak biztos hasznos infókat szolgáltatott az írás

  2. zoleytaylor:
    Ha kiírok minden css tulajdonságot külön sorba, akkor abba kötsz bele? Ezzel csak arra próbálok rávilágítani, hogy kinek így – kinek úgy… Ha nem Neked, akkor úgy másnak nem tetszett volna. Nem részletezem tovább. Pont ezért írtam ki például az a:link-et, valamint nem hiába van úgy írva a tutorialban hogy a.active, mivel az active állapot csak abban a pillanatban érvényes, amikor nyomva tartod az egér billentyűjét (kivéve IE); ha pedig .active, akkor lehetőség van esetleg ezzel a class-al ellátni az adott linket amikor az adott aloldalon vagyunk. Ha a:active-ot raksz egy linkre ilyen menüben.. hát elég hülyén néz ki. Paddingot és negatív margót stb. azért tartalmaz, mivel ez egy konkrét példa, nem pedig egy “itt van oszt csinálj amit akarsz” típusú tutorial.

    Köszönöm a hozzászólást, és a építő jellegű kritikát! A jövőben figyelembe veszem őket.

    Üdv,
    Hutchington

  4. Márpedig zoleytaylor beleköt, afelől ne legyen kétséged! ;D Csak viccelek. A viszontválaszt elfogadjuk. Tetszett ez a “itt van oszt csinálj amit akarsz” típusú tutorial. Jót nevettem rajta.

  6. Azért lássuk be hogy ezek nem ugyanazok a megoldások… Vitathatatlan hogy hasonlóak, de ugyanazok semmiképpen.

  7. Bocsánat, de felfedeztem, hogy egyes felhasználóknak a böngészője (köztük az enyém sem), nem tudja rendesen megjeleníteni az adott CSS kódot. Ezért a következő módszert használják azok, akik ezzel a problémával küszködnek:

    – A

    1

    .menu li a:link {

    helyett

    1

    .menu li a {

    legyen a parancs

    – És a

    1
2
3

     .menu li a:hover {
	background: url(../img/buttons.jpg) no-repeat center;
 }

    helyett

    1
2
3
4
5
6
7
8
9
10
11

    .menu li a:hover {
	display: block;
	float: left;
	width: 150px;
	height: 25px;
	padding-top: 7px;
	background: url(../img/buttons.jpg) no-repeat center;
	text-align: center;
	text-decoration: none;
	color:#135000;
}

    álljon.
    Ezzel a megoldással már tutibiztos, hogy működni fog.

  8. Kedves Mystin!

    Köszi a felfedezést, gondolom IE-ben nézted. Az igazat megvallva, csak a félreértések elkerülése végett lett pl. a:link írva.

    Köszi.
    Üdv,
    Hutchington

  9. Meg lehet oldani valahogyan, hogy ha a felhasználó addig növeli a nagyítást, hogy a button szövege már nem fér el egy sorban, akkor megjelenjen a háttérkép alsó része is?

  11. Hutchington úrnak!
    Az után érdeklődnék, hogy az miért van nekem, hogy a div-en belül az “” -k egymás alatt jelennek meg. Hogyan lehetne ezt megoldani, hogy közvetlen egymás mellett?
    Válaszod előre köszönöm!
    Üdv. K. András

  12. 1
2
3
4
5
6
7
8
9

     
 
				<a href="#" rel="nofollow"></a>
 
 
				<a href="#" rel="nofollow"></a>
 
 
				<a href="#" rel="nofollow"></a>

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét