Legördülő menü tisztán CSS-el

Mi a megoldás , ha egy egyszerű és jól működő, pusztán néhány sor CSS felhasználásával megvalósított legördülő menüt szeretnénk? Először építsük fel a menüt rendezetlen listák segítségével, az alábbi módon:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header>
	<ul>
		<li>
			<a href="#">Első főmenü</a>
			<ul class="sub-menu">
				<li><a href="#">Alemü 1</a></li>
				<li><a href="#">Alemü 2</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Második főmenü</a>
			<ul class="sub-menu">
				<li><a href="#">Alemü 3</a></li>
				<li><a href="#">Alemü 4</a></li>
			</ul>
		</li>
	</ul>
</header>

A példában a HTML5-ben bemutatkozó <header> foglalja magába a menüt. Ez természetesen tetszőleges más HTML elem is lehet, jelen esetben azért esett rá a választás, mert jól olvashatóvá, strukturálttá teszi a mintakódot. A menü működési elve egyszerű: alapértelmezetten felsoroljuk a fő menüelemeket, a bennük lévő almenüket pedig elrejtjük. Amikor a menüelem fölé visszük az egeret (hover állapot), a benne lévő almenüt megjelenítjük a display tulajdonság felülírásával. Mivel az almenü megjelenésekor a fő elem mérete is megnő, a hover állapot érvényben marad akkor is, amikor az egeret az almenü valamely pontja fölé visszük. A másik fontos dolog a 25. sorban található. A position: absolute; gondoskodik róla, hogy az almenük a többi tartalom felett jelenjenek meg, ezáltal ne befolyásolják az oldal elrendezését. A példához tartozó CSS kód:

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
header ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
 
header ul li {
	background-color: #333;
	list-style: none;
	display: block;
}
 
header ul li a {
	color: #fff;
	display: block;
	padding: 5px 10px;
}
 
header &gt; ul &gt; li {
	float: left;
}
 
header .sub-menu {
	display: none;
	position: absolute;
	z-index: 100;
}
 
header li:hover &gt; .sub-menu {
	display: block;
}

Lebegő elemek szülőjének mérete

Ha egy HTML elembe float tulajdonságú elemeket helyezünk, a szülő elem mérete nem fogja követni a tartalom méretét. Így például ha egy bekezdésben lévő szöveg melletti, float használatával körbefolyatott kép magasabb, mint maga a szöveg, a kép ki fog lógni a bekezdésből. Ez elsőre nem feltétlenül szembetűnő, de ha pl. háttérszínt vagy keretet állítunk be a bekezdéshez, a jelenség zavaró lesz, sőt az oldal felépítését is elronthatja. Egyszerű megoldás lehet ilyenkor a bekezdés magasságát CSS-ben megadni, azonban dinamikus oldalak esetében ez nem megoldás. Ehelyett ajánlott CSS fájlunkba felvenni az alábbi sorokat, és az így definiált osztályt beállítani a lebegő elem(ek)et tartalmazó HTML elemeknél.

1
2
3
4
5
6
7
8
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html .clearfix { height: 1%; }
1
2
3
<p class="clearfix">
	<img src="kep.jpg" style="float: left">Ide jön a rövid szöveg.
</p>

Kijelölő keret eltávolítás az aktív HTML elemről

A legtöbb böngésző alapértelmezésben megjelöli a weboldalon éppen aktív elemet. Ennek oka, hogy például billentyűzetről lépkedve az oldal elemei között, a felhasználó tudhassa, az oldal melyik eleme aktív, azaz fogadja az adatbevitelt. Ez történik, ha a tab billentyűvel bejárjuk egy űrlap beviteli mezőit, vagy egy menü pontjain megyünk így végig. Bizonyos elemeknél ez azonban ronthatja a felület megjelenésének egységességét, ráadásul a látogatók többsége nincsen tisztában böngészője ezen képességével. Szerencsére a megjelenő keret kikapcsolása egyszerű, meg kell adnunk a szokásos CSS selector-t és beállítani az outline tulajdonságot:

1
2
3
.menu a {
	outline: none;
}

Ha az oldal összes eleménél, globálisan szeretnénk elvégezni a kikapcsolást, a szokásos * HTML selector-t használjuk:

1
2
3
* {
	outline: none;
}