Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: ]  
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 362330

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 [55267]
2. CSS
Bevezetés a CSS alapjaiba [30763]
3. CSS
A pozícionálás, és a z-index [30252]
4. CSS
A felhasználói felület - első rész [24595]
5. CSS
Függőleges menü, legördülő almenüvel [24463]
 

 

CSS -> Függőleges menü, legördülő almenüvel

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-10-30 21:40:36
Lektorálta: Wicky
Lektorálva:
2005-11-04 13:27:49 [24463]
Ebben a leckében egy függőleges menüt fogunk készíteni, legördülő almenükkel.
Nézzük meg.

1. A HTML


<div id="menu">
    <ul>
      <li><a href="#">Első</a></li>
      <li>Első
        <ul>
          <li><a href="#">Második</a></li>
          <li><a href="#">Második</a></li>
        </ul>
      </li>
    </ul>
</div>

A menünk gerincét alkotó lista, egy "menu" azonosítójú DIV-ben van.
Minkenképp előnyös a listán alapulú menüt dobozba rakni, hiszen így jobban el lehet választani az oldal többi részétől, illetve a stíluslapban könnyebben, ésszerűbben lehet megadni az elérési útját, vagyis később jobban átláthatóbb lesz a CSS fájlunk.
(Igaz, egyszerűen doboz nélkül is meglehet adni a listát, úgyis tudjuk pozicionálni akárcsak a DIV-et.)
A listánk érdekessége, hogy a fő lista listaelemeiben, egy újabb lista van.
Erre azért van szükség, mert a menünk egyes menüpontjaiból (ezeket nevezzük fő menüpontoknak), újabb opciók (almenük) fognak előjönni ha a felhasználó föléjük megy.
Amelyik fő menüponthoz, további almenüt szeretnénk, akkor csak illeszünk be egy újabb listát az adott főmenühöz, a következőképp.
<li>Első
    <ul>
        <li><a href="#">Második</a></li>
    </ul>
</li>

Mint látjuk a listelemben megadtuk a menüpont címét/feliratát (Első).
(Ennek nem szükséges linknek lennie, hisz ha további opciói vannak, akkor úgyse lenne linkként szerepe esetünkben.)
Utána ugyanebben a listapontba beillesztettük a további opciókat tartalmazó listánkat.
Tehát az Első nevezetű ponthoz tartoznak a Második elnevezésű alpontok.

2. A CSS



a.) A DIV tulajdonságai
#menu {
      width: 200px;
      position: relative;
      margin-left: auto;      
      margin-right: auto; 
      text-align: center;
      top: 10px;
}

A dobozunkat középre igazítottuk a már tanult módszerrel.
Utánna 200 pixeles szélességet állítottunk be.
Ügyeljünk arra, hogy a doboz szélessége megyezzen a későbbi lista szélességével.
Többre most nem lesz szükségünk, de természetes pozicionálható a megfelelő heylre.

b.) A linkek/feliratok tulajdonságai.
#menu a {
      font: normal 10px verdana, tahoma, arial, sans-serif;
      display: block;
      margin: 0;
      padding: 2px 3px;
      color: #999999;
      background: #F4F6F4;
      border: 1px solid #fff;
      text-decoration: none; 
}

#menu a:hover {
      color: #72815F;
      background: #DAE6BD;
}

Itt kiemelném a display: block beállítást.
Értékének block-ra állításával a linkek blokk szintű elhelyezést kapnak.
Ha kihagynám ezt a formázást, menüpontjaink egymásra csúsznának (padding miatt) és a szövegmérettől függően nem töltenék ki a lista teljes szélességét.
Beállítottam továbbá a link szövegének vastagságát, méretét és betűtípusát, majd a link színét, hátterét.
A padding és a margin beállítása nagyrészt a menü kinézetében játszik szerepet.

c.) A rendezetlen lista.
#menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #fff;
}
#menu ul li ul {
      position: absolute;
      top: 0;
      left: 100%;
      width: 200px;
}

