Follow Me

Cara Membuat Vertical Mega Menu Multi Level Di Blog

M.Alif
يوليو 19, 2018

  • 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...
M.Alif

M.Alif

If you spend time trying to be good at everything, you will never be great at anything

Next Post Previous Post
No Comment
Add Comment
comment url