Egyszerű navigációs sáv

Az előző példában csak az oldal elrendezésével foglalkoztunk, így a navigációs sáv helyén is csak egy egyszerű szöveg volt. Most ennek elkészítéséről lesz szó, az előző példa kiegészítésével. Valahogy így:

A navigáció jellemzői:

• zöld hátterű elem: azt jelzi, hogy melyik oldal van éppen betöltve (mivel az oldalunk nem dinamikus, ezért ez most fixen a “Home” menüpont lesz)
• világosabb szürke hátterű elemek: azt jelzi, hogy melyik felett áll az egérkurzor (a kurzor nem látszik a képen)
• a lista utolsó eleme (About), a többitől eltérően jobbra van igazítva

A navigációs sáv szerkezete

A navigációs sáv elemeit egy felsorolásként (<ul>  – unordered list, számozatlan lista) szokás megadni, módosítsuk eszerint a #nav  szakaszt:

            <div id="nav">
                <ul>
                    <li><a class="active" href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>

CSS szintaktika röviden

A CSS fájlokban először kijelölünk (selector) egy HTML elemet, majd megadjuk a tulajdonságainak a kívánt értékét:

selector {
    property1: value1;
    property2: value2;
    ...
}

Szelektor lehet:

• HTML tag
• azonosító (id, # áll előtte, pl: #nav )
• osztály (class, . áll előtte, pl: .active )
• pszeudó osztály (pseudo class, : áll alőtte, pl: a:hover )

Pszeudó osztályok

A CSS pszeudó (ál) osztályai nincsenek a HTML dokumentumban kimondottan megadva, hanem bizonyos állapotú elemekre lehet velük formázást megadni. A pszeudó osztályok neve előtt :  áll.

Például:

• :hover  – azt az elemet jelöli, amelyik felett az egérkurzor áll
• :first-child  és :last-child  – azonos típusú elemek közül az első ill. utolsó
• :focus  – fókuszban levő elem, pl. egy űrlap azon beviteli mezője, amiben a kurzor van

A navigációs sáv formázása CCS-el

Készítsük el a #nav szakaszon belüli <ul>, <li>, és <a> tagekhez a CCS szelektorokat:

#nav ul {}
#nav li {}
#nav li:last-child {}
#nav a {}
#nav a:hover {}
#nav a.active {}

#nav li:last-child {} jelentése: #nav  azonosítójú elemen belüli <li>  elemek közül az utolsó (konkrétan: About menüpont)

#nav a:hover {} jelentése: #nav  azonosítójú elemen belüli <a>  elemek közül az, amelyik fölött a kurzor áll

#nav a.active {} jelentése: #nav  azonosítójú elemen belüli <a>  elemek közül azok, melyeknek .active  osztállyal vannak ellátva (több is lehet, mivel osztály)

Az egyes szelektorok tartalma

A #nav  elemen csak a margókat hagyjuk meg:

#nav {
    margin: 10px 0;
}

Az <ul>  listán beállítjuk a háttérszínt, eltávolítjuk a pöttyöket a lista elemekről, margókat nullázzuk.

#nav ul {
    overflow: hidden;
    background: #333;
    list-style: none;
    margin: 0;
    padding: 0;
}

A lista elemek jobbra úsztatva:

#nav li {
    float: left;
}

A linkek alapértelmezett inline  megjelenítését block  szintűre állítjuk, beállítjuk a dobozok méretét belső margóval és eltávolítjuk az aláhúzást:

#nav a {
    display: block;
    background: #333;
    text-decoration: none;
    color: white;
    padding: 0.7em 2em;
    font-weight: bold;
}

Az aktív oldal színe legyen zöld:

#nav a.active {
    background: #393;
}

És végül a pszeudó osztályok: a utolsó elem legyen jobbra igazított, és legyen világosabb az amelyik felett van az egérkurzor:

#nav li:last-child {
    float: right;
}
#nav a:hover {
    background: #555;
}

Eredmény

See the Pen Simple navigation bar by zeon (@zeon) on CodePen.

Megtekintés | Letöltés