Hogyan tudok html-böl legördülö menüt csinálni?

A vízszintes legördülős menü

A HTML

<div id="menu">

<ul>

<li><a href="#">Első</a></li>

<li><a href="#">Első</a>

<ul>

<li><a href="#">Második</a></li>

</ul>

</li>

<li><a href="#">Első</a>

<ul>

<li><a href="#">Második</a></li>

<li><a href="#">Második</a></li>

<li><a href="#">Második</a></li>

</ul>

</li>

</ul>

</div>

Az előbbi listához hozzátettem egy kis kiegészítést.

Ezek az almenük.

Mint látjuk egyes főmenükhöz tartoznak almenük.

Ezek az almenük újabb listák.

Tehát az újabb listákat beletettem azokba a listapontokba ahova (fömenü szerint) tartoznak.

CSS

#menu li {

position: relative;

float: left;

width: 60px;

}

#menu ul ul {

position: absolute;

left: 0px;

display: none;

}

#menu ul li:hover ul{

display: block;

}

Minden maradt a régiben (nem írom le azokat a részeket amik az előzőhöz képest nem változtak), egyetlen helyhez tettem egy kis kiegészítést, és bevezetettem három új formázási egységet.

A listpontokat ellátam a position: absolute; beállításal.

Így biztosak lehetünk, hogy listapontjaink a megfelelő helyen lesznek, és nem fogják a menünk alatti tartalmat lejjeb tolni.

A #menu ul ul szelektorral kiválaszottam az almenü rendezetlen listáját.

position: absolute; beállításal biztosítottam a lista megfelelő elhelyezését.

A display: none; tulajdonsággal eltüntettem az almenüket, hisz addig ezeknek nem szabad megjelenniük, amíg a felhasználó az adott főmenüpontra nem lép.

Most jön a menü lényege.

Feljebb leírtam már, de most mégegyszer.

#menu ul li:hover ul{

display: block;

}

Tehát a szelektorral megadtam a következőt (a lényegét írom le): ha a felhszanáló valamely főmenüre (elsődleges listapontra) lép, akkor az abból következő almenü (másodalgos lista) megjelenjen.

A megjelenést a display: none; beállítással értem el. A legördülő menü emiatt nem vízszintes lesz, hamem függőleges elrendezésű.

Az Internet Explorer

Az előző leckében már említett, hogy mindezek a :hover pszeudo osztály miatt nem mennek IE-ben.

Az IE csak a linkekre tudja ezt alkalmazni.

Nézzük a megoldást.

<!--[if IE]>

<style type="text/css" media="screen">

body {

behavior: url(csshover.htc);

}

#menu ul li {

float: left;

width: 60px;

}

#menu ul li a {

height: 1%;

}

</style>

<![endif]-->

Csak röviden mondanám el a lényegét.

Ha fájlunk egy IE böngészővel találkozik, akkot életbe lépteti a fenti kódot kiegészítve vagy felülírva a többit.

A behavior: url(csshover.htc); sorral a probléma megoldását a csshover.htc JScript fájlt életbe léptetjük.

Ezzel az IE már tudni fogja nem csak linkekre alkamazni a :hover pszeudo osztályt.

A linkeknek adott height: 1%; beállítással elérjük, hogy Explorer alatt is mindig! a linkek hatóköre kiterjedjen az egész listapontra.

csshover.htc

Vagy: http://outesticide.netoktato.hu/csshover.htc