Miten luodaan: Pystysuuntainen valikko

Miten luodaan pystysuuntainen painikkeiden ryhmä

Vaihe 1 - Lisää HTML:

<div class="pystysuuntainen-valikko">
  <a href="#" class="active">Koti</a>
  <a href="#">Linkki 1</a>
  <a href="#">Linkki 2</a>
  <a href="#">Linkki 3</a>
  <a href="#">Linkki 4</a>
</div>

Vaihe 2 - Lisää CSS:

.pystysuuntainen-valikko {
  leveys: 200 px; /* Voit asettaa leveyden haluamallasi tavalla */
}
.pystysuuntainen-valikko a {
  taustaväri: #eee; /* Harmaa taustaväri */
  tekstiväri: musta; /* Musta tekstiväri */
  näyttö: blokki; /* Näytä linkit yksi kerrallaan */
  sisennys: 12 px; /* Lisää hieman sisennystä */
  tekstiväri: none; /* Poista linkin alapuolinen viiva */
}
.pystysuuntainen-valikko a:hover {
  taustaväri: #ccc; /* Synkki taustaväri hiiren osoitettavassa tilassa */
}
.pystysuuntainen-valikko a.active {
  taustaväri: #04AA6D; /* Lisää vihreä ‘aktiiviselle’/’nykyiselle’ linkille */
  väri: valkoinen;
}

Kokeile itse

Pystysuuntainen roolivalikko

Jos haluat pystysuuntaisen roolivalikon, aseta tarkka korkeus ja lisää overflow Ominaisuudet:

.pystysuuntainen-valikko {
  leveys: 200 px;
  korkeus: 150 px;
  overflow-y: auto;
}

Kokeile itse

Liittyvät sivut

Oppitunti:Miten luoda sivupalkkibar