Cara membuat dropdown menu

Cara membuat dropdown menuHalo manteman, kita jumpa lagi di Wi dan kali ini saya akan berbagi tutorial untuk teman-teman. Kali ini saya akan membahas cara membuat menu dropdown di blogger, jangan lupa sama teman saya Madamvia yaah meskipun dia gak kenal aku sih tapi dia sangat membantu dan saya mengucapkan terimakasih sudah mau berbagi. Menu bar sangat lah cocok untuk menjadikan blog anda menjadi elegant dan membantu para teman temannya teman Wi. Menu multi dropdown ini pasti sangat dibutuhkan untuk teman wi yang mempunyai blog dengan kategory konten yang banyak dan menu ini juga bisa meringkas artikel untuk dipilah sesuai kategori yang dipilih. pada gak sabar ya? ayo silahkan ikuti tutorial ini.

Artikle terkait:
Cara Mengamankan Blog

1. Buka akun blogger anda.

2. Pilih menu template > klik 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 {

.menu li {
display: block;
}


position: relative;
display: inline-block;
    z-index: 100;
}


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

    font-weight: 600;

color: #fff;
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 {
    background: #9ca3da;
}


position: absolute;
.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    left: 0px;

.menu ul:after {
background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

    bottom: 100%;

pointer-events: none;
left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;

display: block;
border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    float: none;

background: #fff;
background: none;
    margin: 0;
    padding: 0;
}

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


transform: translate(0,0);
.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
}

.menu ul ul {
    left: 149px;
    top: 0px;

content: " ";
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;
    height: 0;

visibility: visible;
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 {
    opacity: 1;

.responsive-menu:hover {
transform: translate(0,0);
}

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

    background: #374147;
    color: #fff;

a.homer {
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;
    }


margin: 0;
background: #374147;
    }
}

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

    .menu {
        display: none;
    }

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

    nav {

.menu ul {
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;
    }

        visibility: hidden;

transform: initial;
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;
    }

    .menu li>ul ul:hover {

}
transform: initial;
    }
}

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


@media (max-width: 320px) {

5. Selanjutnya letakan 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="https://websiteian.blogspot.co.id/"><i class="fa fa-home"></i> HOME</a>


   <li><a href="#">Sub-Menu 2</a></li>
   <ul class="sub-menu">

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


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


  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
   <li><a href="#">Sub-Menu 4</a></li>

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

   </ul>

   </li>



   <li><a href="#">Sub-Menu 2</a>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>

  <ul class="sub-menu">

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


    <ul>


    <li><a href="#">Sub Sub-Menu 4</a></li>
    <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 5</a></li>


 <li><a href="#">Sub Sub-Menu 3</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="#"><i class="fa fa-bullhorn"></i> BLOG</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-tags"></i> CATEGORIES</a>


 <li><a href="#">Sub Sub-Menu 3</a></li>
  <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 2</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 3</a></li>


  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</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-exclamation-triangle"></i> DISCLAIMER</a></li>

6. Langkah terakhir simpan 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>

ika sudah, silahkan klik pertinjau terlebih dahulu,kalo sudah ok, save template anda. Oke sobat saya rasa sudah selesai di tutorial cara membuat menubar multi dropdown di blog,untuk lebih dan kurangnya saya mohon maaf,semoga sukses. :)

Author : masker semarang

Share this

Related Posts