Listák

Készíthetünk számozatlan, számozott és definíciós listákat.

Számozatlan lista

A számozatlan lista egy felsorolás, minden listaelem előtt egy kis pöttyel. Számozatlan listát az <ul> (unordered list, azaz számozatlan lista) címke vezet be, minden listaelem a <li> (list element, azaz listaelem) és a </li> címkék között van. A listaelemeken belül írhatunk sortörést, bekezdéseket, képeket stb.

<ul>

          <li>tej</li>

          <li>kenyér</li>

          <li>Hertz szalámi</li>

        </ul>

tej
kenyér
Hertz szalámi

Számozott lista

Számozott listát az <ol> (ordered list, azaz számozott lista) címke vezet be, az elemeket itt is ugyanúgy kell megadni. A listaelemeken belül írhatunk sortörést, bekezdéseket, képeket stb.

<ol>

          <li>tej</li>

          <li>kenyér</li>

          <li>Hertz szalámi</li>

        </ol>

tej
kenyér
Hertz szalámi

Definíciós lista

Fogalmakat és azok magyarázatait jeleníthetjük meg a definíciós lista segítségével. Az egészet a <dl> (definition list, azaz definíciós lista) és a </dl> címkék közé kell írni. Egy fogalmat a <dt> és </dt> címkék közé, magyarázatát pedig a <dd> és </dd> címkék közé kell helyezni.

<dl>

          <dt>Tej</dt>

          <dd>Tehenek leve</dd>

          

          <dt>Kenyér</dt>

          <dd>Lisztből készülő, pékek készítette finomság</dd>

          

          <dt>Hertz szalámi</dt>

          <dd>Húsféleség a kenyérhez</dd>

        </dl>

Tej: Tehenek leve
Kenyér: Lisztből készülő, pékek készítette finomság
Hertz szalámi: Húsféleség a kenyérhez

Beágyazott listák

Listákat egymásba is ágyazhatunk, az alábbi módon:

<ul>
  <li>Tej</li>
  <li>Kenyér
    <ul>
      <li>Fehér kenyér</li>
      <li>Barna kenyér
        <ul>
          <li>Rozs kenyér</li>
          <li>Kukoricás kenyér</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Hertz szalámi</li>
</ul>

Tej
Kenyér
- Fehér kenyér
- Barna kenyér
  - Rozs kenyér
  - Kukoricás kenyér
Hertz szalámi

Listák formázása stíluslappal

Tulajdonság	Leírás	Lehetséges értékek
`list-style-type`	A listaelemek előtti kis jel megadására szolgál.	`disc circle square none decimal lower-alpha upper-alpha lower-roman upper-roman`
Háromfajta listaelem számozatlan lista esetében. Ötfajta számozás számozott lista esetében.
`list-style-image`	Kép beállítása a listaelemek jelzésére.	`none url`
Képpel jelzett listák.
`list-style-position`	A listaelmek előtti kis jel vagy kép helyzetének megadására szolgál.	`outside inside`
A listajelző pozíciójának megadása.
`list-style`	Rövidítő tulajdonság.	`list-style-type list-style-position list-style-image`
Kizárólag a `list-style` tulajdonság használata. A `list-style` rövidítő tulajdonság használatával az összes eddigi tulajdonságot kiválthatjuk.

Listák használata menüként

A listák egy kis CSS-sel feldobva kiválóan alkalmasak menünek. Nézzük is meg mindjárt az első menüt!

Menü kialakítása CSS-sel.

A trükk az, hogy nem a li elemeket, hanem az a elemket formázzuk. Beállítjuk rájuk a display: block meghatározást, és fix szélességet, így lesznek azonos szélességűnek a menüpontok. Továbbá a list-style-type: none meghatározással eltüntettük a listaelemek elől a kis fekete karikát, a text-decoration: none meghatározással pedig az aláhúzást a linkekről. Ezután már csak a színeket és a margókat állítottuk be, illetve alkalmaztuk a :hover álosztályt a linkekre.

Az alábbi példa ugyanaz, mint az első, csak most jelöljük az éppen kiválasztott menüpontot. Ehhez el kellett készíteni 4 weboldalt, amik abban különböznek egymástól, hogy mindig más menüpontra adjuk meg az id="current" azonosítót. Így mindig az aktuális oldalnak megfelelő menüpont lesz a kiválasztott menüpont stílusú.

Menü kialakítása CSS-sel, az aktuális menüpontot jelölve.

Az első menüt egyszerűen vízszintessé tehetjük, ha a li elemkre beállítjuk a display: inline meghatározást, mert ekkor egy sorban fognak megjelenni.

Vízszintes menü kialakítása.

További érdekes hatásokat is egyszerű elérni. Az alábbi példáknál a HTML kód mindig ugyanaz, csak a stíluslap változik.

Ajánlott linkek

A CSS specifikációja a listákról: http://www.w3.org/TR/REC-CSS2/generate.html#q11

Rengeteg hasznos menü 1: http://css.maxdesign.com.au/listamatic/index.htm

Rengeteg hasznos menü 2: http://css.maxdesign.com.au/listamatic2/index.htm

Rengeteg hasznos menü 3: http://www.13styles.com/

Rengeteg hasznos menü 4: http://www.dynamicdrive.com/style/

Listageneráló program: http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

Lenyíló, többszintű menük: http://www.htmldog.com/articles/suckerfish/dropdowns/