CSS3 animatsioonid – Rippmenüü

Aga aretame teemat natuke edasi ja koostame CSS abil horisontaalse menüü, kus mõni link avaneb rippmenüüna. Tekitame kõigepealt html’is struktuuri:

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS animatsioonid</title>
    <link rel="stylesheet" href="04.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
<div id="main">
	<div id="content">
       <nav class="menu">
            <ul>
                <li><a href="#">Avaleht</a></li>
                <li><a href="#">Tooted</a></li>
                <li><a href="#">Portfoolio</a>
                    <ul class="dropdown">
                        <li><a href="#">Kodulehed</a></li>
                        <li><a href="#">SEO</a></li>
                        <li><a href="#">Graafiline disain</a></li>
                    </ul>
                </li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>

Ja paneme paika üldise kujunduse:

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

h1{ color: #f1c40f; }

a{ text-decoration: none; }

#content{
    width: 648px;
    margin: auto;
}

Ega midagi näha pole. Muudame kõigepealt kogu menüü nähtavaks:

.menu, .menu ul{
    line-height: 1;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menu{
    display: block;
    position: relative;
    height: 47px;
    width: 100%;
    background: #fff;
    top: 10px;
}

Edasi lükkame menüü elemendid horisontaalseks ja peidame alammenüü korraks ära:

.menu ul>li {
  display: block;
  position: relative;
  float: left;
}

.dropdown{
  display: none;
}

Paigutame menüüd kenasti laiali ja lisame juba ülemineku animatsiooni:

.menu li>a{
    display: block;
    color: #000;
    padding: 16px;
    width: 130px;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    
    transition: all 0.5s ease;
}

Ja et animatsioon toimiks, siis muudame lingid aktiivseks:

.menu li:hover>a{
  background: #555;
  color: #fff;
}

Nüüd kui hiirega üle menüü liikuda peaks muutuba lingi taust ja teksti värv:

Toome alammenüü peidust välja, kui hiirega üle vastava lingi minna:

.dropdown{
    /*  display: none;*/
    display: block;
    position: absolute;
    opacity: 0;
    background: #ccc;

    transition: all 0.3s ease;
}

.menu li:hover>ul{
    top: 47px;
    left: 0;
    opacity: 1;
}

Valmis!

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