Ebben a kis HTML/CSS segítségben most az aktív fejlécmenü készítéséről lesz szó, mely nagyon szárnyra kapott az utóbbi időben. Ennek az a lényege, hogy nem a fejlécen előre elkészített szöveget linkeljük be, hanem egy meghatározott helyre kód segítségével rakjuk be a menüket, és így ha ezekre ráhúzzuk az egeret, megváltozhatnak. Egyébként, ez egy nagyon jó módszer, ami nagyszerűen feldobhatja az oldaladat, sokkal profibbá téve azt. Nézzük is akkor, mi fog a mi esetünkben kelleni.

 

Photoshop – menücsík

Először is, fontos, hogy amikor elkészítjük a fejlécünket, azon szerepeljen hely a menünek. Ez lehet bárhol, alul vagy fölül, vagy akár középen is, lényegtelen igazából, mert ha megérted a lényegét, akkor ezek után már bárhol szerepelhet a menü. Én most ezzel a fejlécemmel fogom szemléltetni a dolog menetét:

Láthatjátok, hogy már előre elkészítettem egy téglalapot a menünek. Természetesen, annyi variáció van, hogy igazából bárhogy megcsinálhatod a fejlécre a menüt. Hogyha Te is a fejléc aljára helyezed, akkor lesz még egy lépés, amit nem hagyhatsz ki:

A fejléced pontosan úgy kell levágnod, hogy a rajta lévő menücsík levágódjon. Szükséged lesz a következő tutorialra is azért, hogy megértsd, miért is fontos ez a lépés: » Fejléc teljes képernyő szélességben

 

HTML – táblázat a menünek

Ezt a lépést táblázat elhanyagolásával is meg lehet csinálni, de én mindig táblázattal készítem el, mivel így sokkal biztonságosabb a dolog, és 100%, hogy senkinek nem csúszik el. Tehát, ha a fejléceket (teljes fejléc+kivágott fejléc) már feltöltötted, és a megjelölt tutorial alapján helyre is raktad őket, akkor egy táblázatot fogunk beilleszteni alája. Ezért fontos, hogy az előző lépésben pontosan vágd le a menüt.

 

Először is, illesszük be a kivágott, kisebb fejlécünket, ami a menü felett fog elhelyezkedni:

<div align="center"><IMG SRC="http://fejléclinkje.png"></div>

Fontos, hogy középen legyen, úgy biztos nem fog elcsúszni. Ezután pontosan ez alá kell beillesztenünk a menü táblázatkódját:

<table cellpadding="0" cellspacing="0" border="0" width="1100" height="100">
<tr>
<td class="cssmenu" align="center" valign="center">
<a href="http://cherryuniverse.net/">Menü</a>
<a href="http://cherryuniverse.net/">Menü</a>
<a href="http://cherryuniverse.net/">Menü</a>
<a href="http://cherryuniverse.net/">Menü</a>
<a href="http://cherryuniverse.net/">Menü</a>
<a href="http://cherryuniverse.net/">Menü</a>
<a href="http://cherryuniverse.net/">Menü</a>
<a href="http://cherryuniverse.net/">Menü</a>
</td>
</tr>
</table>

Adjuk meg a táblázat paramétereit:

width: a szélesség legyen 100%, ha CSS-ben megadtad a fejléced szélességét, vagy pont annyi, amekkora a menücsíkod. Esetemben 1100 pixel.

height: a magasság is legyen annyi, amekkorának a menücsíkod készítetted el. Nálam ez 100 pixel.

cssmenu: láthatod ezt a meghatározást a kódban. Erről ezek után lesz szó, de ez mindenképpen szerepeljen benne a fentiek alapján.

a href=”link”: itt adhatjátok meg az egyes menüpontokat értelemszerűen. Annyiszor illeszd be a kódot, ahány menüpontra szükséged lesz.

Ha ezzel megvagyunk, akkor egy hasonló táblázat kerül a fejlécünk alá, ha mindent pontosan adtunk meg. Most direkt adtam keretet a táblázatomnak, hogy lássátok, mi történt:

Most már az alapokkal el is készültünk, már csak meg kell formázni, hiszen mint láthatod, ez még így nem jó, mivel még nem adtuk hozzá a CSS-t. A következő lépésben ezt taglalom.

 

CSS – stílus a menüpontoknak

Mint ahogy azt előre gondolnánk, most nem a táblázatnak fogunk stílust adni, hanem az egyes menüpontoknak. Ezért kellett megadnunk a táblázat kódjában a class=”cssmenu” kódot, mert ezután ezzel fogunk dolgozni, csupán megtoldjuk egy aprócska trükkel a dolgot. A következő CSS kódot kell beillesztened a többi CSS-edhez, természetesen ezeket elláttam instrukciókkal, hogy mi mit jelent. Innentől kezdve te is személyre szabhatod a saját menüdet:

.cssmenu A{ /*menüpontok*/
background-color: transparent; /*átlátszó háttér*/
border-bottom: solid 5px #cbd8db; /*alsó vonal*/
text-transform: uppercase; /*nagybetűs linkek*/
font-family: calibri; /*betűtípus*/
font-size: 16px; /*betűméret*/
letter-spacing: 2px; /*betűköz*/
font-weight: none; /*betűstílus*/
color: #ffffff; /*betűszín*/
margin-right: 20px; /*szünet az egyes menüpontok között*/
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

.cssmenu A:hover{ /*menüpontok, ha ráviszed ai egeret*/
background-color: #cbd8db; /*háttérszín*/
color: #ffffff; /*betűszín*/
border-bottom: solid 5px #ffffff; /*alsó vonal*/
}

Igazából, ennyi lenne a dolog. Ha mindent megfelelően kódolsz be, akkor az eredmény valami hasonló lesz az oldaladon:

Természetesen, ezt úgy formázhatod, ahogy szeretnéd, és ahogy illik a fejlécedhez. Remélem, hasznodra vált ez a kis tutorial! Ha bármiben elakadnál, kérdezz :)


Komment részleg
2015/09/09 18:42

És lehet valami olyasmit, hogy csak CSS-ben és a kódba beilleszteni bloggeren?

Brielle
2015/09/10 15:42

Nem tudom, nem értek bloggerhez. De mindenképpen szükség van egy HTML felületre. CSS-be nem tudsz HTML-t beilleszteni HTML-be viszont CSS-t igen.

Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *