Menüü
Enamasti koosnevad kodulehed mitmest erinevast failist ja sel juhul on vaja nende failide vahel ka liikuda. Selleks saab nt kasutada linkide nimekirja, märgendeid <ul> ja </ul> , kus iga konkreetne link on nimekirja element, märgenditega <li> ja </li>:
<ul> <li><a href="index.html">Avaleht</a></li> <li><a href="meist.html">Meist</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul>
Esialgu annab see seesuguse tulemuse:
Kui nüüd lisada aga veidi kujundust järgmiselt:
ul
{
list-style-type: none; /* eemaldab nimekirja ees olevad punktid */
margin: 0; /* eemaldab tühja ruumi elementide vahel */
padding: 0; /* eemaldab tühja ruumi elementide ümbert */
}
siis on tulemus seesugune:
Kui on soov paigutada lingid kõik üksteise alla, siis tuleb kujundada linke järgmiselt:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
background-color: limegreen;
}
li a {
display: block;
color: white;
padding: 8px 16px;
text-decoration: none;
}
/* lingi värvi muutmine, kui liigutakse hiirega sellest üle */
li a:hover {
background-color: forestgreen;
color: white;
}
Selle tulemusena näeb menüü välja selline:
Kui on aga soov luua horisontaalset menüüd, siis saab lisada järgmise kujunduse:
li {
float: left;
}
a {
display: block;
padding: 8px 16px;
background-color: limegreen;
}
Mille tulemusena tekib seesugune menüü: