Kirjoittaja: Hennkka
Kirjoitettu: 16.12.2010 – 21.11.2011
Tagit: ohjelmointitavat, koodi näytille, vinkki
Tämä on suhteellisen yksinkertainen tapa luoda valikko. Valikot luodaan sisäkkäisillä ul-elementeillä, joista ylimmän id:ksi määritetään "nav". Tyyleillä sitten määritellään valikosta halutun lainen.
Tässä vinkissä on esimerkit sekä pysty- että vaakavalikolle. Molemmat valikot voivat olla äärettömän pitkiä. Kuitenkaan ei kannata käyttää sataa sisäkkäistä valikkoa.
Koodi tarvitsee toimiakseen ainakin CSS2:ta tukevan selaimen.
Valikot toimivat yksinkertaistettuna siten, että vain ylin lista näytetään ja kaikki alemmat piilotetaan (display none;). Kun sitten valinnan päälle viedään hiiri (:hover), näytetään seuraava valikko (display: block;). >-merkki valitsee tyylien koskemaan vain ja ainoastaan elementtejä, joiden "parent" on ennen merkkiä ilmoitettu. Ylimmän valinnan position on oltava relative, jotta alemmat valikot sijoitetaan suhteessa siihen. Alempien valikkojen position on absolute, jotta ne sijoittuisivat suhteessa ylempään elementtiin oikein. Ilman sijainnin määrityksiä ne sijoittuisivat suoraan ylemmän elementin päälle. Tämän takia ylemmän elementin leveys (ja vaakavalikossa ylimmän korkeus) on tiedettävä. Vaakavalikossa ylimmät li-elementit "liu'utetaan" samalle riville määrityksellä float: left;.
#nav, #nav ul /*Valikkojen yleiset tyylit*/
{
width: 80px; /*Asetetaan elementin leveys (tarvitaan alavalikkojen sijoituksessa)*/
/*Postetaan sisennykset*/
margin: 0;
padding: 0;
}
#nav li /*Valikkojen valintojen yleiset tyylit*/
{
list-style-type: none; /*Postetaan listan pallot*/
position: relative; /*Asetetaan alavalikkojen "isännäksi"*/
background-color: #FF0000; /*Asetetaan taustan väri*/
}
#nav li > ul /*Alavalikkojen tyylit*/
{
display: none; /*Piilotetaan alavalikot*/
/*Sijoitetaan alavalikot paikoilleen*/
position: absolute; /*Sijoitetaan suhteessa "isäntään"*/
left: 80px; /*Siirretään oikeaan reunaan; left <= width*/
top: 2px; /*Siirretään lievästi alas (pakollinen, vaikka 0)*/
}
#nav li:hover > ul /*Alavalikko näytettäessä*/
{
display: block; /*Näytetään alavalikot*/
}
/*Vapaaehtoisia määrityksiä*/
/*Linkit*/
#nav a /*Linkki*/
{
color: #000000; /*Linkit perus mustaksi*/
text-decoration: none; /*Poistetaan alleviivaus*/
}/*Yleiset määritykset, ylin ja toisiksi ylin valikko*/
#nav, #nav ul /*Valikkojen yleiset tyylit*/
{
height: 1em; /*Asetetaan elementin korkeus (tarvitaan alavalikkojen sijoituksessa)*/
/*Postetaan sisennykset*/
margin: 0;
padding: 0;
}
#nav li /*Valikkojen valintojen ykeiset tyylit*/
{
list-style-type: none; /*Poistetaan listan pallot*/
float: left; /*"Liutetaan" valikot samalle riville*/
position: relative; /*Asetetaan alavalikkojen "isännäksi"*/
width: 80px; /*Asetetaan elementin leveys (tarvitaan alempien sijoituksessa)*/
background-color: #FF0000; /*Asetetaan taustan väri*/
}
#nav li > ul /*Alavalikkojen tyylit*/
{
display: none; /*Piilotetaan alavalikot*/
/*Sijoitetaan alavalikot paikoilleen*/
position: absolute; /*Sijoitetaan suhteessa "isäntään"*/
left: 2px; /*Siirretään leivästi oikealle*/
top: 1em; /*Siirretään ylimmän valikon alle; top <= height*/
}
#nav li:hover > ul /*Alavalikko näytettäessä*/
{
display: block; /*Näytetään alavalikot*/
}
/*Alemmat valikot (ilmestyvät vanhan valikon viereen)*/
#nav li ul li > ul /*Ala-alavalikko*/
{
display: none; /*Piilotetaan alavalikot*/
/*Sijoitetaan alavalikot paikoilleen*/
position: absolute; /*Sijoitetaan suhteessa "isäntään"*/
left: 80px; /*Siirretään oikeaan reunaan; left <= width*/
top: 2px; /*Siirretään lievästi alas (pakollinen, vaikka 0)*/
}
/*Vapaaehtoisia määrityksiä*/
/*Linkit*/
#nav a /*Linkki*/
{
color: #000000; /*Linkit perus mustaksi*/
text-decoration: none; /*Poistetaan alleviivaus*/
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Valikko testi</title>
<!-- Linkkaa pystyvalikko.css tai vaakavalikko.css -->
<link rel="stylesheet" type="text/css" href="vaakavalikko.css" />
</head>
<body>
<!--
Koko valikko on yksinkertaisesti lista, jonka tyylit muotoilevat.
ID:llä määritellään tyylit käytettäväksi.
-->
<ul id="nav">
<li>Valikko1<ul>
<li>Valikko1-1</li>
<li><a href="#">Valikko1-2</a></li>
</ul></li>
<li><a href="#">Valikko2</a><ul>
<li><a href="#">Valikko2-1</a></li>
<li><a href="#">Valikko2-2</a><ul>
<li>Valikko2-2-1<ul>
<li><a href="#">Valikko2-2-1-1</a></li>
</ul></li>
<li><a href="#">Valikko2-2-2</a></li>
</ul></li>
</ul></li>
</ul>
<br />
Tässä on tekstiä, jonka päälle valikon pitäisi aueta ilman, että tämä teksti siirtyy.
</body>
</html>Voisit selittää vielä sanallisesti kuvauksessa, miten valikko on toteutettu eli mitä CSS-tyylejä siihen tarvitaan ja minkä takia. Asian selvittäminen pelkästä koodista on vaivalloista.
Hieno! Tulee kyllä tarpeeseen.
Hieno, mutta...
Kuinka tuolle koko vaakavalikolle saa määritettyä leveyden? Olen yrittänyt tunkea widthiä vaikka mihin mutta ei ole toiminut.