Cara Membuat Smooth Accordion Dropdown Menu
Cara Membuat Smooth Accordion Dropdown Menu. Menu merupakan suatu hal yang penting dalam suatu blog. Tanpa adanya menu, para visitor akan kebingungan dalam menjelajahi blog kita. Seperti halnya jalan raya tanpa rambu-rambu penunjuk jalan, maka dapat dipastikan para pengguna akan kebingungan arah tujuan mereka.
Dibawah ini akan saya coba men-share-kan tutorial Cara Membuat Smooth Accordion Dropdown Menu yang pastinya akan membuat blog anda keliatan indah dan pastinya terlihat canggih. Karena di plugin ini efek yang ditimbulkan sangat halus seperti pipinya Luna Maya. Hahahhahaha.. JK
Smooth Accordion ini dibuat oleh fainder, anda bisa menelusurinya dengan mengunjungi link berikut. Dan yang paling saya suka adalah efek yang digunakan tidak begitu memberatkan blog, hanya menggunakan CSS dan JS ringan, sehingga kita bisa menambah nilai lebih blog kita dengan menggunakan Smooth Accordion ini.
Baik, tanpa menunggu lama kita akan memulai tutorial Cara Membuat Smooth Accordion Dropdown Menu. Selamat mencoba, dan semoga berhasil!!!
Cara Membuat Smooth Accordion Dropdown Menu
Langkah 1. Buka menu Tata Letak di blogger >> Tambahkan Gadget >> pilih HTML/Javascript. Buat menu anda dengan struktur HTML seperti dibawah ini kemudian SAVE<ul id="accordion" class="accordion">
<li>
<div class="link"><i class="fa fa-database"></i>Web Design<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-code"></i>Coding<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ruby</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Desktop</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Google</a></li>
<li><a href="#">Bing</a></li>
<li><a href="#">Yahoo</a></li>
</ul>
</li>
</ul>
Langkah 2. Silakan buka tempat dimana CSS anda berada, biasanya didalam <b:skin>, lalu paste kode CSS dibawah ini. Nb : Anda juga bisa memodifikasinya sesuai dengan selera.
.accordion{width:100%;max-width:360px;margin:30px auto 20px;background:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.accordion .link{cursor:pointer;display:block;padding:15px 15px 15px 42px;color:#4D4D4D;font-size:14px;font-weight:700;border-bottom:1px solid #CCC;position:relative;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.accordion li:last-child .link{border-bottom:0}
.accordion li i{position:absolute;top:16px;left:12px;font-size:18px;color:#595959;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.accordion li i.fa-chevron-down{right:12px;left:auto;font-size:16px}
.accordion li.open .link{color:#b63b4d}
.accordion li.open i{color:#b63b4d}
.accordion li.open i.fa-chevron-down{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.submenu{display:none;background:#444359;font-size:14px}
.submenu li{border-bottom:1px solid #4b4a5e}
.submenu a{display:block;text-decoration:none;color:#d9d9d9;padding:12px;padding-left:42px;-webkit-transition:all .25s ease;-o-transition:all .25s ease;transition:all .25s ease}
.submenu a:hover{background:#b63b4d;color:#FFF}
Langkah 3. Silakan paste kan javascript berikut diatas </body>
<script>
/*<![CDATA[*/
$(function(){var t=function(t,e){this.el=t||{},this.multiple=e||!1,this.el.find(".link").on("click",{el:this.el,multiple:this.multiple},this.dropdown)};t.prototype.dropdown=function(t){var e=t.data.el;$this=$(this),$next=$this.next(),$next.slideToggle(),$this.parent().toggleClass("open"),t.data.multiple||e.find(".submenu").not($next).slideUp().parent().removeClass("open")};new t($("#accordion"),!1)});
/*]]>*/
</script>
Demikian tutorial Cara Membuat Smooth Accordion Dropdown Menu, semoga bermanfaat. Terimakasih telah berkunjung ke Agung Jaka Nugraha. Wassalam
