Home Trik Blogger Cara Mudah Membuat Menu Multi Dropdown Di Blog Keren

11:23 AM
A+ A- Print Email
Salam blogger, kali ini saya akan membahas tentang membuat menu dropdown dengan jelas dan simpel, apabila anda mendengar tentang menu dropdown pasti sudah terekam dalam pikiran anda, ini pasti menu yang biasa di gunakan didalam blogger. Bahkan tidak jarang para bloggin menggunakan menu tersebut, menurut anda apa gunanya menu tersebut? kalau menurut pandangan saya menu bisa membuat blog kita menarik, simpel, bahkan dapat memberikan kemudahan bagi pengunjung untuk mencari atau menggali informasi, sehingga pengunjung dengan mudah menemukan pembahasan yang dicarinya. 

Kita kembali pada topik kita semula Cara mudah membuat menu dropdown di blog keren. Mengapa kita membahas topik ini, karena menu dropdown sangat dibutuhkan oleh blog-blog yang memiliki banyak kategori, sehingga pengunjung tidak menjadi bingung. contoh gambar.
Cara Mudah Membuat Menu Multi Dropdown Di Blog Keren

Bagaimana cara menerapkannya ke dalam blog anda? silahkan anda simak caranya sebagai berikut:
1. langkah pertama yang harus anda lakukan masuk ke akun blogger
2. pilih tenplate dan klik edit templat 
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>
nav {
    display: block;
    margin-top: 100px;
    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: #9ca3da;
}
.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: #9ca3da;
    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: #9ca3da;
}
@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: #9ca3da;
        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) {
}
4. Setelah itu letakkan kode html di bawah ini tepat di bawah 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>

Catatan: 

Di dalam kode di atsa ini ada sedikit yang perlu anda edit, yaitu ganti tanda # dengan situs anda, supaya dapat menampilkan menu blog anda dan ubah tulisan yang saya beri warna biru seuai dengan tema setiap situs anda.

 5, langkah terakhir letakkan kode dibawah ini tepat di atas 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>
Langkah demi langkah sudah anda lakukan kemudian klik simpan dan lihat hasilnya menu dropdown anda sudah siap.
Labels:

Post a Comment

Subscribe to: Post Comments (Atom)

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.