Így néz ki egy up-to-date menü

A mai napon megmutatom, hogyan érdemes up-to-date, kereső- és felhasználóbarát menüket kódolni. Ezt a cikket főleg Tamás barátom kérésre írtam, mert már régebben megígértem neki, de kötelező elfoglaltságaim miatt egészen idáig nem volt rá időm. 🙁

Tehát most egy átlagos menüsort fogunk leprogramozni, ami jelen esetben hat menüpontot jelent. (A menüpontok számát természetesen mindenki tetszőlegesen kiválaszthatja, de ez esetben át kell majd számolnia az egyes elemek méreteit.) Aki eddig látta már néhány portál forráskódját, az biztosan sejti, hogy rendezetlen listával fogunk dolgozni (<ul>), ugyanis itt alapvetően nincs jelentősége sem a listapontok sorrendjének, sem a típusának.

HTML Kód:

<ul id="Menu">
<li><a href="" title="Kezdőlap"><span>Kezdőlap</span></a></li>
<li><a href="" title="Bemutatkozás"><span>Bemutatkozás</span></a></li>
<li><a href="" title="Galéria"><span>Galéria</span></a></li>
<li><a href="" title="Blog"><span>Blog</span></a></li>
<li><a href="" title="Archívum"><span>Archívum</span></a></li>
<li><a href="" title="Kapcsolat"><span>Kapcsolat</span></a></li>
</ul>

Először egy függőleges menüt készítek, aztán csak a végén alakítom át pár lépéssel vízszintessé, így mindkét változatot be tudom mutatni egyszerre. Ahogy a képen is látható, ez nem más, mint hivatkozások egyszerű felsorolása, amit a következő lépésben kiszínezek, hogy könnyebben érzékelhetőek legyenek a változtatások. A listaelemek stílusának típusát is kikapcsolom, mert nincs rá szükségünk, és csak rontja az összképet. (Azt érdemes megjegyezni, hogy a listaelemek stílusának pozícionálása alapértelmezettként outside, ezért a most következő módosítás után a listajelek csak a levegőben lógnának a menün kívül.)

CSS Kód:

#Menu	{
	background-color: #00bfff;
	list-style-type: none;
	margin: 64px auto;
	padding: 0px;
	width: 720px;
}
#Menu li:nth-child(2n+1) a	{
	background-color: #9acd32;
}
#Menu li:nth-child(2n) a	{
	background-color: #ffd700;
}
#Menu li a:hover, #Menu li a:focus	{
	color: #ffffff;
	background-color: #ff1493;
}

A menüt 120 pixel szélesre terveztem, de az egyes menüpontok nem töltik még ki ezt a szélességet. Erre érdemes figyelni, mert így a látogatóktól nagyobb koncetrációt igényel a célzás, és nem engedhetik meg maguknak a laza mozdulatok az egérrel és a gyors váltást az egyes oldalak között. Ezt szem előtt tartva a következő sorokkal egészítem ki a CSS kódot:

CSS Kód:

#Menu li a	{
	color: #000000;
	display: inline-block;
	font-weight: bold;
	padding: 16px 0px;
	text-align: center;
	text-decoration: none;
	width: 120px;
}

Most már minden menüpontnak van egy “Holdudvara”, és nem kell szigorúan a szövegre kattintani ahhoz, hogy megtörténjen az átirányítás. A kezdők figyelmét itt arra hívnám fel, hogy az <a> tagek méretét állítottam, és nem pedig a listaelemekét. Fordított esetben csak a látvány változik meg, de a kattintási felület nem lesz nagyobb. A többiek figyelmét pedig az inline-block paraméterre irányítanám, ugyanis natúr inline használata esetén a böngészők nem törődnek a szélesség és magasság paraméterekkel, aminek következtében meglepően kusza megjelenésekkel találhatjuk szembe magunkat.

Gyakorlatilag ezzel a vertikális menüsort el is készítettük, úgyhogy következzen a horizontális koncepció. Ehhez először módosítani kell a #Menu szélességét 720 pixelre (ugye 6 menüpont szorozva 120 pixellel), valamint a listaelemeket sorközi elemekké kell alakítanunk a következő módon:

CSS Kód:

#Menu li	{
	display: inline;
}

Valószínűleg sokatokban felmerül a kérdés, hogy miért törik meg a sor, és egyáltalán miért vannak szünetek a menüpontok között. Talán ti is hamar rájöttök, ha megnézitek a HTML kódot. A szkriptünk sorokra van tördelve, és ez az a sortörés, ami miatt a szünetek keletkeznek. (Amikor PHP nyelven programoztok, és dinamikusan generáljátok a menüt, akkor egyszerűen csak figyeljetek arra, hogy a karakterláncok összefűzésekor vagy kiiratásakor ne toldjátok meg az egyes sorokat \n-el vagy \r-el.) Nincs más dolgunk, mint megszűntetni a sortöréseket, és egy sorba rendezni a <li> tageket a forrás fájlunkban:

HTML Kód:

<ul id="Menu">
<li><a href="" title="Kezdőlap"><span>Kezdőlap</span></a></li><li><a href="" title="Bemutatkozás"><span>Bemutatkozás</span></a></li><li><a href="" title="Galéria"><span>Galéria</span></a></li><li><a href="" title="Blog"><span>Blog</span></a></li><li><a href="" title="Archívum"><span>Archívum</span></a></li><li><a href="" title="Kapcsolat"><span>Kapcsolat</span></a></li>
</ul>

Végül pedig, aki látványos grafikákra szeretné építeni az egész menüt, annak szüksége lehet a menüpontok szövegének elrejtésére. (Ehhez kapcsolódóan olvashatsz néhány praktikus tanácsot a “:hover receptek képes linkekhez” című bejegyzésemben.) Ezen cél érdekében helyeztem el a <span> tageket a HTML kódban, és a title attribútumot a hivatkozásokban. Így, ha valamilyen okból kifolyólag nem elérhetőek a menüsorhoz tartozó grafikák, vagy egy mobil felhasználó takarékossági okokból tiltja azokat, akkor kis buborékokban még mindig le lehet majd olvasni a menüpontok címét, amikor azok fölé helyezzük a kurzort.

CSS Kód:

#Menu li a span	{
	display: none;
}

Teljes CSS Kód:

#Menu	{
	background-color: #00bfff;
	list-style-type: none;
	margin: 64px auto;
	padding: 0px;
	width: 720px;
}
#Menu li	{
	display: inline;
}
#Menu li a	{
	color: #000000;
	display: inline-block;
	font-weight: bold;
	padding: 16px 0px;
	text-align: center;
	text-decoration: none;
	width: 120px;
}
#Menu li:nth-child(2n+1) a	{
	background-color: #9acd32;
}
#Menu li:nth-child(2n) a	{
	background-color: #ffd700;
}
#Menu li a:hover, #Menu li a:focus	{
	color: #ffffff;
	background-color: #ff1493;
}
#Menu li a span	{
	display: none;
}

Hozzászólás: » 2 « • Írta: Péter (2010/05/17 18:47)