Cara Menciptakan Vertical Mega Sajian Multi Level Di Blog
cara menciptakan jquery vertical accordion sajian multi level Cara Membuat Sidebar Vertical Mega Menu Multi Level Di Blog Dengan jQuery , ...
https://tutorialcarapintar.blogspot.com/2019/02/cara-menciptakan-vertical-mega-sajian.html?hl=in
cara menciptakan jquery vertical accordion sajian multi level
Cara Membuat Sidebar Vertical Mega Menu Multi Level Di Blog Dengan jQuery, tutorial kali ini kita akan menciptakan sebuah sajian navigation yang mempunyai banyak link untuk di tampilkan dengan label tertentu [ Multi-Level Drop-Down Menu ], biasanya sering di gunakan pada blog / website yang mempunyai banyak kategori menyerupai situs filem, game, tutorial, gado-gado dll....Pada tutorial cara menciptakan vertical mega menu ini kita dapat menentukan 4 tampilan, ada vertical mega sajian left, vertical mega sajian right, vertical mega sajian dengan effect animasi saat di buka sub menunya
Sebelumnya aku juga sudah sering menciptakan postingan perihal Mega Menu Navigation di blogger, ada yang di sertai dengan gambar yang di ambil pada label, ada yang text doang. liat saja di artikel berikut...
Tutorial Blogger Lainnya :
Nah pada tutorial kali ini kita menciptakan mega sajian dengan 4 style dan hanya menampilkan link url tanpa disertai dengan gambar...
Jquery Sidebar Mega Menu Navigation Drop Down
- Login Ke blogger.com
- Terus ke Template, Edit HTML, Cari Kode </body>
- Lalu masukan isyarat berikut diatasnya..
<script type="text/javascript" src="https://googledrive.com/host/0B_1DArceSF8qQkhvMkdmblU1cTg/jquery.plugins.js"></script> <script type='text/javascript' src='https://googledrive.com/host/0B_1DArceSF8qQkhvMkdmblU1cTg/jquery.dcverticalmegamenu.1.2.js'></script> - Masih di edit html, kini kita cari isyarat ini </head>, kemudian masukan isyarat berikut di atasnya...
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B_1DArceSF8qQkhvMkdmblU1cTg/megamenu.css"/> <script type="text/javascript"> $(document).ready(function($){ $('#mega-1').dcVerticalMegaMenu({ rowItems: '3', speed: 'fast', effect: 'show', direction: 'right' }); $('#mega-2').dcVerticalMegaMenu({ rowItems: '3', speed: 'slow', effect: 'fade', direction: 'left' }); $('#mega-3').dcVerticalMegaMenu({ rowItems: '4', speed: 'slow', effect: 'slide', direction: 'right' }); $('#mega-4').dcVerticalMegaMenu({ rowItems: '3', speed: 'fast', effect: 'slide', direction: 'left' }); }); </script> - Sekarang tinggal memasukan HTMLnya, Bisa di EDIT Html / Di Tataletak Tambahkan Gadget / Widget
- Kita coba pasang di EDIT Html aja biar sekalian... Cari Kode <body> kemudian copy dan masukan isyarat dibawah ini sempurna di atasnya
- Silahkan Pilih salah satu dari 4 style ini, semuanya juga boleh :v
Mega Menu Navigation Left
Contoh Code Mega Menu Navigation
Example Code Mega Menu Navigation
<div class="demo-container"> <div class="test"> <ul id="mega-1" class="mega-menu right"> <li class="dc-mega-li"><a class="dc-mega" href="#">Menu Item A<span class="dc-mega-icon"></span></a> <div style="height: 346px; margin-top: -56px; z-index: 1000; width: 480px; display: none; left: 209px;" class="sub-container mega"> <ul class="sub"> <div style="width: 480px;" class="row first"> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 1</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> </div><div style="width: 480px;" class="row last"> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 2</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> </div> </ul> </div> </li> <li class="dc-mega-li"><a class="dc-mega" href="#">Menu Item B<span class="dc-mega-icon"></span></a> <div style="height: 137px; margin-top: -42px; z-index: 1000; width: 480px; display: none;" class="sub-container mega"> <ul class="sub"> <div style="width: 480px;" class="row last first"> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 1</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 2</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> <li class="mega-unit mega-hdr last"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 3</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> </div> </ul> </div> </li> <li class="dc-mega-li"><a class="dc-mega" href="#">Menu Item D<span class="dc-mega-icon"></span></a> <div style="height: 425px; margin-top: -147px; z-index: 1000; width: 480px; display: none; left: 209px;" class="sub-container mega"> <ul class="sub"> <div style="width: 480px;" class="row first"> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 1</a> <p></p> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 2</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> <li class="mega-unit mega-hdr last"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 3</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> </div> <div style="width: 480px;" class="row last"> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 4</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 5</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> <li class="mega-unit mega-hdr last"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 6</a> <ul> <li><a href="#">Menu Link</a></li> </ul> </li> </div> </ul> </div> </li> </ul> </div> </div> Full Code Mega Menu Navigation
Mega Menu Navigation Right
Jika sub menunya tidak tampil, silahkan masukan isyarat berikut di atas </head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> - Done, tinggal save...
Cukup sekian dan terima kasih, semoga artikel perihal cara menciptakan mega sajian navigation vertical ini bermanfaat.
Jangan lupa apabila ada yang tidak di pahami dalam penulisannya silahkan bertanya di kolom komentar :)
mega sajian vertical css
vertical mega sajian wordpress
vertical mega sajian bootstrap
vertical mega sajian jquery
vertical mega sajian css3
left side mega menu
- Kalo sudah, tinggal di publikasikan dan final deh...
Cukup sekian dan terima kasih sudah membaca artikel dari blog mas tamvan perihal cara menciptakan tabel responsive di postingan blog ini semoga bermanfaat..
Apa kalau ada yang tidak di mengerti silahkan bertanya di kolom komentar...
