Multilevel Drop Down Menu dengan beberapa bentuk
animasi tidak hanya dapat tercipta menggunakan javascript. Berkat
pengembangan yang terjadi pada kode CSS yang saat ini lebih dikenal
sebagai CSS3, beberapa animasi cantik layaknya menggunakan javascript
dapat kita buat. Animated CSS3 Multilevel Drop Down Menu yang coba kita
buat ini adalah salah satu contohnya.
Meskipun hingga detik ini
baru beberapa browser yang support secara penuh, seperti halnya Opera,
Safari dan Google Chrome, serta Mozilla sekalipun tidak penuh, namun
kita boleh yakin bahwa di masa ke depan, perkembangan yang terjadi pada
css3 ini menjadi sesuatu yang wajib untuk diikuti secara total oleh
browser manapun.
Satu keuntungan penggunaan kode css secara
total tentunya sangat jelas terasakan pada beban yang harus ditanggung
sebuah blog. Banyaknya posting, baik berupa teks ataupun gambar yang
disertai beberapa bentuk fungsi sebagai pelengkap blog dengan
memanfaatkan javascript, semakin lama akan terasakan bagaimana loading
blog menjadi semakin bertambah berat. Kalau hal seperti ini dibiarkan
bertumpuk dan selalu terus bertumpuk,... lama kelamaan tentunya loading
blog menjadi semakin tidak terkendalikan hingga pada suatu titik
tertentu akan kita dapatkan betapa loading blog menjadi seperti layaknya
lari seekor siput yang menderita kelumpuhan.
Membuat Multilevel
Drop Down Menu tidaklah sulit, hanya mungkin yang terasakan agak
"njelimet" ketika menyusun "urutan/bagan setiap menu-nya", dimana di
sini dibutuhkan sedikit ketelitian hingga output yang dihasilkan sesuai
dengan apa yang diharapkan. Persoalan klasik yang hampir selalu di alami
oleh setiap blogger ketika menyusun sebuah urutan/bagan sebuah menu.
Jadi pada intinya bukan sebuah kesulitan teknis, akan tetapi hanya butuh
ketelatena dan kesabaran dalam manata bagian menu saja.
| Kode CSS Multilevel Drop Down Menu |
<style type="text/css">
#bgsGR_HzMenu {
margin: -10px 0 0 0;
padding: 7px 6px 0;
background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -99px;
line-height: 100%;
border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
box-shadow: 1px 1px 15px rgba(0,0,0, .4);
-moz-box-shadow:1px 1px 15px rgba(0,0,0, .4);
-webkit-box-shadow: 1px 1px 15px rgba(0,0,0, .4);
}
#bgsGR_HzMenu:hover {
box-shadow: 1px 3px 10px rgba(0,0,0, .5);
-moz-box-shadow: 1px 1px 15px rgba(0,0,0, .5);
-webkit-box-shadow: 1px 2px 15px rgba(0,0,0, .5);
}
#bgsGR_HzMenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#bgsGR_HzMenu a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding:5px 12px;
margin:0;
border-radius:0.7em;
-moz-border-radius: 0.7em;
-webkit-border-radius: 0.7em;
text-shadow: 2px 2px 4px #000;
}
#bgsGR_HzMenu a:hover {
background:#000;
color: #fff;
}
#bgsGR_HzMenu a#satu{
transition:2s ease-in-out;
-o-transition:2s ease-in-out;
-moz-transition:2s ease-in-out;
-webkit-transition:2s ease-in-out;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
border:1px solid #444;
box shadow:0px -1px 4px #999;
background:#333 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px;
}
#bgsGR_HzMenu a#satu:hover{
transform: scale(1.3);
-o-transform: scale(1.3);
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
text-shadow:2px 3px 4px #000;
border:1px solid #fff;
}
#bgsGR_HzMenu .current a, #bgsGR_HzMenu li:hover > a {
background: blue url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
border-top: solid 1px #f8f8f8;
box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(156,156,156, 1);
}
#bgsGR_HzMenu .current a{color:#3399FF;}
#bgsGR_HzMenu li:hover > a {color:red;}
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a {
background: none;
border: none;
color: #666;
box-shadow:none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#bgsGR_HzMenu ul li:hover a, #bgsGR_HzMenu li:hover li a{
border-radius:0.1em;
-moz-border-radius: 0.1em;
-webkit-border-radius: 0.1em;
}
#bgsGR_HzMenu ul a:hover {
background: #000 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -100px !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
#bgsGR_HzMenu li:hover > ul {
display: block;
}
#bgsGR_HzMenu ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 28px;
left: 0;
background: #444 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 0;
border: solid 1px #b4b4b4;
border-radius: 10px;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 2px 13px #777;
-webkit-box-shadow: 0 2px 13px #777;
-moz-box-shadow: 0 2px 13px #777;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
#bgsGR_HzMenu ul:hover {
margin-top:10px;
transform: scale(1.1);
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
box-shadow: 0 2px 13px #000;
-webkit-box-shadow: 0 2px 13px #000;
-moz-box-shadow: 0 2px 13px #000;
}
#bgsGR_HzMenu ul li {
float: none;
margin: 0;
padding: 0;
border-radius:none;
-moz-border-radius:none;
-webkit-border-radius:none;
}
#bgsGR_HzMenu ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
border-radius: 0px;
-moz-border-radius: 0x;
-webkit-border-radius: 0px;
}
#bgsGR_HzMenu ul ul {
left: 181px;
top: -3px;
}
#bgsGR_HzMenu ul li:first-child > a {
background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -40px;
border-top-left-radius:9px;
border-top-right-radius:9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
text-shadow:0px 1px 1px #000;color:white;
}
#bgsGR_HzMenu ul li:last-child > a {
border-bottom-left-radius:9px;
border-bottom-right-radius:9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
text-shadow:0px 1px 1px #000;color :white;
}
#bgsGR_HzMenu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#bgsGR_HzMenu {
display: inline-block;
}
html[xmlns] #bgsGR_HzMenu {
display: block;
}
* html #bgsGR_HzMenu {
height: 1%;
}
</style>
|
| Kode HTML CSS3 Multilevel Drop Down Menu |
<ul id="bgsGR_HzMenu">
<li class="current"><a id="satu" href="Link-1">Nama Link-1 </a></li>
<li><a id="satu" href="Link-2">Nama Link-2</a>
<ul>
<li><a href="Link-2a">Nama Link-2a</a>
<ul>
<li><a href="Link-2a-1">Nama Link-2a-1</a></li>
<li><a href="Link-2a-2">Nama Link-2a-2</a>
<ul>
<li><a href="Link-2a-2.1">Nama Link-2a-2.1</a></li>
<li><a href="Link-2a-2.2">Nama Link-2a-2.2</a></li>
<li><a href="Link-2a-2.3">Nama Link-2a-2.3</a></li>
</ul>
</li>
<li><a href="Link-2a-3">Nama Link-2a-3</a></li>
</ul>
</li>
<li><a href="Link-2b">Nama Link-2b</a></li>
<li><a href="Link-2c">Nama Link-2c</a></li>
<li><a href="Link-2d">Nama Link-2d</a>
<ul>
<li><a href="Link-2d-1">Nama Link-2d-1</a></li>
<li><a href="Link-2d-2">Nama Link-2d-2</a></li>
<li><a href="Link-2d-3">Nama Link-2d-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a id="satu" href="Link-3">Nama Link-3</a>
<ul>
<li><a href="Link-3a">Nama Link-3a</a>
<ul>
<li><a href="Link-3a-1">Nama Link-3a-1</a></li>
<li><a href="Link-3a-2">Nama Link-3a-2</a></li>
<li><a href="Link-3a-3">Nama Link-3a-3</a></li>
<li><a href="Link-3a-4">Nama Link-3a-4</a></li>
</ul>
</li>
<li><a href="Link-3c">Nama Link-3c</a></li>
<li><a href="Link-3d">Nama Link-3d</a></li>
</ul>
</li>
<li><a id="satu" href="Link-4">Nama Link-4</a>
<ul>
<li><a href="Link-4a">Nama Link-4a</a></li>
<li><a href="Link-4b">Nama Link-4b</a></li>
</ul>
</li>
<li><a id="satu" href="Link-5">Nama Link-5</a></li>
<li><a id="satu" href="Link-5">Nama Link-6</a></li>
</ul>
|
Cara Menggunakan CSS3 Multilevel Drop Down Menu
- Login to BloGGeR (Login ke Blogger), dengan menggunakan User Name/Nama Pengguna atau Email Address serta Password.
- Setelah masuk ke Dasbor, KLIK link "Design (Rancangan)".
- KLIK
Add Gadget (Tambah Gadget) yang terdapat di "Page Elemen (Elemen Laman)
yang di tandai dengan box bergaris putus-putus. Pilihlah di atas header
atau di bawah header. Apabila elemen di bagian tersebut belum ada
(ditambahkan) silahkan KLIK link di bawah ini untuk membaca tutorial
tentang cara menambahkan elemen baru di bagian header.
- Beberapa saat setelah KLIK "Add Gadget (Tambah Gadget)", maka akan ada beberapa pilihan penambahan widget yang tersedia.
- KLIK HTML/Javascript, kemudian simpan seluruh kode (CSS dan HTML) di box yang tersedia.
- KLIKSAVE/Simpan dan buka hasilnya dengan membuka blog.
- Selain dengan cara tersebut di atas, sampeyan dapat juga menyimpan kode CSS-nya di atas kode ]]></b:skin> . Apabila hendak di simpan di sini, silahkan buang kode <style type="text/css> dan tag penutupnya </style>
- Cobalah membuka menu ini di opera atau di Safari dan Google Chrome untuk melihat tampilan menu dengan bentuk animasinya.
Selamat mencoba dan semoga bermanfaat buat anda.
silahkan anda COPAS jika artikel ini penting buat anda.
Sumber :
http://gubhugreyot.blogspot.com
0 komentar:
Posting Komentar