Home » , » Menu Dropdown Dengan Efek Fading

Menu Dropdown Dengan Efek Fading

Written By Unknown on Rabu, 22 Januari 2014 | 09.46

menu,css,fading,dropdown

Salah satu menu navigasi yang cukup populer pada saat ini adalah menu dropdown. Menu dropdown memiliki beberapa kelebihan yang tidak dimiliki oleh menu horizontal biasa. Salah satu kelebihannya adalah dapat memuat banyak link dengan tempat yang relatif kecil.

Pada pembahasan kali ini saya akan menjelaskan cara membuat menu dropdown dengan efek fading (memudar) murni menggunakan css3. Trik yang digunakan kali ini adalah dengan mengganti value property opacity dari 0 menjadi 1 dan untuk efek fadingnya digunakan property transition. Ok, langsung saja berikut ini kodenya.

Pertama buat terlebih dahulu kode HTML-nya. Disini untuk navigasinya digunakan tag HTML5 baru yaitu <nav>. Dan tag baru ini tidak disupport oleh browser-browser lawas. Oleh karena itu, jika browser anda tidak menyupport HTML5 anda bisa mengganti tag <nav> nya menjadi <div> beserta file cssnya (nav menjadi div).

index.html



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Menu Dropdown Dengan Efek Fading</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySql</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySql</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Kembali ke artikel</a></li>
</ul>
</nav>
<a href="#">
<div id="kembali">
<div id="icon"><</div>
</div>
</a>
</body>
</html>


Setelah htmlnya selesai, sekarang kita lanjutkan dengan css.
Pertama, buat semua margin dan padding menjadi 0. Hal ini dilakukan untuk mempermudah mengatur jarak antar elemen pada tahap selanjutnya.

* {
margin:0;
padding:0;
}


Tahap selanjuatnya adalah menghilangkan garis bawah pada elemen a (link) menggunakan text-decoration:none; dan  sekaligus memberi warna dengan color:white;.

a {
text-decoration:none;
font-size:20px;
color:white;
}


apakah linknya tidak terlihat? jika ya, ini dikarenakan warna backgroundnya sama dengan warna foreground. Ok, sekarang saatnya membuat tempat untuk menu utama, dengan warna yang berlawanan dengan warna putih, yaitu biru.

nav {
width:700px;
height:50px;
background:#00bfff;
margin:auto;
margin-top:50px;
border-radius:10px;
}


Setelah tempatnya terbuat, sekarang waktunya untuk menempatkan menunya di tempat yang telah tersedia, Gunakan property float:left untuk merubah menunya dari vertikal ke horizontal.

nav li {
list-style:none;
float:left;
margin:6px;
padding:6px;
}
koq menunya tinggal dua, padahal tadi ada banyak, siapa yang mencuri menunya? coba miringkan layar komputer anda ke atas. Bukankah tidak ada seorangpun yang mencuri menunya?
hanya saja list-nya tidak berurutan, untuk membuat listnya-nya dapat berurutan kita harus membuat tempat untuk li ul-nya.

nav li ul {

width:150px;
margin-top:17px;
border-radius:10px;
position:absolute;
background:#adff2f;
}


bukankah sekarang menunya sudah mulai terlihat, tetapi masih ada satu masalah, yaitu ul yang satu masih bertabrakan dengan ul yang lain.
solusinya adalah dengan menyembunyikan menunya melalui visibility:hidden; dan hanya memunculkannya saat kursor berada di atas li.
pada tahap ini juga kita akan memberi menunya dengan efek fading, gunakan property transition:2s;, 2s disini adalah waktu yang dihabiskan menunya untuk memudar, yaitu 2 detik.

nav li ul {
width:150px;
margin-top:17px;
border-radius:10px;
position:absolute;
background:#adff2f;
visibility:hidden;
opacity:0;
transition:2s;
}

nav li:hover ul{
visibility:visible;
opacity:1;
}


Langkah terakhir adalah mengurutkan menunya agar sejajar.

nav li ul li {
margin:0 20px;
padding:5px 0 5px 3px;
}
berikut ini kode lengkap untuk cssnya.

style.css

* {
margin:0;
padding:0;
}

body {
background:#f0fff0;
}

header {
height:60px;
background:#2f4f4f;
color:white;
}

header h1 {
text-align:center;
padding-top:5px;
}

a {
text-decoration:none;
font-size:20px;
color:white;
}

nav {
width:700px;
height:50px;
background:#00bfff;
margin:auto;
margin-top:50px;
border-radius:10px;
}

nav li {
list-style:none;
float:left;
margin:6px;
padding:6px;
}

nav li ul {
width:150px;
margin-top:15px;
border-radius:10px;
position:absolute;
visibility:hidden;
opacity:0;
background:#adff2f;
transition:2s;
}

nav li ul li {
margin:0 20px;
padding:5px 0 5px 3px;
}

nav li:hover ul{
visibility:visible;
opacity:1;
}

#kembali {
width:60px;
height:60px;
position:fixed;
right:10px;
bottom:10px;
border-radius:30px;
background:#2f4f4f;
}

#kembali:hover {
background:#7cfc00;
}

#kembali:hover #icon{
color:#4b0082;
}

#icon {
color:#7cfc00;
font-size:50px;
margin-left:10px;
}

Kesimpulan

seperti yang telah saya sebutkan di atas, trik yang digunakan untuk membuat menu ini adalah dengan menggunakan property visibility:hidden dan opacity:0;.
visibility:hidden; digunakan untuk memunculkan dan menghilangkan menunya, sedangkan opacity digunakan untuk membuat menunya dapat memudar, property transition:2s; digunakan untuk membuat menunya memudar.

menu dropdown ini masih memiliki beberapa kelemahan, seperti tidak dapat memuat warna yang berbeda saat suat li di hover. dan ini adalah tugas anda untuk memperbaikinya.

1 komentar:

  1. menu yang cukup menarik, tapi mengapa ya menunya tidak bisa berjalan di browser IE8?

    BalasHapus