Cara Buat Animated CSS3 Multilevel Drop Down Menu

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

1. Login to BloGGeR (Login ke Blogger), dengan menggunakan User Name/Nama Pengguna atau Email Address serta Password.
2. Setelah masuk ke Dasbor, KLIK link "Design (Rancangan)".
3. 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.
   Tutorial Cara Menambah Elemen Baru di bagian Header Blog
4. Beberapa saat setelah KLIK "Add Gadget (Tambah Gadget)", maka akan ada beberapa pilihan penambahan widget yang tersedia.
5. KLIK HTML/Javascript, kemudian simpan seluruh kode (CSS dan HTML) di box yang tersedia.
6. KLIKSAVE/Simpan dan buka hasilnya dengan membuka blog.
7. 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> 
8. Cobalah membuka menu ini di opera atau di Safari dan Google Chrome untuk melihat tampilan menu dengan bentuk animasinya.

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «