, JWT 2012 Harjoitustyö

Jwt 2012

CSS-pudotusvalikko

Pudotusvalikon toteuttaminen CSS:llä on melko helppoa. Tässä ohjeessa kerrotaan miten se onnistuu.

Vaihe 1: HTML

Aluksi kirjoitetaan valikon HTML-koodi. Se toteutetaan sisäkkäisillä järjestämättömillä listoilla, jolloin valikon looginen rakenne säilyy myös ilman tyylimäärittelyjä.

Tässä vaiheessa valikko näyttää tältä.

<nav>
    <ul>
        <li><a href="">Kohta 1</a>
            <ul>
                <li><a href="">Kohta 1.1</a></li>
                <li><a href="">Kohta 1.2</a></li>
                <li><a href="">Kohta 1.3</a></li>
            </ul>
        </li>
        <li><a href="">Kohta 2</a>
            <ul>
                <li><a href="">Kohta 2.1</a></li>
                <li><a href="">Kohta 2.2</a></li>
                <li><a href="">Kohta 2.3</a></li>
            </ul>
        </li>
        <li><a href="">Kohta 3</a>
            <ul>
                <li><a href="">Kohta 3.1</a></li>
                <li><a href="">Kohta 3.2</a></li>
                <li><a href="">Kohta 3.3</a></li>
            </ul>
        </li>
    </ul>
</nav>

Vaihe 2: CSS

Seuraavaksi lisätään valikkoon CSS-tyylimäärittelyt, jotka muokkaavat sen ulkonäköä ja saavat aikaan alavalikoiden ilmestymisen.

Huomaa kontekstisten valitsimien käyttö määriteltäessä sisäkkäisten elementtien tyylejä.

Toiminnallisuus saadaan aikaan käyttämällä CSS:n :hover -pseudovalitsinta.

Nyt yksinkertainen pudotusvalikko on valmis ja näyttää tältä.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul { display: none; }  /* Piilotetaan alavalikko */
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #000;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover { background: #555; }
li:hover ul {
    display: block;  /* Valikko takaisin näkyviin */
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #555; }
li:hover li a:hover { background: #aaa; }

Lähde: Create a cool CSS-based drop-down menu