Kuinka luoda: kiinteä sivupalkki

Edellinen sivu Hakukenttä
Seuraava sivu Sivunavigointi

Opi, miten CSS:ää käytetään kiinteän sivupalkin navigointivalikon luomiseen。

Täyskorkeus:

Automaattinen korkeus:

Luo kiinnitetty sivupalkki

Ensimmäinen vaihe - Lisää HTML:

<!-- Sivupalkin navigointi -->
<div class="sidenav">
  <a href="#">Tietoa</a>
  <a href="#">Palvelut</a>
  <a href="#">Asiakkaat</a>
  <a href="#">Yhteystiedot</a>
</div>
<!-- Sivun sisältö -->
<div class="main">
  ...
</div>

Toinen vaihe - Lisää CSS:

/* Sivupalkin valikko */
.sidenav {
  height: 100%; /* Täyskorkeus: Jos haluat 'automaattisen' korkeuden, poista tämä asetus */
  width: 160px; /* Aseta sivupalkin leveys */
  position: fixed; /* Kiinnitä sivupalkki (pysyä alkuperäisessä sijainnissa vierityksen aikana) */
  z-index: 1; /* Pysy aina ylhäällä */
  top: 0; /* Pysy aina ylhäällä */
  left: 0;
  background-color: #111; /* Musta */
  overflow-x: hidden; /* Poista horisontaalinen vieritys */
  padding-top: 20px;
}
/* Navigointivalikon linkit */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* Muuta väritystä, kun hiiren osoitin on navigointi链接上 */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Aseta sivun sisällön tyylejä */
.main {
  margin-left: 160px; /* Sama kuin sivupalkin leveys */
  padding: 0px 10px;
}
/* Muuta sivupalkin tyylejä pienemmille näytöille, joiden korkeus on alle 450 pikseliä (vähemmän sisätilaa ja pienempi fonttikoko) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Kokeile itse (täyskorkeus)

Kokeile itse (automaattinen korostus)