CSS3 animatsioonid – Akordion tüüpi menüü

Sellest peatükist alates alustame kindlate näidetega ning paneme CSS’i enda jaoks kenasti tööle. Alustame akordion tüüpi menüüst, kus mingi osa tekstist on peidus ja klikkides lingile kuvatakse soovitud sisu.

Alustame HTML sisust ning kasutame järjestamata loendit. Iga loendi element sisaldab linki ja sisu.

        <h1>Akordion menüü</h1>
        <ul class="akordion">
            <li>
                <a href="#link1" id="link1"><h2>Link 1</h2></a>
                <div class="hide">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, nisi, placeat voluptatem eligendi accusamus omnis deleniti facere odit perferendis rem repellat itaque amet quis ad minus hic! Iste, modi laudantium.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, nisi, placeat voluptatem eligendi accusamus omnis deleniti facere odit perferendis rem repellat itaque amet quis ad minus hic! Iste, modi laudantium.</p>
                </div>
            </li>
            <li>
                <a href="#link2" id="link2"><h2>Link 2</h2></a>
                <div class="hide">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, nisi, placeat voluptatem eligendi accusamus omnis deleniti facere odit perferendis rem repellat itaque amet quis ad minus hic! Iste, modi laudantium.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, nisi, placeat voluptatem eligendi accusamus omnis deleniti facere odit perferendis rem repellat itaque amet quis ad minus hic! Iste, modi laudantium.</p>
                </div>
            </li>
            <li>
                <a href="#link3" id="link3"><h2>Link 3</h2></a>
                <div class="hide">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, nisi, placeat voluptatem eligendi accusamus omnis deleniti facere odit perferendis rem repellat itaque amet quis ad minus hic! Iste, modi laudantium.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, nisi, placeat voluptatem eligendi accusamus omnis deleniti facere odit perferendis rem repellat itaque amet quis ad minus hic! Iste, modi laudantium.</p>
                </div>
            </li>
        </ul>

Nüüd see osa, mis on tähistatud klassiga class=”hide”, tuleb ära peita.

.hide{
    overflow: hidden;
    height: 0;
}

Edasi kasutame juba õpitud ülemineku animatsiooni. Kõigepealt lisame parameetrid, mida soovime animeerida. Seejärel aktiveerime selle, kui keegi klikib lingile ning lisame atribuudi  height pedetud osale.

.hide{
    overflow: hidden;
    height: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

#link1:target + .hide{
    height: 160px;
}

#link2:target + .hide{
    height: 160px;
}

#link3:target + .hide{
    height: 160px;
}

Edasi saame kujundada juba selliseks nagu tahame.

html{
    background-color: #34495e;
    width: 100%;
}

h1{ color: #f1c40f; }

a{ text-decoration: none; }

#content{
    width: 60%;
    margin: auto;
}

/* AKORDION MENÜÜ */

.akordion{
    list-style-type: none;
    padding: 0;
}

.akordion li{
    background-color: #e74c3c;
    border: 1px solid #f1c40f;
    border-bottom: none;
    position: relative;
}

.akordion li:last-child{
    border-bottom: 1px solid #f1c40f;
}

.akordion li a h2{
    margin: 0;
    padding: 10px;
}

.akordion li a{
    margin: 0;
    color: #34495e;
    font-size: 14px;
    text-decoration: none;
}

.hide p{
    color: #777;
    font-size: 14px;
    margin: 10px;
}


.hide{
    background-color: #eee;
    overflow: hidden;
    height: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

#link1:target + .hide{
    height: 160px;
}

#link2:target + .hide{
    height: 160px;
}

#link3:target + .hide{
    height: 160px;
}

Oma eesmärgi saime täidetud ja tekitasime animeeritud akordion tüüpi menüü kasutades ainult CSS’i. Vaikimisi on sisu meil alati peidetud ja avaneb kui lingile vajutada. Kui soovid mitu korraga avada, siis peaksid valima checkbox tüüpi HTML märgendid. Hetkel muutisme kasti sisu 160px kõrgeks nö “käsitsi”. Kui sisu on rohkem või vähem, siis tuleb seda jälle vastavalt muuta. Selle parendamiseks ja järgmise probleemi lahendamiseks, tuleb kasutada Javascripti (jQuery). Järgmise probleemi all mõtlesin seda, et kui samal lehel on rohkem sisu, siis meie näidatud tehnika hakkab lehte üles kerima.Aga antud näide on kõige lihtsam võimalus.

 

Viimased postitused

Meist

metshein.com on pakkunud juba üle kümne aasta tasuta eestikeelseid infotehnoloogiaga seotud kursusi. Sama kurssi püütakse järgida ka edaspidi. Eesmärk muuta arvutiõpe võimalikult lihtsaks!

metshein.com: parim eestikeelne koolitusportaal

Autorist ja kontakt: kliki siia

Kontrolli tunnistust

Tööribale