Listák - Vízszintes menü kialakítása listából
A weblapkészítéssel foglalkozó könyvek általában azt ajánlják, hogy egy oldal menüje listaelemekből épüljön fel. E mögött az a megfontolás húzódik meg, hogy a menü tulajdonképpen hivatkozások listája.
Oldalt elhelyezkedő menü esetén, ahol a menüpontok egymás alatt sorakoznak, nincsen komolyabb probléma. Egy vízszintes menü kódjának írásakor viszont egy kicsit trükközni kell. A következő példában a webkalap.hu főmenüjét hoztam létre úgy, hogy a menüpontok egy listát alkotnak.
Az így kialakított menü HTML kódja:
<ul>
<li><a href="../../index.html">Nyitó</a></li>
<li><a href="../../gyorstalpalo/gyorstalpalo.php">Gyorstalpaló</a></li>
<li><a href="../../tervezes/tervezes.php">Tervezés</a></li>
<li><a href="../../html/html.php">HTML</a></li>
<li><a href="../css.html">CSS</a></li>
<li><a href="../../sablonok/sablonok.php">Sablonok</a></li>
</ul>
És a hozzá tartozó stílus beállítások:
ul {list-style-type: none; text-align: left;
padding: 0px; float: left; width: 100%}
li {display: inline}
a {text-decoration: none; color: #ffffff;
background-color: #000088; text-align: center;
border-color: #000088; border-style: outset;
border-width: 3px; font-size: 14pt;
font-weight: bold; font-family: Times New Roman;
margin-top: 5px; margin-right: 0px;
margin-bottom: 5px; margin-left: 0px;
padding-top: 0px; padding-right: 5px;
padding-bottom: 0px; padding-left: 5px}
A HTML kód egyszerűbb, mint a letölthető sablonok menüje vagy a webkalap.hu menüjének kódja. (Ez utóbbit a jobb egérkattintásra lenyíló „Oldal forrása” vagy „Forrás megtekintése” funkció kiválasztásával ellenőrizheted. Én az itt részletezett megoldás helyett egy egysoros táblázatot használok a vízszintes menü kialakításához.)
A stílusdeklarációkban a értékét -ra kell állítani (ne legyen jelölő), és az elem tulajdonságának -nak kell lennie. Ez utóbbi az elemeket sorszerűvé alakítja, így azok egymás mellett jelennek meg, mint egy mondat szavai. A példában szereplő többi stílusdeklaráció már csak esztétikai célokat szolgál.
Két különbség van a webkalap.hu menüje és az itt létrehozott példa között. A legtöbb böngészőben a példa menüpontjai között látszódik a háttér, annak ellenére, hogy a bal és a jobb oldali margó is nullára lett állítva. Ez némileg korlátozza a design lehetőségeket, de nem jelent komoly problémát.
Egy hosszabb menüsor esetén viszont súlyosabb gond lehet, hogy a menüpontok ugyan úgy követik egymást, mint egy szöveges részben egy mondat szavai. Ha egy keskenyebb megjelenítő felületen az utolsó menüpontok nem férnek el egy sorban, akkor a böngésző a menüt több sorba fogja törni, ami a dizájn széteséséhez vezethet. Tehát egy ilyen menü kialakítása esetén gondoskodni kell arról, hogy a böngésző ne zsugoríthassa össze az oldal szélességét annál kisebbre, mint ami a menü megjelenítéséhez szükséges. Ha például az oldal nagyméretű képet tartalmaz, akkor az önmagában megoldás lehet, de előfordulhat, hogy egyes oldalak kódjának írásakor trükközni kell a stabil oldalelrendezés érdekében.
