Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 627292]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 290480

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [49276]
2. CSS
A pozícionálás, és a z-index [26098]
3. CSS
Függőleges menü, legördülő almenüvel [20506]
4. CSS
Függőleges menü készítése listából [20305]
5. CSS
Bevezetés a CSS alapjaiba [19500]
 

 

CSS -> Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-11-04 14:27:47
Lektorálta: outesticide
Lektorálva:
2006-03-03 14:38:40 [49276]
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
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!