Advertisement
Html/Css/Jquery

Membuat Animasi Drop Down Menu dengan CSS3 Transition dan Max-Height

Mungkin membuat drop down menu dengan animasi bukanlah hal yang baru bagi teman-teman, apalagi sekarang sudah ada ajax yang lebih memudahkan kita dalam pembuatan tampilan website agar lebih dinamis. Tapi, seperti yang telah kita ketahui saat ini sudah ada yang namanya CSS3, dan hebatnya lagi CSS3 bisa kita gunakan untuk membuat animasi dengan menggunakan CSS3 Transition khususnya pada penerapan dalam drop down menu.

Tapi jika teman-teman masih ingin membuat drop down menu menggunakan jquery teman-teman bisa melihatnya disini

Agar tidak terlalu panjang lebar kita langsung saja pada pembahasannya cara membuat animasi drop down menu dengan CSS3 transition dan max-height.

Membuat Animasi Drop down menu dengan CSS3 Transition dan Max-height

Pertama buat dulu file html dengan mamasukan code berikut,

<ul id="menu">
<li><a href="http://www.pindexain.com">Menu 1</a>
<ul>
<li><a href="http://www.pindexain.com">Level 1.1</a></li>
<li><a href="http://www.pindexain.com">Level 1.2</a></li>
</ul>
</li><li><a href="http://www.pindexain.com">Menu 2</a>
<ul>
<li><a href="http://www.pindexain.com">Level 2.1</a></li>
<li><a href="http://www.pindexain.com">Level 2.2</a></li>
<li><a href="http://www.pindexain.com">Level 2.3</a></li>
<li><a href="http://www.pindexain.com">Level 2.4</a></li>
</ul>
</li><li><a href="http://www.pindexain.com">Menu 3</a>
<ul>
<li><a href="http://www.pindexain.com">Level 3.1</a></li>
<li><a href="http://www.pindexain.com">Level 3.2</a></li>
<li><a href="http://www.pindexain.com">Level 3.3</a></li>
</ul>
</li>
</ul>

Kemudian masukan code cssnya dengan membuat file css atau langsung memasukannya sebelum </head>

#menu a {
display:block;
color: #fff;
text-decoration:none;
}
/*Mengurutkan menu menjadi sejajar kesamping*/
#menu li,
#menu li li {
position: relative;
display:inline-block;
width: 110px;
padding: 6px 15px;
background: #ff2bf3;
}
#menu li li { background: transparent none; }
#menu li li a { color: #fff; }
#menu li li:hover { background:#ffa5eb; }

#menu li:hover {
background: #ffa5eb;
}
/* Animasi untuk sub drop down menu*/
#menu ul {
position: absolute;
top: 2em; left:0;
max-height:0em;
margin:0; padding:0;
background:#ff2bf3;
overflow:hidden;
transition: 0.4s ease-in-out;
}
/* Untuk memunculkan sub drop down*/
#menu li:hover ul {
max-height:13em;
}

Berikut full codenya,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Membuat Animasi Drop down menu dengan CSS3 Transition</title>
<style type="text/css">
#container {
width:600px;
margin:auto;
text-align:center;
}
#menu a {
display:block;
color: #fff;
text-decoration:none;
}
/*Mengurutkan menu menjadi sejajar kesamping*/
#menu li,
#menu li li {
position: relative;
display:inline-block;
width: 110px;
padding: 6px 15px;
background: #ff2bf3;
}
#menu li li { background: transparent none; }
#menu li li a { color: #fff; }
#menu li li:hover { background:#ffa5eb; }

#menu li:hover {
background: #ffa5eb;
}
/* Animasi untuk sub drop down menu*/
#menu ul {
position: absolute;
top: 2em; left:0;
max-height:0em;
margin:0; padding:0;
background:#ff2bf3;
overflow:hidden;
transition: 0.4s ease-in-out;
}
/* Untuk memunculkan sub drop down*/
#menu li:hover ul {
max-height:13em;
}
</style>
</head>
<body>
<div id="container">
<h1>Drop down menu dengan CSS3 Transition</h1>
<ul id="menu">
<li><a href="http://www.pindexain.com">Menu 1</a>
<ul>
<li><a href="http://www.pindexain.com">Level 1.1</a></li>
<li><a href="http://www.pindexain.com">Level 1.2</a></li>
</ul>
</li><li><a href="http://www.pindexain.com">Menu 2</a>
<ul>
<li><a href="http://www.pindexain.com">Level 2.1</a></li>
<li><a href="http://www.pindexain.com">Level 2.2</a></li>
<li><a href="http://www.pindexain.com">Level 2.3</a></li>
<li><a href="http://www.pindexain.com">Level 2.4</a></li>
</ul>
</li><li><a href="http://www.pindexain.com">Menu 3</a>
<ul>
<li><a href="http://www.pindexain.com">Level 3.1</a></li>
<li><a href="http://www.pindexain.com">Level 3.2</a></li>
<li><a href="http://www.pindexain.com">Level 3.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Demo Download

Editorial Team

Editorial Team adalah mereka yang menulis artikel untuk blog PinDexain.

Related Stories

Leave a Reply

Your email address will not be published. Required fields are marked *