Pystysuuntainen CSS-valikko

CSS:n avulla voi muotoilla listoja lähes rajattomasti. Tällä sivulla on yksi koodi pystysuuntaisen valikon luomiseen. Jotta sitä voisi käyttää hyväksi, olisi hyvä osata edes vähän CSS:ää, mutta melko vähilläkin tiedoilla pärjää. Koodia saa täysin vapaasti kopioida ja käyttää omilla sivuillaan: sitä vartenhan se täällä on. Jos ongelmia ilmenee, ota yhteyttä.

HTML

<div class="valikko">

<ul>
<li><a href="#">Linkki</a></li>
<li><a href="#">Linkki</a></li>
<li><a href="#">Linkki</a></li>
<li><a href="#">Linkki</a></li>
<li><a href="#">Linkki</a></li>
<li><a href="#">Linkki</a></li>
<li><a href="#">Linkki</a></li>
<li><a href="#">Linkki</a></li>
</ul>

</div>

CSS

Tätä koodia voi käyttää silloin, jos sivuston reunassa on tietynlevyinen div, jonka sisään valikko tulee. Valikko mukautuu automaattisesti reunadivin leveyteen. Jos valikosta haluaa kiinteälevyisen, pitää muuttaa kaikki width: 100% -kohdat esim. muotoon width: 150px. Tummennettuja kohtia voi muuttaa toimivuuden heikentymättä.

Esimerkki, miltä valikko suunnilleen näyttää sivuille upotettuna

.valikko
{
width: 100%;
padding: 0;
margin-bottom: 0; /* ei välttämätön, säädä haluamasi marginaali */
margin-top: 0; /* ei välttämätön, säädä haluamasi marginaali */
font-family: Verdana, Arial, sans-serif;
overflow: hidden;
}

.valikko ul
{
list-style: none;
padding: 0;
margin: 0;
border: none;
width: 100%;
}

.valikko li
{
border-bottom: 3px solid #FFFFFF; /* Laita tähän sivun taustaväri */
list-style-image: none;
width: 100%;
vertical-align: bottom; /* Korjaa IE:n list-margin-bugin */
font: bold 14px Verdana, Arial, sans-serif;
}

.valikko ul li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 20px solid #415C72;
text-decoration: none;
width: 100%;
}

.valikko ul li a:link, .valikko ul li a:visited {
background-color: #50738D;
color: #FFFFFF;
text-decoration: none;
}

.valikko ul li a:hover
{
border-left: 20px solid #415C72;;
background-color: #7194AE;
color: #FFFFC4;
text-decoration: none;
}

.valikko li a#current {
background-color: 7194AE;
color: #FFFFC4;
text-decoration: none;
}