8. Oppitunti - Navigaatio
Edellisessä kappaleessa opimme tekemään linkkejä eri dokumenttien välille. Tässä kappaleessa jatkamme aiheesta ja suunnittelemme linkeistä näppärän navigaation.
Kuvitellaan että sivustoomme kuuluu useita samankaltaisia sivuja, tällaisia voivat olla esimerkiksi etusivu, blogi, tietoa sivuista, ylläpitäjän linkkivinkit jne. Näiden sivujen välillä liikkuminen helpottuu, jos joka sivun yläreunassa on yhtenäinen valikko. Seuraavassa näytän kuinka tehdään yksinkertainen mutta toimiva navigaatio css:n avulla.
1. Tee linkeistä lista, esimerkiksi seuraavalla tavalla:
<ul id="navigaatio"> <li><a href="omasivu2.html" >Profiili</a></li> <li><a href="omasivu3.html">Uutiset</a></li> <li><a href="omasivu4.html">Linkkejä</a></li> <li><a href="omasivu5.html">Blogi</a></li> <li><a href="omasivu6.html">Yhteystiedot</a></li> </ul>
Älä unohda id:tä, tarvitsemme sitä vielä. Tee sama kaikkien luomiesi sivujen kanssa. Siirrä navigaatio sivulle ensimmäiseksi.
2. Kopioi seuraava css koodi tiedostoon tyyli1.css:
#navigaatio {
position:relative;
margin-left:0;
margin-bottom:-5em;
float:right;
text-align: right;
font-weight:bold;
}
#navigaatio li {
display: inline;
}
#navigaatio a {
padding-right:8px;
padding-left: 20px;
color: black;
background-color: transparent;
border: solid 1px black;
text-decoration: none;
}
#navigaatio a:hover {
color:white;
border: 1px solid white
}
Nyt sinulla pitäisi olla joka sivulla samanlainen valikkopalkki. Kun klikkaat eri sivujen välillä, valikon paikka ja koko eivät muutu.
