Leijuva navigointipalkki

Tällä sivulla on ohjeet leijuvan navigointipalkin tekemiseen.

Vaihe 1

Varmista että sivusi koodi on toimiva ja linkki CSS-tiedostoon toimii.

Vaihe 2

Luodaan CSS-tiedostoon div-elementti, joka tulee sisältämään kelluvan navigointipalkin. Lisää seuraava koodinpätkä CSS-tiedostoon:


				
#navigointi {	/*kohdistuu navigointi-id:hen*/
position: fixed;	/*pitää palkin paikallaan*/
top: 0;	/*palkin sijainti (ruudun yläreuna)*/
width: 100%;	/*palkin leveys (100%, eli koko ruudun leveys)*/
color: #ffffff;	/*väri*/
height: 35px;	/*palkin korkeus*/
text-align: center;	/*tekstin sijainti (keskellä, voidaan muuttaa mieltymyksen mukaan)*/
padding-top: 15px;	/*tekstin sijainti ylä-ala -suunnassa*/
/*lisää varjon palkin alle*/
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/*tekee läpinäkyvän taustan*/
background-color: rgba(1, 1, 1, 0.8);	/*palkin väri (esimerkkinä musta)*/
color: rgba(1, 1, 1, 0.8);
}
/*navigointipalkin tekstin fontti, padding ja väri*/
#navigointi a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigointi a:hover {	/*määrittää mitä tapahtuu kun hiirtä pidetään*/ palkin päällä
color: grey;	/*muuttaa tekstin  harmaaksi*/
}
				
				

Vaihe 3

Luo html-dokumenttiin div-elementti, jonka id on "navigointi". Tämän elementin sisään lisäät linkit jotka haluat navigointipalkkiin. Esimerkki:


				
<div id="navigointi">
	<a href="#kohta1">Kohta 1</a>
	<a href="#kohta2">Kohta 2</a>
	<a href="#kohta3">Kohta 3</a>
</div>
				
				

Esimerkissä navigointipalkin linkit vievät samalle sivulle, mutta #-alkaviin kohtiin voi laittaa tilalle www-osoitteen.

Vaihe 4

Lisää CSS-tiedostoon seuraava koodinpätkä:

				
body {
	padding: 0;
	margin: 0;
}
				
				

Tämä täytyy tehdä koska ilman sitä navigointipalkin ja ruudun vasemman reunan väliin jää pieni väli joissain selaimissa. Tähän kohtaan voit myös lisätä paddingin yläreunaan jotta navigointipalkki ei mene sivun sisällön eteen.

Vaihe 5

Nyt navigointipalkin pitäisi toimia. Lisää sivustolle html-dokumentteja tai sivulle ankkureita jotka vastaavat navigointipalkin linkkejä, jotta voit testata navigointipalkkia. Jos teit navigointipalkin täysin ohjeiden mukaan sen pitäisi olla musta ja tekstin valkoista. Muokkaa palkin css-koodia niin että palkin ulkoasu sopii sivullesi. Tällä sivulla oleva navigointipalkki on muuten samanlainen kuin ohjeessa, mutta vain erivärinen. Navigointipalkkiin voi myös lisätä muutakin kuin linkkejä. Navigointipalkkiin voi hyvin tehdä esimerkiksi kellon kuten tällä sivulla.