Korinaa kuopasta

Jo 583 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 1514 päivää sitten, eli lauantaina 15.07.2006 kello 14:02. Kirjoitukseen on julkaistu kommentteja 10 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.

Julkaisun kommentit

Petteri Lahnala kommentoi 1515 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 ;)

Petri kommentoi 1515 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ä!

Petteri Lahnala kommentoi 1515 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).

Gocom kommentoi 1515 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 :)

Miko kommentoi 1515 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?

Jouni kommentoi 1514 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?

Gocom kommentoi 1514 päivää sitten

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

Petteri Lahnala kommentoi 1514 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

Gocom kommentoi 1514 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

Petri kommentoi 1514 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.

Oho! Tämän julkaisun kommentointi onkin jo 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.

Korinaa kuopasta: Navigaatio, fixed.

Selaat tällä hetkellä blogimerkintää Navigaatio, fixed.. Se julkaistiin %. päivä heinäkuuta 2006. 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!