Navigaatio, fixed.

  • Julkaistu: 14.07.2006
  • Kategoria:
  • Kommentointi suljettu. (10)

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

Tagit: ,

  1. Petteri Lahnala kirjoitti 668 päivää sitten:

    #navi {background: url(“shadow.gif”) #333;}

    Varjon voi tuottaa tyylikkäämmin gif-kuvalla, jossa on läpinäkyvyyttä. Mutta se siitä, nyt mainostamaan uutta sivustoa, kaikki tänne ja heti ;)

  2. Petri kirjoitti 668 päivää sitten:

    Joo, niinhän sen tietysti voisi noinkin tehdä, paitsi… Paitsi gif-kuvaan ei saa alpha-channelia. Tietysti voi jättää koko varjostuksen laittamatta ja käyttää pelkkää taustaväriä—sitä voi vielä sitten ehostaa esim. laittamalla borderia navigaatiopalkin alaosaan.

    Kävin tuota saittiasi jo katselemassa. Navigaatiosi näyttää tosi siistiltä!

  3. Petteri Lahnala kirjoitti 667 päivää sitten:

    Kiitos, viilasin sitä ylänavia noin kaksi viikkoa, pikselin tarkkuudella tietenkin. Eikös giffistä kuitenkin saa jonkin sorttista huonoa “läpinäkyvyyttä” kuitenkin, vaikka ei se ole sama kuin png:ssä, vaan kaikkia pikselitä ei täytetä värillä, vaan esim. joka toinen pikseli.
    En tiiä giffistä, muuta kuin sen, että png voittaa sen miten päin vain.
    Opera Mini kunniaan! (loppukommentti).

  4. Gocom kirjoitti 667 päivää sitten:

    Todella hieno sivu tosiaan :) En vaan ole kotona ja netti on vähän hitaampi niin tuo navin hoveri näyttää vähän oudolta (aluksi kuva, sitten boxi, sitten kuva ja viiva), no mutta kun kuvat siirtyvät välimuistiin niin ei enää ongelmaa :P No, hieno sivu navin osalta.

    Saanenko kysyä, txp vai cutenews? Voisikos se joku muu olla… Txp taitaa olla :)

  5. Miko kirjoitti 667 päivää sitten:

    Jahas… Pitkästä aikaa täälläkin käyn ja aikalailla erilaiseksi Kuopassa.com on muuttunut. Kaikkia tekstejä en ole ehtinyt lukemaan, mutta ulkoasullisesti olet jälleen onnistunut. Ei niinkään minun makuuni tämä ulkoasu ole, mutta se erottuu positiivisesti massasta. Good Work!

    Olen muuten se sama heppu, joka ylläpiti ennen Wirtaus-blogia. Muistat kai?

  6. Jouni kirjoitti 667 päivää sitten:

    Ja hyvin toimii IE:llä... Fixed-position hidastaa sivunvieritystä ja on muutenkin turha keksintö. Ja vanhoihinkin IE:isiin saa kyllä PNG:t toimimaan alpha-filtterillä jos välttämättä haluaa.

    Mutta mitä tärkeää tai edes välttämätöntä on määrittää bodylle 100%:n leveys tai position: relative?

  7. Gocom kirjoitti 667 päivää sitten:

    Öhöm, aluksi puhuimme petri lahnalan sivusta ;)

  8. Petteri Lahnala kirjoitti 667 päivää sitten:

    Gröhöm…. Saanko esitellä itseni :D The Petteri Lahnala The MasterGuruOfCSS.

    No, Petri, laitoin sinne räjähtäneen logon, siis mun sivuille, mitä sano. Se on just sitä abstraktia jotain :D

  9. Gocom kirjoitti 667 päivää sitten:

    Hups, nimetkin menee väärin :( noh, noh… Ei ihme että unohdin uuden, kesken eräisen blogini textpattenin tunnukset. Noh, arvaamalla meni taas oikein :P… blogin näkee nimimerkistä jos kiinnostaa… ihmettelen vaan miksi sivusto on testin mukaan hidas vaikka se on pieni kooltaan.

    Otan muuten sivustoille vastaan blogien linkkejä, ja ne päätyvät listaan, jos niissä on ideaa tai ulkonäköä ;), tosin linkistä ei ole mitään hyötyä pagerankin kanssa sillä google ei ole edes vielä käynyt sivuilla, eli rankki on pyöreä nolla niin kuin lähes kaikilla sivuillani ja sekin ihmetyttää. Googlen botit on varmaan humalassa, kun ei muista antaa mun sivuille googlerankkia :D

  10. Petri kirjoitti 667 päivää sitten:

    Jouni: Joo, taidat muuten hyvin pitkälti ja täsmälleen olla oikeassa, eli eihän tuohon bodyyn tarvitsekaan laittaa “width: 100%;”, kun se näyttäisi toimivan ihan hyvin ilmankin sitä. Bodyyn kyllä jättäisin tuon “position: relative;” -komennon, sillä se jo yksin selkeydenkin vuoksi on informatiivinen.

    Fixed-asemointi on kieltämättä joillain selaimilla (tai ainakin Operalla) skrollaamista hidastava pömpeli. Eipähän kuitenkaan tarvitse käyttää frameja, kuten on tehty esim. Verkkokauppa.com -sivuston alalaidassa näkyvässä ostoskorissa.

Tämän julkaisun kommentointi on suljettu.

Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 10 kommenttia. Tämä artikkeli on lokeroitu kategoriaan . Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2006/07/14/navigaatio-fixed.

Blogmaster:
Petri Ikonen, petri.ikonen@kuopassa.com, www.kuopassa.com