include('head.txt');?>
/*======================================================================*\ Nehany automatizalt folyamat \*======================================================================*/ aswc_counter(); // Szamlalo aswc_oldallekeres('w'); // functions.inc.php if (aswc_is_user($_SESSION['loggedin_type'])) { include 'toolbar.inc.php'; } ?>
|
|||||||
|
|||||||
Témaköreink[ 3D Studio MAX ] [ C,C++ ] [ CSS ] [ HTML/XHTML ] [ Online Marketing ] [ Photoshop ] [ PHP ] [ Putra Writer ] [ Webdesign ] Statisztika
|
CSS -> Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel
A feladat hasonló az előző leckében vett függőleges legördülő menühöz, csak most vízszintesen készítjük el. Első lépésként (bepótolva elmaradásom) egy sima vízszintes menüt készítünk. A vízszintes menü Vegyük először szokás szerint a HTML részt <div id="menu"> <ul> <li><a href="#">Első</a></li> <li><a href="#">Első</a></li> <li><a href="#">Első</a></li> </ul> </div> Mint az korábbi cikkben, itt is a menü alapjául szolgáló listát egy dobozba tettem. A lista bonyolult részeket nem tartalmaz. A rendezelten listába három listapontot tettem. (Értelemszerűen ezek lesznek a menüpontok) Megemlítenén, hogy ez nem kötelező eljárás. Hagyhatjuk a listánkat, "magában" is, de akkor előnyos, ha ellátjuk egy egyedi azonosítóval. A menü stílusa #menu { float: left; width: 100%; } a.) A "menu" azonosítójú DIV-et elláttam float:left; tulajdonsággal, hogy ne follyon ki belőle a listánk. A width:100%; tulajdonsággal a DIV szélessége az oldal szélességével lesz egyenlő; így a "menu" alatt levő elemek nem fogják körülfolyni a dobozunkat. (megoldható úgyis hogy a dobozunk alatt levő elemeknek clear:both; tulajdonságot adunk) b.) A feladatunk lényege, hogy az egyes menüpontok ne egymás alatt helyezkedjenek el, hanem egymás mellet vízszintesen. Ehhez használnunk kell a float: left; tulajdonságot a következő módon. #menu ul { list-style-type: none; margin: 0; padding: 0; background-color: #fff; } #menu li { float: left; width: 60px; } Az első egység beállításaival eltüntettem a listamegjelölőket. Majd a margin, és a padding beállításával a menünket kicsit helyretettem az adott DIV-ben. Ha nem teszzük dobozba a listát, akkor az ul tagnak position: relative; (vagy absolute) megadással a megfelelő helyre igazíthatjuk. A második részben a li tagot formáztam. Az egész listánk vízszintességét az itt megadott float: left; tulajdonság adja. Ezzel egymás mellé folyatjuk az egyes listapontokat így alkotva meg a menünk formáját. Adtam 60px szélességet is, így megakadályozva, hogy a listából a menüfelírások kilógjanak. Ha hosszab szöveget szeretnél és az mindeképp kilóg, természetesen nagyobb értéket is adhatsz. c.) Most a fenti beállításokkal elértük, hogy a menü horizontális legyen, de a benne levő linkek nem töltik ki a rendelkezésükre álló helyet. #menu a { font: normal 10px verdana, tahoma, arial, sans-serif; display: block; margin: 0; padding: 2px 3px; color: #999999; background: #F4F6F4; text-decoration: none; border: 1px solid #ECEEE4; } #menu a:hover { color: #72815F; background: #DAE6BD; } A sok egyébb "szépítő" beállítás mellet láthatjuk, hogy ellátam a linkeket a display: block; tulajdonsággal is. Ezzel a beállítással elérjük, hogy a linkek teljesen kitöltsék a 60 pixel széles helyüket. Így a fehasználónak elég csak az adott listapont fölé mennie, nem kell közvetlen a link szövege fölé, hisz így már a link "érzőmezője" kiterjedt az egész listapontra. Vízszintes menü, legördülő almenükkel A fenti részeket kiegészítem pár sorral, és bemutatom, hogy lehet egy egyszerű vízszintes menüből almenüket kivarázsolni. 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
|
Hello VendégAz oktatóanyagok olvasásához be kell jelentkezned.
Szeretnék regisztrálni. Elfelejtettem a jelszavam!Kiküldöm magamnak! |