Cara membuat dropdown menu responsive di blog

Cara membuat dropdown menu responsive di blog - hello sobat, tutorial ini melanjutkan, tentang cara membuat template blog yang telah saya buat, dan kali ini anda akan mempelajari tutorial bagaimana membuat atau memasang dropdown menu blog yang simple, responsive dan keren.

langsung saja berikut tutorialnya tentang cara - cara membuat atau memasang dropdown menu di blog.

Cara membuat dropdown menu responsive di blog

membuat dropdown menu di blog.

1. tahapan awal, copy kode CSS dibawah ini, dan letakin tepat di atas penutup </style>.
/*----------MENUU DROP-DOWN by masidyn.com -------*/
nav {display: block;margin: 0 25px;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: 10px 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) {
}

2. kedua terapin kode htmlnya, letakin tepat di bawah penutup </header>.
<div class='clear'/>
 <nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>    
   <ul class='menu'>
   <li><a class='homer' href='/'><i class='fa fa-home'/> HOME</a>
   </li>
  <li><a href='url'><i class='fa fa-user'/> ABOUT</a></li>
  <li><a href='#'><i class='fa fa-camera'/> PORTFOLIO</a>
  <ul class='sub-menu'>
   <li><a href='url'>Sub-Menu 1</a></li>
   <li><a href='url'>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'/> BLOG</a></li>
    <li><a href='#'><i class='fa fa-tags'/> CATEGORIES</a></li>
  <li><a href='#'><i class='fa fa-envelope'/> CONTACT</a></li>
  <li><a href='#'><i class='fa fa-sitemap'/> SITEMAP</a></li>
  <li><a href='#'><i class='fa fa-exclamation-triangle'/> DISCLAIMER</a></li>
</ul>
  </nav> 
 <div class='clear'/>
ket :- pada menu dropdown diatas tanda # , dapat diganti dengan ini "url blog/search/label/nama kategori?&amp;max-results=5"
- url blog = url / alamat blog anda
- nama kategori = kategori/label blog anda
- result=5 artinya akan menampilkan 5 posting, kalian dapat mengganti angkanya, sesuai kebutuhan.
3. terapin Javascript kode, letakin tepat di atas penutup </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>
sampai disini untuk cara memasang atau membuat dropdown menu telah selesai, dan ini sangat simple, untuk melakukan setting selanjutnya kalian dapat mengatur dan merubah sendiri, seperti hover menu, warna, penambahan url, maupun penambahan kategori menu.

sesuaikan saja dengan kebutuhan blog anda, atau sesuai template yang anda buat sendiri. Ok sobat, itulah tutorial kali ini semoga bermanfaat, dan jangan lupa baca artikel menarik saya yang lainnya, thanks.

6 komentar

cara buat seperti tanda masidyn.com dan simbol lainnya itu bagaimana ya

Tanda yang mana ya ? Klo simbol/icon itu font awesome, cek tutorialnya di kategori artikel blogger saya.

Kok ngg bisa di klik menunya ? Pdhal ngg ada yg saya rubah um.

udah diterapin gk gan , javascriptnya ?

Klo untuk membuat hamburger menu onclick punya guidenya ngg um? Setiap pasang navigasi selalu terkendala java script padahal udh sy pasang. Soalnya saya buat template nya dari 0 um. Mohon bantuannya

Coba di update / di ganti media querriesnya dengan yang baru, baca disini http://www.masidyn.com/2016/09/mengatasi-widget-htmljavascript-tidak-tampil.html

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon