6. lecke - Összetett, többszintű menük
A leckéből megtanulhatjuk, hogy a jól ismert listák (UL, LI, ...) egymásba ágyazásával, és néhány ügyes CSS megoldás alkalmazásával hogyan lehet különféle elrendezésű összetett menüket összerakni.
5.1. Az alapkód - a lista
Első lépés ismét a HTML kód megírása.
<ul>
<li><a href="#">Rólunk</a>
<ul>
<li><a href="#">Cégtörténet</a></li>
<li><a href="#">Küldetésünk</a></li>
</ul>
</li>
<li><a href="#">Szolgáltatások</a>
<ul>
<li><a href="#">Zabhegyezés</a></li>
<li><a href="#">Rézfafütyülés</a></li>
</ul>
</li>
<li><a href="#">Kapcsolat</a>
<ul>
<li><a href="#">Emil</a></li>
<li><a href="#">Térkép</a></li>
<li><a href="#">Csigaposta</a></li>
</ul>
</li>
</ul>
</div>
A kód lényege, hogy az alap-lista listaelemeinek belsejében egy-egy újabb lista rejtezik. Így oldjuk meg, hogy főmenünk egyes menüpontjaiból újabb almenük bújnak elő, amikor a felhasználó egere föléjük téved.
6.2. Vízszintes főmenü legördülő almenükkel
Valami ilyesmit fogunk készíteni...
A síma (egyszintű) vízszintes menühöz képest a változások a CSS-fájl következő soraiban találhatók:
position: relative;
float: left;
width: 120px;
}
#menu ul ul {
position: absolute;
display: none;
}
#menu ul li:hover ul{
display: block;
}
Egy kis magyarázat:
- a display: none; tulajdonsággal eltüntettük az almenüket, hiszen ezekek addig nem szabad megjelenniük, amíg a felhasználó a fölöttük lévő főmenüpontra rá nem lép,
- a menu ul li:hover ul kiválasztóval elérjük, hogy csak akkor jelenjen meg az aktuális almenü, ha a főmenü megfelelő pontján egerészünk,
- a display: block; hatására a legördülő menü nem vízszintes, hamem függőleges lesz.
6.3. Ugyanez az IE-ban
Szépen elkészített menünk sajnos nem működik az Internet Explorert használva, mivel az IE csak a linkekre támogatja a:hover látszólagos (pszeudo) osztályt - a fenti megoldásnak pedig pontosan ez a lényege.
A probléma megoldása a CSS-fájl két kis kiegészítésében rejlik.
Ha van egy definíciónk, ami tartalmazza a :hover alosztályt, hozzáadunk egy újat az IE számára, ami ugyanazokat a beállításokat tartalmazza .hover alosztályjal.
#menu ul li:hover ul{
display: block;
}
// ezt kellett hozzáírnunk //
#menu ul li.hover ul{
display: block;
}
Az alábbi szabályt a CSS végére írjuk, minden olyan elem nevével ahol használtuk a :hover osztályt - és ezáltal az IE-t céljainknak megfelelő "viselkedésre" (behavior=viselkedés) kényszerítjük.
behavior: url(hover.htc);
}
A megoldásban kulcsszerepet játszó hover.htc fájl - ami egy JavaScript kód - letölthető a szerző Horváth János oldalairól, vagy innen.
6.4. Függőleges menü legördülő almenükkel
Nézzük meg, hogyan tudjuk a CSS-fájl átalakításával az 6.1. pontban megadott listát függőleges menüvé átváltoztatni. Valahogy így!
A továbbiakban csak a legfontosabb változtatások leírására szoritkozunk.
position: absolute;
top: 0;
left: 100%;
width: 200px;
}
Magyarázat:
- A position: absolute; beállítással helyezzük el a lenyíló almenüt a főmenü mellé. (Enélkül az almenük a menüoszlop alatt jelennének meg.)
- A top: 0; tulajdonság hatására a lenyíló almenü az "őt" hívó fő menürészhez fog igazodni.
- A lenyíló listát a left: 100%; beállítással pontosan a főmenühoz igazítottuk balról.
(Természetesen az IE miatt most is kellenek a trükkök!)
Feladatok
6.1. feladat
Próbáljuk meg a vízszintes menüt legördülőből "felpattanóvá" alakítani (mintha a főmenü a lap alján helyezkedne el)!
6.2. feladat
Próbáljuk meg a függőleges menüt jobbra-legördülőből "balra-legördülővé" alakítani (mintha a főmenü a lap jobb oldalán helyezkedne el)!