Cara Membuat Menu Dropdown Responsive

Gooblogi.com. kali ini saya akan pos tentang Cara Membuat Menu Dropdown Responsive sebenarnya cara ini sudah kuno, tapi sangat dibutuhkan oleh sebuah blog, selain dapat mempercantik tata letak blog dan juga dapat mempermudah bagi pengunjung untuk mencari informasi dengan cepat hanya dengan melihat atau mengklik menu yang ada di menu dropdown tersebut. Bisa saya contohkan seperti pada gambar di bawah ini:

Gambar di atas sebagai contoh bentuk menu dropdownnya seperti itu yang saya kasih tanda panah tentunya sudah pada tahu, sekarang mari kita tinjau ke pada caranya memasang.

Cara Membuat Menu Dropdown Responsive

1. buka akun blog sobat

2. lalu sobat pilih template lalu "edit html"

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. selanjutnya sobat letakkan kode berikut di atas 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="url blog">Sub-Menu 1</a></li>

   <li><a href="url blog">Sub-Menu 2</a></li>

   <li><a href="url blog">Sub-Menu 3</a></li>

   <li><a href="url blog">Sub-Menu 4</a></li>

   <li><a href="url blog">Sub-Menu 5</a></li>   

   </ul>

   </li>

  <li><a  href="url blog"><i class="fa fa-user"></i> ABOUT</a></li>

  <li><a  href="url blog"><i class="fa fa-camera"></i> PORTFOLIO</a>

  <ul class="sub-menu">

   <li><a href="url blog">Sub-Menu 1</a></li>

   <li><a href="url blog">Sub-Menu 2</a>

    <ul>

    <li><a href="url blog">Sub Sub-Menu 1</a></li>

    <li><a href="url blog">Sub Sub-Menu 2</a></li>

 <li><a href="url blog">Sub Sub-Menu 3</a></li>

    <li><a href="url blog">Sub Sub-Menu 4</a></li>

 <li><a href="url blog">Sub Sub-Menu 5</a></li> 

    </ul>

   </li>

     <li><a href="url blog">Sub-Menu 3</a>

    <ul>

    <li><a href="url blog">Sub Sub-Menu 1</a></li>

    <li><a href="url blog">Sub Sub-Menu 2</a></li>

 <li><a href="url blog">Sub Sub-Menu 3</a></li>

    <li><a href="url blog">Sub Sub-Menu 4</a></li>

 <li><a href="url blog">Sub Sub-Menu 5</a></li> 

    </ul>

   </li>

   </ul>

  </li>

  <li><a  href="url blog"><i class="fa fa-bullhorn"></i> BLOG</a></li>

    <li><a  href="url blog"><i class="fa fa-tags"></i> CATEGORIES</a>

  <ul class="sub-menu">

   <li><a href="url blog">Sub-Menu 1</a></li>

   <li><a href="url blog">Sub-Menu 2</a>

    <ul>

    <li><a href="url blog">Sub Sub-Menu 1</a></li>

    <li><a href="url blog">Sub Sub-Menu 2</a></li>

 <li><a href="url blog">Sub Sub-Menu 3</a></li>

    <li><a href="url blog">Sub Sub-Menu 4</a></li>

 <li><a href="url blog">Sub Sub-Menu 5</a></li> 

    </ul>

   </li>

     <li><a href="url blog">Sub-Menu 3</a>

    <ul>

    <li><a href="url blog">Sub Sub-Menu 1</a></li>

    <li><a href="url blog">Sub Sub-Menu 2</a></li>

 <li><a href="url blog">Sub Sub-Menu 3</a></li>

    <li><a href="url blog">Sub Sub-Menu 4</a></li>

 <li><a href="url blog">Sub Sub-Menu 5</a></li> 

    </ul>

   </li>

   </ul>

  </li>

  <li><a  href="url blog"><i class="fa fa-envelope"></i> CONTACT</a></li>

  <li><a  href="url blog"><i class="fa fa-sitemap"></i> SITEMAP</a></li>

  <li><a  href="url blog"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>

  </ul>

  </nav> 

5. lalu letakkan kode di bawah 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>

6. Sebelum sobat save pratinjau terlebih dahulu kalau sobat pratinjau sudah siap barulah sobat save dan lihat hasilnya . baiklah saya rasa sobat sudah bisa dan sudah selesai semoga bermanfaat bagi blog sobat.