hdesign blog&portfolio

Minap találtam egy szép gyűjteményt navigációs megoldásokra. Voltak köztük szépek, és voltak olyanok, amiért pénzt is kértek. Nos, én ezek közül párat megcsináltam, és közzéteszem teljesen ingyen és bérmentve (természetesen CC licenc alatt).

Rögtön négy verziót is készítettem, közös tulajdonságuk, hogy azonos HTML vázra épülnek, azonos ikonokat használnak, JavaScript mentesek, kizárólag CSS-ből történik az “animálás”.

Nézzük meg őket közelebbről is.

1. Az első megoldásnál csak akkor jelenik meg a navigáció szövege, ha fölé viszed az egeret.
2. A másodiknál szimplán csak a háttere változik a navigációs menünek.
3. A harmadik verziónál a kép pozíciója változik, így egy kicsit izgalmasabbá teszi.
4. A negyedik verzióban az ikonok mérete változik, ezzel tovább fokozva a harmadik verziót. (Itt megjegyzendő, hogy ha ezt élesben szeretnéd alkalmazni, akkor ilyenkor inkább cseréld ki a képet egy nagyobbra, mert így elég pixeles lesz a nagyítástól.)

Ezek kombinálása, és felhasználása már a Te feladatod lesz . Nyomja a Tetszik gombra, ha tényleg tetszett, de csak akkor!

Egy összetett weboldalnak szüksége van breadcrumbs, vagy más néven kenyérmorzsa navigációra. Segíti a felhasználókat, hogy visszataláljanak a kiindulási pontra, ezzel is növelve az oldal ergonómiáját.

Csináljunk egy egyszerű szerkezetű, kis méretű, és könnyen felhasználható breadcrumbs navigációt:

Lista szerkezetet fogunk alkalmazni, úgy hogy az aktuális oldalt nem linkeljük.

HTML kód

<ul id="crumbs">
	<li><a href="#">Főoldal</a></li>
	<li><a href="#">Szolgáltatások</a></li>
	<li><a href="#">Árvíztűrő szolgáltatás</a></li>
	<li>Leírás</li>
</ul>

Látszik, hogy a listánkból, csak az ul kap egy ID-it, a többi elemet ezen keresztül fogjuk megszólítani css-ből.

CSS kód

Először is kinullázzuk az ul és li elemeket.

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

Ezután jöhet a #crumbs elemünk, aminek adunk egy border tulajdonságot, megadjuk a szélességét és a magasságát.

#crumbs {
	border: 1px solid #CCC;
	height: 30px;
	width: 580px;
}

Most formázzuk meg az ul-ben lévő li elemeket. Ugye ennek nem kell adni külön szelektort, mivel az ul-nek már adtunk, így azon keresztül megszólíthatjuk.

A float-olás azért kell, hogy egymás mellé kerüljenek a li elemek, megadjuk a magasságát, a sorközt (line-height), ami azért kell, hogy ne kelljen belső margót használnunk majd a linknél, mert akkor nem látszana a háttérkép. Viszont nem tudjuk teljesen elkerülni a belső margó használatát, a link nélküli li elem miatt. Ahhoz hogy bal oldalról távolságot tartsunk, kell adni neki egy padding-left tulajdonságot, így ez közvetve a linkre is igaz lesz.

#crumbs li {
	float: left;
	height: 20px;
	line-height: 30px;
	padding-left: 10px;
}

Most megformázzuk az a elemünket. Blokk szintű elemmé kell tenni, hogy az a teljes felületén kattintható legyen. Itt is megadjuk a magasságát, ami jelen esetben 30 pixel. Jobb oldalról kell adni neki egy belső margót, hogy a háttérképre ne lógjon rá. Végezetül megadjuk neki a háttérkép útvonalát, azt hogy ne ismételje, majd a jobb-közép igazítást.

#crumbs li a {
	display: block;
	height: 30px;
	padding-right: 10px;
	background: url(img/crumbs.png) no-repeat right center;
}

Ahhoz hogy felhasználóbarát dolgot hozzunk létre, adjunk a linknek színt, és aláhúzással jelöljük hogy az bizony kattintható…

#crumbs li a {
	text-decoration: underline;
	color: #666;
}

…majd csináljunk hover állapotot is neki, hogy a felhasználóval érzékeltessük: “ha rám kattintasz, valami történni fog”.

#crumbs li a:hover {
	color: #0C6;
}

Naponta találkozunk lapozókkal, ám ezek nem mindig helyeznek hangsúlyt a felhasználóbarátságra. Ebben a bejegyzésben bemutatok egy olyan megoldást, amivel a felhasználó, és mi is jól járunk.

Nos, akkor nézzük, a célunk az hogy a felhasználó felismerje hol jár, mutassuk neki, hogy még milyen lehetőségei vannak, legyen egyszerű a html szerkezete, és kevés css kód is elegendő legyen hozzá.

Lapozónál a legszebb, ha felsorolást (ul li) alkalmazunk, nézzük is a html kódot:

<ul id="pagination">
	<li class="previous-off">« Előző</li>
	<li class="active">1</li>
	<li><a href="page2">2</a></li>
	<li><a href="page3">3</a></li>
	<li><a href="page4">4</a></li>
	<li><a href="page5">5</a></li>
	<li><a href="page6">6</a></li>
	<li class="next"><a href="page2">Következő »</a></li>
</ul>

Nézzük mit kell majd css-ben formáznunk: A felsorolásunkban az ul kap egy “pagination” ID-t, ezzel tudjuk majd css-ből formázni a benne levő elemeket. Ha több lapozót is szeretnénk egy oldalon belül, akkor kerüljük az ID használatát, változtassuk osztályra (class=”padination”), amiből lehet több azonos is egy oldalon belül. Ezen belül, az “Előző” és “Következő” gomboknak lesznek aktív és inaktív állapotai, az oldalszámoknál az aktuális oldal kijelölt állapota, valamit a többi lehetséges oldalt tartalmazó li elemek formázása.

#pagination {
    display: block;
    width: 600px;
    list-style: none;
}
 
#pagination li{
    float: left;
    border:0;
    margin:0;
    padding:0;
    list-style:none;
}
 
#pagination .previous-off,
#pagination .next-off {
    color:#666666;
    display:block;
    float:left;
    font-weight:bold;
    padding: 3px 4px;
    border:solid 1px #CCC;
    margin-right: 2px;
    background: #CCC;
}
 
#pagination .next a,
#pagination .previous a {
    font-weight:bold;
    border:solid 1px #CCC;
    margin-right: 2px;
}
 
#pagination .active{
    display:block;
    float:left;
    padding: 3px 6px;
    color: #000;
    font-weight:bold;
    border:solid 1px #666;
    margin-right: 2px;
}
 
#pagination a {
    color: #666;
    display:block;
    float:left;
    padding:3px 6px;
    margin-right: 2px;
    text-decoration:none;
    border:solid 1px #CCC;
}
 
#pagination a:hover {border:solid 1px #999;}

Ez a mű a Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 2.5 Magyarország licensz alatt készült.