Cara Membuat Vertical Mega Menu Multi Level Di Blog

Cara Membuat Vertical Mega Menu Multi Level Di Blog

cara membuat jquery vertical accordion menu multi level

Cara Membuat Sidebar Vertical Mega Menu Multi Level Di Blog Dengan jQuery, tutorial kali ini kita akan membuat sebuah menu navigation yang memiliki banyak link untuk di tampilkan dengan label tertentu [ Multi-Level Drop-Down Menu ], biasanya sering di gunakan pada blog / website yang memiliki banyak kategori seperti situs filem, game, tutorial, gado-gado dll....

Pada tutorial cara membuat vertical mega menu ini kita bisa memilih 4 tampilan, ada vertical mega menu left, vertical mega menu right, vertical mega menu dengan effect animasi ketika di buka sub menunya

Sebelumnya saya juga sudah sering membuat postingan tentang 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 membuat mega menu dengan 4 style dan hanya menampilkan link url tanpa disertai dengan gambar...

Jquery Sidebar Mega Menu Navigation Drop Down


Demo Mega Menu Navigation

  • 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 </head>, lalu masukan kode 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> lalu copy dan masukan kode dibawah ini tepat di atasnya
  • Silahkan Pilih salah satu dari 4 style ini, semuanya juga boleh :v

  • Mega Menu Navigation Left


    • Cara Membuat Vertical Mega Menu Multi Level Di Blog

    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



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

Cukup sekian dan terima kasih, semoga artikel tentang cara membuat mega menu navigation vertical ini bermanfaat.
Jangan lupa apabila ada yang tidak di pahami dalam penulisannya silahkan bertanya di kolom komentar :)

mega menu vertical css

vertical mega menu wordpress

vertical mega menu bootstrap

vertical mega menu jquery

vertical mega menu css3

left side mega menu

  • Kalo sudah, tinggal di publikasikan dan selesai deh...

Cukup sekian dan terima kasih sudah membaca artikel dari blog mas tamvan tentang cara membuat tabel responsive di postingan blog ini semoga bermanfaat..
Apa bila ada yang tidak di mengerti silahkan bertanya di kolom komentar...
1 komentar: