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> |
<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 > ul > li {
float: left;
}
header .sub-menu {
display: none;
position: absolute;
z-index: 100;
}
header li:hover > .sub-menu {
display: block;
} |
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 > ul > li {
float: left;
}
header .sub-menu {
display: none;
position: absolute;
z-index: 100;
}
header li:hover > .sub-menu {
display: block;
}
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%; } |
.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> |
<p class="clearfix">
<img src="kep.jpg" style="float: left">Ide jön a rövid szöveg.
</p>
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;
} |
.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;
} |
* {
outline: none;
}
WordPress › hiba