Korinaa kuopasta

Jo juttua!

Tilaa RSS tai Atom

Navigaatio, fixed.

Ja taas jatkuu näiden elämääkin suurempien vinkkien jakelu. Laitetaan vaikkapa nettisivujen navigaatio sivun yläosaan siten, että se pysyy siinä vaikka sivua vieritettäisiin, skrollattaisiin, ylös tai alas.

Tuo esittelysivu paljastaa melko hyvin sen, mitä tuolla äskeisellä kömpelöllä kuvauksella tarkoitin.

Esittelysivussa näytetään ilman kehyksiä ja ilman JavaScriptia toteutettu navigaatio. Navigaation, eli sen mötikän, joka sijoitetaan tuonne sivun yläosaan, XHTML-merkkaus on esimerkissä suunnilleen tällainen:

<ul id="navi"
    ><li><a href="#">Etusivu</a></li
    ><li><a href="#">Info</a></li
    ><li><a href="#">Weblog</a></li
    ><li><a href="#">Teokset</a></li
    ><li><a href="#">Linkit</a></li
    ><li><a href="#">Palaute</a></li
    ><li><a href="#">Vieraskirja</a></li
></ul>

CSS-tiedoston navigaatiota, ts. #navi-selektoria, kyykyttävä merkkaus näkyy tuossa alapuolella.

#navi {
   list-style: none;
   margin: 0;
   padding: 1em 0;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   background: url(../images/navi-bg-fade.png) repeat-x 0 100%;
   height: 5em;
   width: 100%;
   text-align: center;
   }

Vielä tällaisenaan ei kovin pitkälle pötkitä. Joudutaan vielä vähän kurittamaan nettisivun body-palikkaa sellaiseen muotoon. Laitetaan tyylitiedostoon vaikkapa tällaista:

body {
   margin: 10% auto;
   background: #333;
   position: relative;
   width: 100%;
   }

Yllä näkyvässä muotoilujen listauksessa tärkeitä ovat ainakin position: relative; ja with: 100%. Kannattaa toki laittaa myös haluttu taustaväri, joka on tässä esimerkissä tuollainen tummanharmaa. Samaan syssyyn voi määritellä myös tekstin värin, taustakuvan jne.

No joo. Laitetaanpa navigaation linkit vaakatasoon, tehdään se näin:

#navi li {
   display: inline;
   }

Lopuksi hienosäätöä. Kajotaan linkkien ulkoasuun:

#navi li a {
   padding: 0.7em;
   text-decoration: none;
   color: #B28416; /* Taitaa olla sinapinkeltainen */
   background: #333;
   }

#navi li a:hover {
   color: #FF9;
   background: #333;
   }

#navi li a:focus {
   color: #FFF;
   background: #333;
   outline: none; /* Poistaa linkin reunaviivan */
   }

Eikä siinä vielä kaikki. Navigaatiotestissä on käytetty PNG-kuvatiedostoa, joka pingotettiin koko navigaatiolistan taustaväriksi. Tässä kuvatiedostossa on käytetty alpha-kanavaa, joka on osittain läpinäkyvä — testisivulla näkyvä hienoinen varjostus on luotu ko. kuvalla. Koska Internet Explorer ei vielä tue moista läpinäkyvyyttä, on syytä säätää navigaatiota hieman. Laitetaan siis vanhoille IE:n versioille oma tyylitiedosto, joka kieltää näyttämästä esimerkkimme PNG-kuvaa:

#navi {
   background: #333;
   }

Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.

Luetuimpia blogimerkintöjä

Blogimerkintää "Navigaatio, fixed." muokattiin viimeksi 7060 päivää sitten, eli lauantaina. Kirjoitukseen on julkaistu kommentteja 10 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.

Korinaa kuopasta: Navigaatio, fixed.

Selaat tällä hetkellä blogimerkintää Navigaatio, fixed. Se julkaistiin 14. ä. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!