CSS/Menüüde ehitamine

Enamik lehekülgi sisaldab endas mingisugust sorti menüüd, kuhu on koondatud olulisimad leheküljel navigeerimist võimaldavad lingid. Menüüd võivad olla nii horisontaalsed kui vertikaalsed, nii ühe- kui mitmetasandilised, neid võib olla vaid üks aga ka päris hulgem.

Paljud "vana-kooli-lehed" paigutavad iga menüüelemendi eraldi tabelilahtrisse, samamoodi nagu tehakse ka kogu ülejäänud lehega. Tihtipeale asendatakse tekst tabelilahtrites piltidega ning igale pildile lisatakse eriline roll-over effekt - skript, mis vahetab esialgse pildi teise vastu, kui hiirekursor satub pildi peale, ning taastab esialgse pildi, kui kursor selle kohalt lahkub. Täiesti samaväärse efekti võib aga saavutada vaid oskuslikult CSS-i kasutades.

Tegelikult taandub igasugune menüü oma põhiolemuselt üheks lihtsaks (järjestamata) loendiks, sest sisult on ju tegemist vaid ühe lihtsa linkide nimekirjaga. Lisaks võime oma loandile lisada ka pealkirja ja kapseldada selle ühe unikaalse id-ga div-i sisse. Näiteks nõnda:

<div id="menyy">
<h1>Menüü</h1>
<ul>
  <li><a href="link1.html">Link 1</a></li>
  <li><a href="link2.html">Link 2</a></li>
  <li><a href="link3.html">Link 3</a></li>
  <li><a href="link4.html">Link 4</a></li>
</ul>
</div>

Välimus, mille me niiviisi saavutame pole arvatavasti see, mida ihkaksime, aga CSS-i abiga võime oma menüü välimust tundmatuseni muuta.

Esimesena häirivad meid need mustad mummud, mis on vaikimisi iga loendi elemendi ees. Ringid võiksime asendada näiteks ruutudega, või mis veelgi parem, piltidega:

#menyy ul { list-style-image: url("lilleke.png") }

Võime aga kaotada need pildid/sümbolid sealt ka üleüldse:

#menyy ul { list-style-type: none }

(vahepealne osa vajab kirjutamist)

Lõpptulemus:

CSS:

#menyy { 
    border: 2px solid #6c502c;
    border-bottom: none;
    font-family: Verdana, Arial, sans-serif;
    width: 160px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 150px;
}

#menyy h1 {
    color: #453520;
    padding: 2px 5px;
    margin: 0;
    font-size: larger;
    font-variant: small-caps;
    background-color: #e88e19;
    text-align: center;
    width: 156px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 146px;
}

#menyy ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0;
    border-top: 2px solid #6c502c;
}

#menyy a { 
    color: #6c502c;
    font-weight: bold;
    text-decoration: none;
    background-color: #e2c6a2;
    border-bottom: 2px solid #6c502c;
    display: block;
    padding: 2px 5px;
    width: 156px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 146px;
}

#menyy a:hover { 
    background-color: #6c502c;
    color: #e2c6a2;
}

Raamat: CSS

<< Häkid

Meediaspetsiifilised stiilid >>

Sisukord