Membuat Menu Drop Down Animasi CSS3 di Blog

Gusti Ardias Riantono    Mei 26, 2013    CSS , Tutorial    2 comments   

Membuat Menu Drop Down Animasi CSS3 di Blog - Banyak cara dalam mempercantik sebuah blog, dengan memilih template blog yang sesuai, memasang widget blog, memodifikasi CSS blog dan salah satunya yang akan saya bahas kali ini adalah menu drop down untuk blog. Di dunia internet sudah banyak yang membahas tentang menu drop down. Bahkan banyak macamnya, mulai yang sederhana sampai yang elegant.

Sebenarnya menu drop down yang akan saya bahas kali ini bukan buatan saya sendiri. Maklum saya bukan blogger profesional, saya di sini baru belajar bisa di katakan blogger pemula. Oke lanjut saja, Menu drop down ini menggunakan CSS3. Tutorial ini saya dapat dari www.mybloggerlab.com. Jika mau lihat demonya bisa kunjungi blog ini.

Langsung saja Tutorial Cara Membuat Menu Drop Down Animasi CSS3:

1. Masuk ke blogger.com

2. Pilih Layout >> add gadget atau Tambah gadget (terserah dimana kamu ingin meletakkan menunya)

3. Kemudian pilih HTML/JavaScript

4. Copy sccript di bawah ini dan pastekan di kotak HTML/JavaScript yang kamu pilih tadi

<!--Start Animated CSS3 Multi Drop Down Menu For Blogger--> <link rel="stylesheet" type="text/css" href="https://gustiardias14.com/menuheaderardias.css"/> <nav id="mbl-menu-wrap"> <ul id="mbl-menu"><li><a href="URL-Here">Home</a></li> <li> <a href="URL-Here">Categories</a> <ul><li> <a href="URL-Here">CSS</a> <ul><li><a href="URL-Here">Item 11</a></li> <li><a href="URL-Here">Item 12</a></li> <li><a href="URL-Here">Item 13</a></li> <li><a href="URL-Here">Item 14</a></li> </ul></li> <li> <a href="URL-Here">Graphic design</a> <ul><li><a href="URL-Here">Item 21</a></li> <li><a href="URL-Here">Item 22</a></li> <li><a href="URL-Here">Item 23</a></li> <li><a href="URL-Here">Item 24</a></li> </ul></li> <li> <a href="URL-Here">Development tools</a> <ul><li><a href="URL-Here">Item 31</a></li> <li><a href="URL-Here">Item 32</a></li> <li><a href="URL-Here">Item 33</a></li> <li><a href="URL-Here">Item 34</a></li> </ul></li> <li> <a href="URL-Here">Web design</a> <ul><li><a href="URL-Here">Item 41</a></li> <li><a href="URL-Here">Item 42</a></li> <li><a href="URL-Here">Item 43</a></li> <li><a href="URL-Here">Item 44</a></li> </ul></li> </ul></li> <li> <a href="URL-Here">Work</a> <ul><li><a href="URL-Here">Work1</a></li> <li><a href="URL-Here">Work2</a></li> <li><a href="URL-Here">Work3</a></li> <li><a href="URL-Here">Work4</a></li> </ul></li> <li><a href="URL-Here">About</a></li> <li><a href="URL-Here">Contact</a></li> </ul></nav> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('li').has('ul').mouseover(function(){ $(this).children('ul').css('visibility','visible'); }).mouseout(function(){ $(this).children('ul').css('visibility','hidden'); }) } /* Mobile */ $('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger"> mbl-Menu</div>'); $("#mbl-menu-trigger").on("click", function(){ $("#menu").slideToggle(); }); // iPad var isiPad = navigator.userAgent.match(/iPad/i) != null; if (isiPad) $('#mbl-menu ul').addClass('no-transition'); }); </script>

 Pengaturan:

• Ganti tulisan URL-Here dengan url yang kamu inginkan
• Tulisan yang berwarna Biru ganti dengan nama sesuai label atau url yang di tuju

5. Jika sudah selesai klik save atau simpan

Tutorial Menu drop drown diatas sangat simple, karena kamu tidak perlu melakukan edit HTML dan mengeditnya pun juga mudah tidak usah repot-reepot lagi melakukan dari edit HTML. Sekian dulu tutorial membuat Membuat Menu Drop Down Animasi CSS3 di Blog, semoga tutorial ini dapat bermanfaat untuk sobat blogger semuanya. Terima kasih