Mondhatjuk, hogy egy weboldal lelke a navigáció – ha most eltekintünk az egyoldalas weboldalak létezésének tényétől. Nézzük, hogyan dobható fel egy-két aprósággal a navigáció. Szám szerint négy ilyet fogunk elkészíteni, kihasználva a CSS3 adta lehetőségeket.

Először is szükségünk lesz linkekre, ehhez az OWT menüpontjait vettem kölcsön:

[html]
<section class="c1">
<nav>
<a href="#">Főoldal</a>
<a href="#">Tanfolyamok</a>
<a href="#">Oktatók</a>
<a href="#">Kapcsolat</a>
</nav>
</section>
[/html]

A <section>-re azért van szükség, mert többféle navigációt is el fogunk készíteni.

A linkjeink tehát előálltak, most készítsünk el egy alap formázást, mely az összesre érvényes lesz.

[css]
nav {
text-align: center;
}

nav a {
display: inline-block;
margin: 15px 20px;
padding: 1em 2em;
text-decoration: none;
color: #fff;
}
[/css]

Egyszerűen megoldottam a középre rendezést azzal, hogy a <nav>-on belül mindent középre rendeztem. A <nav>-on belüli <a> elemeket pedig inline-block-á tettem őket, kaptak margin-t és paddingot, a szöveg aláhúzását levettük, és fehér színűvé tettem őket. Ez utóbbi természetesen opcionális, én olyan háttereket válogattam a különböző navigációk mögé, amin olvasható a fehér.

Még a <section>-t is formázzuk:

[css]
section {
float: left;
width: 100%;
padding: 100px 0;
}
[/css]

Négy variációt fogunk elkészíteni, ezt én négy <section>-ba tettem, az osztályozást pedig c1-től c4-ig adtam meg. Az általam kiválasztott színek a következők lettek:

[css]
.c1 {background: #9b59b6;}
.c2 {background: #3498db;}
.c3 {background: #e74c3c;}
.c4 {background: #f39c12;}
[/css]

1. variáció

Az első variációban a linkeket [szögletes zárójelbe] karakterek közé fogjuk tenni, de CSS-ből. Ehhez a :before és az :after álosztályokat fogjuk használni, valamint a content tulajdonságot. Mindez így fog kinézni:

[css]
.c1 a:before {
content: ‘[‘;
}

.c1 a:after {
content: ‘]’;
}
[/css]

Ám ezzel még messze nem vagyunk készen. Először is formázni kell ezeket, első körben ezeket is szövegközi blokká kell tennünk.

[css]
.c1 a:before, .c1 a:after {
display: inline-block;
}
[/css]

Most már csak valami jó kis animációt kell kitalálni, ez pedig úgy fog kinézni, hogy ha ráhúzod az egeret, akkor ez a két karakter belülről kifelé körbeveszi a linket. Ebből következik, hogy alapból nem fog látszani, és mindkét szélétől beljebb fognak elhelyezkedni. Kicsit zagyva tudom, de mindjárt megérted. Az előző részeket egészítsük ki ezeknek megfelelően. A :before 20px-el beljebb lesz jobbról, az :after pedig -20px-el fogjuk behúzni jobbra. Ehhez a transform tulajdonságot fogjuk használni, annak is a translateX funkcióját.

[css]
.c1 a:before {
content: ‘[‘;
transform: translateX(20px);
}

.c1 a:after {
content: ‘]’;
transform: translateX(-20px);
}
[/css]

Aztán amit még meg kell tennünk, hogy átlátszóvá tesszük mindkettőt. Ezt az opactiy 0-ra állításával tehetjük meg

[css]
.c1 a:before, .c1 a:after {
display: inline-block;
opacity: 0;
}
[/css]

Elfoglalta alap helyét a két szögletes zárójel. Most jön az, hogy a :hover álosztály segítségével.

Azt fogjuk mondani, hogy ha az <a> elemre ráhúzod az egeret, akkor a :before -20px-re kerüljön jobbra, az :after pedig 20px-re. Pont ellenkezőleg, mint alapesetben. Ezen kívül ne feledkezzünk meg a láthatóságáról sem, az opacity értékét állítsuk 1-re.

[css]
.c1 a:hover:before {
transform: translateX(-20px);
opacity: 1;
}

.c1 a:hover:after {
transform: translateX(20px);
opacity: 1;
}
[/css]

Már csak egy nagyon fontos dolgot kell hozzáadnunk: az animációt. A változó értékeket a transition tulajdonsággal lehet animálni. Mivel mindkettőt animálunk kell, ezért ezt az :after és a :before közös deklarációjában fogjuk elhelyezni, mely így fog kinézni ez után:

[css]
.c1 a:before, .c1 a:after {
display: inline-block;
opacity: 0;
transition: all .5s ease;
}
[/css]

Az értékével pedig azt adtuk meg, hogy all, azaz az összes változó tulajdonság animálódjon, .5s azaz fél másodperc alatt, és ease, azaz lágyan történjen az animáció.

Ezzel el is készültünk, a végeredmény pedig így néz ki:
[codepen_embed height=”215″ theme_id=”0″ slug_hash=”xmzuj” default_tab=”result”]See the Pen Creative navigation links 1. by Hutchington (@hutchington) on CodePen.[/codepen_embed]

2. variáció

Második variációnak egy kicsit egyszerűbbet találtam ki. Egy vonallal fogjuk aláhúzni a linket, és ehhez a már korábban is használt :after álosztályt fogjuk használni.

A HTML szerkezet ugyanúgy fog kinézni, azzal a különbséggel, hogy ennél a c2 osztályt használom. Az alap formázásunk már megvan ugye az elemhez, nézzük hogy, hogy az :after-t mivel kell ellátni:

[css]
.c2 a:after {
content: ”;
display: inline-block;
width: 100%;
height: 3px;
background: #3bc1e3;
}
[/css]

Láthatod, hogy most egy kicsit becsapjuk a böngészőt, ugyanis a content ezúttal üres marad. A szélessége 100% lesz, a magassága 3px, és kap egy a háttérrel harmonizáló színt is.

Ez így mind szép és jó, de még nem ott jelenik meg, ahol szeretnénk. Ehhez abszolút pozíciót fogunk neki adni, ám ehhez előbb az <a> elemet relítívvá kell tenni, hogy az :after ahhoz képest viszonyítva legyen abszolút, és ne a &lr;body>-hoz képest:

[css]
.c2 a {position:relative;}
[/css]

Most jöhet akkor az abszolút pozíció, és a pozícionálás. A pozíciója fentről 100% lesz, balról pedig 0:

[css]
.c2 a:after {
content: ”;
display: inline-block;
width: 100%;
height: 3px;
background: #3bc1e3;
position: absolute;
top: 100%;
left: 0;
}
[/css]

Most már ott van, ahol kell lennie, és jöhet az animáció. Ehhez ezt is láthatatlanná fogjuk tenni az opacity tulajdonság nullára állításával. A transition segítségével aztán ezt fogjuk animálni:

[css]
.c2 a:after {
content: ”;
display: inline-block;
width: 100%;
height: 3px;
background: #3bc1e3;
position: absolute;
top: 100%;
left: 0;
opacity: 0;
transition: opacity .5s ease;
}
[/css]

Utána jöhet is a :hover álosztály, aminél már csak az opacity, 1-es értékét kell megadnunk:

[css]
.c2 a:hover:after {
opacity: 1;
}
[/css]

A végeredmény pedig így fog kinézni:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”czEDm” default_tab=”result”]See the Pen Creative navigation links 2. by Hutchington (@hutchington) on CodePen.[/codepen_embed]

3. variáció

A harmadik variáció igazából a második kiegészítése, így sok szót nem is szentelünk neki. A kiegészítés tárgya pedig egy méretezés, amit szintén a transform segítségével tehetünk meg. Alap állapotban a scale értéke 0, ha ráhúzod az egeret akkor pedig 1 lesz. Ezzel elérhetünk egy amolyan “nagyítós” effektet.

[css]
.c3 a {
position:relative;
}
.c3 a:after {
content: ”;
display: inline-block;
width: 100%;
position: absolute;
top: 100%;
left: 0;
height: 3px;
background: #c0392b;
opacity: 0;
transform: scale(0);
transition: all .5s ease;
}
.c3 a:hover:after {
opacity: 1;
transform: scale(1);
}
[/css]

A végeredménye ez lesz:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”tlmLh” default_tab=”result”]See the Pen Creative navigation links 3. by Hutchington (@hutchington) on CodePen.[/codepen_embed]

4. variáció

A negyedik egy kicsit ismét bonyolodni fog. Alap állapotban a menüpont rendelkezik egy vékony felső csíkkal. Ha ráhúzzuk az egeret, akkor pedig ez a csík megvastagodik, fentről lefelé becsúszik egy kiegészítő szöveg, és megjelenik egy alsó vonal is. Ez már egy kicsit hardcore, de igazából semmi új nem lesz benne, csak amiket eddig is használtunk.
A HTML szerkezet viszont változni fog most, mivel lesz egy kiegészítő szöveg a menüpontok alatt ugye. Ez így fog kinézni:

[html]
<section class="c4">
<nav>
<a href="#">
<span>Főoldal</span>
<span>Go home!</span>
</a>
<a href="#">
<span>Tanfolyamok</span>
<span>A legtutibb evör</span>
</a>
<a href="#">
<span>Oktatók</span>
<span>Kiktől tanulsz?</span>
</a>
<a href="#">
<span>Kapcsolat</span>
<span>Huston jelentkezz!</span>
</a>
</nav>
</section>
[/html]

Mivel itt is a csíkokhoz szükségünk lesz majd abszolút pozíció megadására, ezért kezdjük rögtön az <a> elem relatívvá tételével:

[css]
.c4 a {
position: relative;
}
[/css]

Hasonlóan az előző kettőhöz, a felső vonal formázása is hasonló lesz, azzal a különbséggel, hogy most felül fog elhelyezkezni, ezért a top és a left értéke is nulla lesz:

[css]
.c4 a:before {
content:’ ‘;
display: inline-block;
width: 100%;
height: 1px;
background: #d35400;
positon: absolute;
top: 0;
left: 0;
transition: all .5s ease;
}
[/css]

A :hover-t is megadhatjuk, legyen a magassága 5px, ha ráhúzzuk az egeret:

[css]
.c4 a:hover:before {
height: 5px;
}
[/css]

Az alsó vonalban sem lesz semmi turpisság, egyben így néz ki a hozzá tartozó CSS:

[css]
.c4 a:after {
content:’ ‘;
display: inline-block;
width: 100%;
height: 3px;
background: #d35400;
positon: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all .5s ease;
}

.c4 a:hover:after {
opacity: 1;
}
[/css]

És akkor most jön, a belső rész. Először is az <a> elemben található <span>-okat blokk szintűvé kell tennünk:

[css]
.c4 a span {
display:block;
}
[/css]

Ezzel egymás alá kerülnek. A navigációs link kiegészítő információját lássuk egy másfajta formázással. Ezt a :last-child álosztállyal fogjuk megtenni, amivel az utolsó <span> elemet fogjuk kijelölni:

[css]
.c4 a span:last-child {
font-size: .7em;
font-family: Georgia;
color:#d35400;
margin-top: .5em;
}
[/css]

Kapott még egy kis felső margót is, hogy ne “tapadjon” rá a menüpont fő szövegére. Mivel azt szeretnénk, hogy felülről “jöjjön” le, ezért a már ismert transform: translate-t fogjuk használni, de most nem Y hanem X tengelyen: transform: translateY(-100%);
Továbbá szeretnénk, hogy ne látszódjon, ezt továbbra is az opacity-vel oldjuk meg, majd megkapja ő is a transitiont, ami az animálásért fog felelni. Mindegy összesítve így fog kinézni:

[css]
.c4 a span:last-child {
font-size: .7em;
font-family: Georgia;
color:#d35400;
margin-top: .5em;
opacity: 0;
transform: translateY(-100%);
transition: all .5s ease;
}
[/css]

A hover résznél pedig visszaállítjuk a translate és az opacity értékét:

[css]
.c4 a:hover span:last-child {
opacity: 1;
transform: translateY(0%);
}
[/css]

Mindez végeredményben így fog kinézni:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”nxDBp” default_tab=”result”]See the Pen Creative navigation links 4. by Hutchington (@hutchington) on CodePen.[/codepen_embed]

Most már kezedben a tudás, a képzeletedre van bízva, hogy milyen animációkat találsz ki.

Az összeset egyben itt nézheted meg:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”FgCpt” default_tab=”result”]See the Pen Creative navigation links by Hutchington (@hutchington) on CodePen.[/codepen_embed]

Jó navigálást, jó animálást kívánok hozzá! ;)