#menu ul li ul{
      display: none;
}

Nézzük sorba.

Az első egységben a listamegjelölőket eltüntettem a list-style-type: none; beállítással.
Utánna a margin, illetve padding tulajdonságok értékét 0-ra állítottam.
Ez a lista megjelenésében fontos szerepet játszik, mivel így a rendezetlen listánk (ha van beállított háttérszíne) nem fog látszani a linkek mellet.

A második egységben a listapontokba ágyazott listát formázzuk, tehát a legördülő almenüt.
Ezt a #menu ul li ul kiválaszátssal érjük el.
Rövidebben is megadhatjuk: #menu ul ul.
Itt is ugyanaz a hatás, csak rögtön a második rendezetlen listára hivatkozunk, kihagyjuk a listapontot, amibe azt beágyaztuk.
A position: absolute;-re azért van szükségünk, mert a lenyíló almenüt, el kell helyezünk a főmenü mellé.
(Ha ezt nem tennénk meg, akkor az almenük az egész menüoszlop alatt bukkana elő.)
A pozicionálás után el kell helyeznünk pontosan a lista mellé az almenünket.
top: 0; Ezzel a tulajdonsággal a lenyíló menü, az adott fő menürészhez fog igazodni.
Tehát meg fog egyezni az oldal fölsejétől számított helyük.
A lenyílló listának a left: 100%; beállítással pontosan a fő menühoz igazítottuk balról.
Ha értelemszerűen a left: 200px;-elt alkalmazzuk, akkor pár pixel eltolódás lenne a két rész között, így inkább a biztos megoldást választva, egyszerűen 100% távolságba helyezetük el.
Később se lesz gond, hiszen, ha negváloztatjuk a főlista széleségét, a legördülő rész akkor is 100% távolságba, azaz pontosan a menü mellet lesz.

Végül a harmadik egység; az előbukkanó listát tünteti el a felhasználó elől.
Ez fontos hiszen nem akarjuk, hogy mindig a menünk mellet legyenenek az almenüpontok. Csak akkor legyenek láthatóak, ha a felhasználó valamelyik főmenüre lép.

d.) A listapontok
#menu li {
        position: relative;
        padding: 0; 
}

Itt egyszerűen az összes listapontra alkalmazzuk a position: relative; beállítást.
Ezzel a listpontok követni fogják az egyes rendezetlen listák helyeit.
A padding beállításal csak a lista kinézetét alakítottuk.

e.) A menü lelke
#menu ul li:hover ul{
      display: block;
}

Mivel kicsit följebb, egyszer már eltüntettük a beágyazott listákat, így most előhozzuk őket, ha a felhasználó az adott főmenüpontra lép.
A li szelektornak is létezik pszeudo osztálya. Itt a :hover-t kihasználva (tehát, ha a li elem fölé megy az egér) előhozzuk a további opciókat.
Röviden megmagyarázva a li:hover ul-t: ,ha a felasználó a li elemre lép, akkor az ul elem látható lesz blokk szinten.
Tehát megjelenik az almenünk.

3. Internet Explorer


Természetesen mindez nem megy IE alatt.
Az explorer csak a linkekre támogatja a :hover pszeudo osztályt.
Erre született egy igen jónak tűnő megoldás Peter Nederlof kezéből.
Ez egy JScript file. Innen letöltheted.
Ezzel már menni fognak IE ben a :hover pszeudo osztállyal elátott elemek.
Az alap HTML fájlunkban meg kell adni azonban egy kis kiegészítést, mert nem megy minden úgy az explorerben, ahogy kellene.
<!--[if IE]>
<style type="text/css">

body {
      behavior: url(csshover.htc);

#menu ul li {
      float: left; 
      width: 100%;
}

#menu ul li a {
      height: 1%;

</style>
<![endif]-->

Röviden; a fenti kód, ha IE böngészővel talákozik életbe lép, és kiegészítve az alap stíluslapunkat, helyre teszi a menünk megjelenését.
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!