Cara Membuat Menu Dropdown Multilevel Responsive di Blogger

Menu navigasi pada sebuah website atau blog merupakan hal yang peting dan wajib ada, ini bertujuan agar pengunjung situs lebih mudah menavigasi situs Anda.

Ada satu alasan yang saya ingat ketika daftar AdSense kemudian di tolak dengan alasan"Navigasi Situs Sulit", ini menunjukan bahwa membuat menu navigasi di blog atau website harus dengan jelas dan mudah di pahami.

Saya yakin bahwa menggunakan menu navigasi yang responsive menjadi pilihan terbaik untuk mengatasi penolakan adsense tersebut.

Balik lagi, kita bahas mengenai menu navigasi.

Sebenarnya ada banyak bentuk navigasi yang bisa Anda gunakan, ada yang berbentuk vertikal biasanya di tempatkan di bagian kiri, ada juga berbentuk horizontal biasanya di tempatkan di bagian header atau bagian teratas dari sebuah blog atau website.

Kebanyakan orang menggunakan menu navigasi horizontal.

Menu navigasi memiliki fitur masing-masing ada yang flat atau datar tanpa memiliki sub menu, ada juga yang memiliki dropdown bahkan multi dropdown.

Di sini saya akan menjelaskan cara membuat menu navigasi dorpdown multilevel responsive.

Lengkap banget pokoknya.

Menu dropdown multilevel responsive ini menggunakan font awesome sehingga terlihat lebih keren ada gambar atau icon di samping tulisannya.

Tapi jika Anda tidak ingin menampilkan gambar atau icon yang berada di samping kiri tulisannya bisa dengan menghapus kodenya di bagian html atau tidak perlu menggunakan file css bundle font awesome.

Jika Anda tertarik untuk membuat menu navigasi dropdown multilevel responsive di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Menu Dropdown Multilevel Responsive di Blogger

Cara Membuat Menu Dropdown Multilevel Responsive di Blog

Untuk berjaga-jaga lebih baik template blog Anda di back-up terlebih dahulu, silahkan baca artikel mengenai cara backup template blog.

Jika blog Anda sebelumnya sudah memiliki menu navigasi alangkah lebih baiknya jika kode cssnya di hapus terlebih dahulu untuk menghindari tampilan menu yang berantakan karena kode css lama bentrok atau bertubrukan dengan kode css baru.

Silahkan lihat demonya terlebih dahulu di bawah ini sebelum membuat menu navigasi di blog Anda.


Pertama, tambahkan kode CSS ini kedalam template blog Anda, simpan di atas kode ]]></b:skin> atau </style>
nav {
    display: block;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #ff3c41;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #ff3c41;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #ff3c41;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #ff3c41;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}
Kedua, silahkan masukkan kode HTML menu navigasi di bawah ini. Letaknya bisa Anda sesuaikan sendiri, biasanya diletakan di dalam bagian header atau Anda bisa mencoba menyimpannya sebelu kode </header>
<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav>
Ketiga, tambahkan kode jQuery di bawah ini dan letakan sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
//]]>
</script>
Keempat, jika Anda ingin menggunakan font awesome agar muncul gambar atau icon di samping tulisan menu navigasi silahkan tambahkan kode bundle css ini dan letakan sebelum kode <b:skin>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Kemudian silahkan simpan template blog Anda dan lihat hasilnya.

Itulah artikel mengenai cara membuat menu dropdown multilevel responsive di blogger, semoga bermanfaat.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

6 Komentar untuk "Cara Membuat Menu Dropdown Multilevel Responsive di Blogger"

  1. Assalamualaikum..kalo mau sub menu yang hanya apa harus save lagi kek awal lagi

    BalasHapus
  2. gan kalau di tampilan handphone agar menunya pas di layar, yang harus di atur cssnya apa ya ? terima kasih

    BalasHapus
    Balasan
    1. Halo,

      Untuk tampilan mobile silahkan fokus ke bagian kode berikut:


      @media (max-width: 480px) {
      }

      @media (max-width: 320px) {
      }


      atau bisa menyesuaikan lebar smartphone yang paling umum digunakan.

      Hapus
    2. kalau diganti auto tidak bisa ya gan ? soalnya smartphone orang khan beda2 lebarnya..

      Hapus
    3. itu kode di atas masing-masing punya fungsinya mas, misalnya kalo hp dengan lebar 320px maka kode yang 480px tidak akan bekerja, silahkan bisa di setting sesuai keinginan atau bisa ambil contoh dari lebar 768px pada kode css di atas.

      Hapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel