Cara Membuat Menu Multi Dropdown

Menu atau tittle merupakan hal yang penting untuk disisipkan didalam blog . Dimana menu ini mempermudah pengunjung/visitor untuk menemukan...

Menu atau tittle merupakan hal yang penting untuk disisipkan didalam blog. Dimana menu ini mempermudah pengunjung/visitor untuk menemukan tema tertentu didalam blog anda.
Terlebih lagi bagi anda yang memiliki Blog dengan Menu/Label yang bisa dibilang cukup banyak. Sehingga jika tidak ditempatkan menu yang khusus mengarah pada artikel dengan Label tersebut tentu akan membuat para pengunjung menjadi sedikit frustasi dan akhirnya hengkang.

Oleh karena itu alangkah baiknya anda membuat dan memasang Menu tersebut diblog anda. Nah, selain untuk mempermudah pengunjung menemukan berbagai topik menarik didalam Blog anda menu juga dapat Memperindah/mempercantik tampilan blog anda sendiri. 

Pada topik ini saya akan membagikan tutorial Cara memasang menu multi drop down yang keren, dan responsive tentunya. Tutorial ini terinspirasi dari blog Arlinadzgn yang terlebih dahulu membagikan artikel dengan tutorial yang sama, menu ini seperti yang dibilang memiliki tampilan yang elegan dan bagus untuk dipandang, dan selain itu menu multi drop down ini memberikan multi Sub menu yang akan tetap Responsive.

Nah tentu hal ini akan bermamfaat bagi para pengelola Blog yang memiliki Kategory artikel yang cukup banyak, mempermudah pengunjung dan meringkas blog anda sehingga mudah ditemukan pengunjung.
Bagi anda yang tertarik untuk menerapkan multi drop down menu ini silahkan mengikuti tutorial berikut dengan benar :
1. Buka akun Blogger anda > Template > Edit HTML
2. Cari kode ]]></b:skin> atau </style> dan setelah ditemukan pastekan kode dibawah ini tepat diatas salah satu kode tadi
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) {
}

3. Dan kemudian letakkan kode HTML dibawah ini tepat dibawah 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> 
4. Langkah terakhir, letakkan kode dibawah ini diatas 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>

5. Klik pratinjau terlebih dahulu untuk memastikan sudah terpasang dengan benar, dan kemudian jika dianggap sudah bagus dan terpasang dengan benar klik Simpan template.

Buka Blog anda untuk melihat hasil tab menu yang sudah anda pasang tadi. Mudah bukan? jangan lupa share dan tinggalkan komentar anda dibawah.

COMMENTS

Nama

APK,2,Auto visitor,1,BackLink,3,Blog,52,Blogger,28,Browser,13,Eng,7,Feature,1,Font Awesome,1,Gadget,4,Ind,44,Info,40,Internet,7,JQuery,8,Layanan,5,Motifasi,7,News,9,Online Money,2,Pendidikan,2,Pengelolaan,8,Plugin,3,Review,3,SEO,31,Template,9,Tips,30,Tutorial,43,Video,2,Widget,9,
ltr
item
Nanda Network: Cara Membuat Menu Multi Dropdown
Cara Membuat Menu Multi Dropdown
Nanda Network
https://www.nandanetwork.com/2017/10/cara-membuat-menu-multi-dropdown.html
https://www.nandanetwork.com/
https://www.nandanetwork.com/
https://www.nandanetwork.com/2017/10/cara-membuat-menu-multi-dropdown.html
true
772157882416128223
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy