Cara Membuat Vertical Mega Menu Multi Level Di Blog - THEBOEGIS

Friday, July 20, 2018

Cara Membuat Vertical Mega Menu Multi Level Di Blog




  • Login Ke blogger.com
  • Terus ke Template, Edit HTML, Cari Kode </body>
  • Lalu masukan kode 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, sekarang kita cari kode ini <body> lalu copy dan masukan kode dibawah ini tepat 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> lalu copy dan masukan kode dibawah ini tepat di atasnya

<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>

Silahkan ganti tulisan Menu Link dengan Text / judul menu kalian. Ganti juga tanda # pagar dengan url / link kalian...
Jika sub menunya tidak tampil, silahkan masukan kode 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...

Share this article

Related Post

Please write your comments