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!

Nincs is ezzel semmi gond, az alábbi forgatókönyv szerint zajlik a költöztetés:

• beállítások menüpont alatt átírom az url-eket,
• mentés,
• SQL dump mentése az adatbázisból,
• fájlok felmásolása a végleges szerverre,
• SQL dump feltöltése az adatbázisba,
• konfigurációban (wp-config.php) átírom az adatbázishoz való konnekciókat.

Ez eddig minden esetben működött, de mi van akkor ha bajba kerülünk mert megszűnik a domainnév?

Egyik ügyfelemnél jártunk így. Felhúztuk neki a véglegesnek mondott szerverre az elkészült WordPress-t, amit átmenetileg egy IP címen értünk el. Ha lesz domain név, akkor majd ráérünk bekonfigolni akkor. Gondoltuk… aztán szóltak hogy nem megy, mert elköltözött a szerver, és az IP címe is megváltozott.

Szerencsére van megoldás erre is. Az admin felület két url mezőjét ki lehet vezetni a wp-config.php-ba. Így nem kell az adatbázist berhelni, hogy minden egyes mező értékét módosítsuk ami beégetve tartalmazza az url-t.

define('WP_HOME', 'http://uj-domain-neve.hu');
define('WP_SITEURL', 'http://uj-domain-neve.hu');

Szóval ha hasonló helyzetbe kerülsz nyugalom, van egyszerű megoldás!

Ha hasznos volt számodra ez a bejegyzés, nyomj lájkot!

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;
}

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.

Ez azért fontos, ha a keresők ráfutnak az oldalra, akkor ezeket szövegnek “lássa”, mert ugye ha az egy kép, akkor nem “látja”, illetve a látássérülteknek készült olvasóprogramok sem “látják”.

Ám nem mindíg tudjuk elkerülni ezek használatát, például egy a fejlécben levő logó esetében.

Erre létezik egy megoldás amit alább részletesen ismertetek.

Elfogadott megoldás a text-indent CSS tulajdonság használata ennek megoldására.

A következő példáben egy képzeletbeli cég logóját fogjuk ezzel a módszerrel felhelyezni a weboldalára.

A text-indent tulajdonság
Ezzel a tulajdonsággal a tömbszerű elemekben levő tartalom első sorának behúzását lehet megadni. Leggyakrabban tabulátorhatás keltésére használják. (Megadható hosszérték, százalék, és öröklés. Alapértéke: 0) (forrás: O’REILLY – CSS zsebkönyv)

A trükk lényege hogy beleírjuk egy h1 tag-be a cég nevét, és css-ben megadjuk a hátterét – ami a cég logója lesz – majd a text-indent tulajdonsággal a beleírt szöveget mínusz értékkel kitoljuk a megjeleníthető területről.

HTML kód:

<div id="header">
<h1>Lorem Ipsum Kft.</h1>
</div>

CSS kód:

#header{
width: 980px;
height: 200px;
}
 
#header h1{
display: block;
width: 300px;
height: 30px;
background: url(img/logo.png) no-repeat;
text-indent: -9999px;
}