Miten luodaan: Tasavälinen navigointirivi

Opi, miten luodaan navigointirivi, jossa on tasavälistä navigointilinkkejä.

Luo responsiivinen navigointirivi

Ensimmäinen vaihe - Lisää HTML:

/* Navigointivalikko */
<div class="navbar">
  <a class="active" href="#">Koti</a>
  <a href="#">Haku</a>
  <a href="#">Yhteystiedot</a>
  <a href="#">Kirjaudu sisään</a>
</div>

Toinen vaihe - Lisää CSS:

/* Aseta navigointivalikon tyyli */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Navigointilinkit */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Neljä tasavälistä linkkiä. Jos sinulla on kaksi linkkiä, käytä 50%, kolmelle linkille 33.33%, jne. */
  text-align: center; /* Jos haluat tekstin keskelläIf you want the text to be centered */
}
/* Lisää hiiren osoittimen yllä olevan linkin taustaväri */
.navbar a:hover {
  background-color: #000;
}
/* Aseta nykyisen/aktiivisen linkin tyyli */
.navbar a.active {
  background-color: #04AA6D;
}
/* Lisää vastauskyky - alle 500 pikselin ruudun näytöillä, näytä navigointilinkit riveittäin eikä rinnakkain */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Jos haluat tekstin vasemmassa reunassa pienillä näytöillä */
  }
}

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS navigointipalkki