Cara Membuat Menubar Multi Dropdown Di Blog

Cara Membuat Menubar Multi Dropdown Di Blog

Cara Membuat Menubar Multi Dropdown Di Blog. Sobat blogger, kembali lagi untuk berbagi tutorial, kali ini saya akan membagikan sebuah tutorial bagaiman cara membuat menubar multi dropdown di blog,tutorial ini saya ambil dari blog mbak Arlina, :) dan terimakasih sebelumnya buat mbak arlina yang sudah berbagi, sobat blogger menubar ini selain tampilannya elegant juga di desain menjadi responsive oleh mbak arlina tentu dengan kelebihan multi dropdown menu atau multi sub menu.

Menu multi dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika anda ingin menerapkan menubar ini di blog anda,silahkan ikuti tutorialnya.

Cara Membuat Menubar Multi Dropdown Di Blog

Baca Juga : Cara Membuat Popular Post Simple Keren

Cara Membuat Menu Bar Multi Dropdown.
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 {
    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) {
}

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="#"><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> 

5. 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>

6. Jika 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. :)

Artikle terkait
Bagikan Ke
109 Komentar untuk "Cara Membuat Menubar Multi Dropdown Di Blog"
This comment has been removed by the author. - Hapus
This comment has been removed by the author. - Hapus

thanks buat tutornya gan,, sangat memabantu sekali.. http://goo.gl/Pt4u71

cine post gan, terimakasih, kunjung balik ya :)
http://goo.gl/hSnIaa

udah jadi submenunya, cara masukin postingan di submenu gimana caranya??

Gan kok ,, Menu bar nya berbeda dengan yang ada di DEMO nya ,, bisa cek blog saya gak ?? http://yonnatafajarismaharja.blogspot.com/

Terima Kasih mas Tutorialnya. Kalau bisa kunjungi ya http://manutdpedia.blogspot.com/

artikel yg bermanfaat,terimah kasih

saya coba dulu gan. thanks tutor nya... klo ada waktu mampir gan. kopi luwak siap menyambut. sxan kasih ide buat blog saya biar lebih keren gan. hehehe

gan kok sub sub menu nya kepotong ya? sub sub menu 1 ok. tapi sub sub menu 2 dan 3 kepotong depan nya. mohon pencerahan nya gan. di blog saya bagian menu 'bisnis' > sub menu 'jamur' > sub sub menu 'budidaya jamur' terpotong depan nya.
script agan yg diatas ga saya otak atik.

blog saya di http://jamurjangkrik.blogspot.com gan. mohon di koreksi dan pencerahan nya gan. soalnya sub menu di bawah nya gak kepotong. di tunggu koreksi nya gan.

Terima Kasih pencerahannya , Kunjungi saya di gasruk.com

. thnkz gan http://tkjloverz-billy.blogspot.com

gan gimana cara ngubah sub-menu. jadi menu yang kita inginkan?

kalau bisa visit ya http://koncara86.blogspot.com/

setelh aku pratinjautemplate ko loadig nya lama sh

Makasih infonya gan sangat bermanfaat bagi saya.

Makasih Info nya gan blog saya : http://lalerputih.blogspot.com/

This comment has been removed by the author. - Hapus

Sangat Bermanfaat! terima kasih! :D

Terima kasih atas informasinya.. ijin coba dulu semoga work.. salam kenal dari saya min sharing with syafi alqudsy
http://www.cahkudus.tk/

Ok banget tips nya terima kasih sangat bermanfaat, salam kenal dari saya

Terimakasih infonya gan. Artikel yang benar benar keren. Sudah diaplikasikan di blog saya
rifalnurkholiq.blogspot.com

Terimakasih artikelnya, work :)

Thanks Gan, Kalau untuk mengatur lebar dan panjang gimana caranya gan

gan cara merubah warna menu dan huruf menu gimana caranya gan,
mtsn-witihama.blogspot.com

thanks gan infonya. kunjungi blog kami,
http://hurdjantowibisono.blogspot.co.id/

mantap tapi jika template dowload untuk mengabungkannya bagaimana

This comment has been removed by the author. - Hapus
This comment has been removed by the author. - Hapus

Terimakasih tutornya boss....saya pakai menu dropdown-nya untuk blog saya. Jika sudi silahkan mampir di http://den-ibnar.blogspot.co.id/2015/09/disini-den-ibnar-bisa-input-apapun.html

Thanks gan infonya...

Biar di menu home ada icon nya gitu gimana gan?? kok di blog ane ga ada, http://lensul.blogspot.com/

Mas tanya, sy sudah coba terapkan di blog saya http://saliagu.blogspot.com tapi kenapa icon menu nya tidak muncul yah, tulisan doang yang muncul, please di reply, thanks.

Thanks gan sangat membantu saya :)

terima kasih gan, sukses saya coba
cuma saya cari cari untuk mengurangi tinggi menunya gak nemu, gmana ya?
keliatan gak ramping menuny
mohon pencerahnnya Gan
ini blog saya
masagusmin.blogspot.co.id

THANK'S GAN,100%WORK.
http://myinggrisku.blogspot.co.id/

punya gw kok gx ada header lalu gmana?

sipp mantaap madam,..thank infonya yaa

trima kasih info nya gan..
tapi saya masih bingung buat nerapin dropdown untuk menu yang sudah ada..

trima kasih info nya gan..
tapi saya masih bingung buat nerapin dropdown untuk menu yang sudah ada..

kok logonya ga ada ya? ga sesuai dengan demo? scriptnya beda atau gimana ya?
www.indoblazer.com

iya cara edit posnya,bingung euyy
http://3nrtechnology.blogspot.co.id

gan.. kok submenu yang home selalu ter block warna biru.. cara ubahnya gi mana ?

Thanks buat tutorialnya kunjungi juga goyangpensil.blogspot.com ya mas

woooooooooooow seharian penuh baru dapat artikel ini.
man......................tap tap tap
Thanks......................................

tinggal ganti yang pagar dengan link blog ente, sub menu 1 atau seterusnya ganti misal permainan :D

Dapat cash lewat lockscreen hp? Buruan download!
Flash Cash: 10 Des 12:33 WIB (Rp 518) https://invite.cashtree.id/qityme

tengkyu tengkyu tengkyu!!! bro, udah ku terapkan ilmu mas bro ke my blog coba blog mas bro ada iklanya, alo ada mau ku klik sebanyak banyaknya sebagai rasa tengkyu gue

wah wah wah agan madam keren kalo suruh membuat tutorial hehe thx gan. kunjungi juga blog saya yah di vanoverhelsing.blogspot.co.id

thx gan
http://caraspasi.blogspot.co.id

ijin ia
salam sukses selalu - by. hargaviagra.com

This comment has been removed by the author. - Hapus

Thx Gan... Keren tutorialnya. Kunjungi blog saya ya.. di
http://gw-octashop.blogspot.co.id/

keren dan terima kasih artikelnya yang okee punya dehh..

That's nice post's! Helpme full! Thanks.
Feed back please http://animesakuin.blogspot.co.id/

terima kasih info dan pencerahanya

tutorialnya ada di blog saya sis, search aja : Menubar

makasih bnyak nih infonya, penting banget untuk blogger pemula seperti saya. hehe

bagus informasi nya bermanfaat bagi blogger.

mohon feedback http://brrrwisata.blogspot.co.id/

Trimakasih atas kebaikannya membagikan tutorial ini, sya sdh menerapkannya dan alhamdulillah jadi, tinggal meulai membuat postingan yang sesuai dengan label sehingga dapat terisi semua sub dan sub menunya. Ada sedikit yg kurang ditampilan saya, gambar disamping tulisan tidak muncul, namun demikian sy puas dengan tampilannya. Mohon kunjungannya di http://mitrakesmas.blogspot.co.id/ untuk melihat hasil yg sy terima dari blog ini. Mohon komentnya di blog tsbt. trimakasih, smoga blog ini selalu jaya. amin.

thanks jangan lupa kunjungi http://orangindonesia1987.blogspot.co.id/

thanks gan work ! :)
Kunjungi balik ya gan http://zakkyv.blogspot.co.id/

beneran mirip sama demo , sampe ga dijelasin cara ngerubah sub menu masing2

Nice posting...
mampir ke blog sy
http://fastudio28-jasa-arsitektur.blogspot.co.id/

Tksh

jika mau yang gratisan dan ada jasa webhosting yang bagi bagi cPanel dengan domain gratis .bos.la, seperti di microcyber.net dan webhosting.web.id, dan golog.biz namun disana TOS nya sangat ketat sekali. selamat mencoba

makasih mas sangat membantu.

jangan lupa kunjungi juga blog ane. http://puyoku.blogspot.com

Thank ya gan kunjungi juga blog ane
http://artikel-lengkap2016.blogspot.com/

This comment has been removed by the author. - Hapus

car script skin style dan header

kok gak ktemu ya gan?
sory masih newbie
mohon pencerahanya agn..
udah pusing bgt nie browsing kemana2
thanks
di tunggu balasanya gan

This comment has been removed by the author. - Hapus

BANYAK PENGUNJUNG DAN RINGAN ITU IDAMAN BLOG SAYA
KUNJUNGAN BALIK DAN TUKERAN LINK YUK DI REDREWEL.COM

ane selalu gagal waktu edit sub menunya, (kalau dihapus

Bagus infonya tapi aku takut ngerubah kode di template...jangan lupa mampir diblog saya,,,http://pantunjenaka1.blogspot.co.id.. salam bloger..

thank artikel e sangat bermanfaat kunbal www.p4won.blogspot.com

Sedikit koresi, ga ada kode header yang ada head. tapi terimakasih. mampir-mapir ke technohoho.blogspot.co.id

wihh ini yang ane cari-cari..
terima kasih banyak gan!!
visit juga http://www.awbatch.us

Terus kalo mau tambah artikel yang masuk dalam dropdown itu gimana???

sangat membantu,,,,
ditunggu kunjungannya
https://gudangsgala.blogspot.co.id

Haloo Madamvia.saya punya sotware Easibotton .untuk membuat sub menudropdown.tapi setelah saya coba dan sesudah jadi .saya bingung cara menerapkan nya ke blog saya gimanaya. Mohon pencerahannya kalo madam berminat nanti saya uplod softwarenya...........

terimakasih atas artikel yang sangat membantu ini, karena artikel ini sangat membantu blogger saya dengan menggunakan menu dropdown tampilan blog saya jadi enak dipandang, dan artikel anda sangat jelas, saya juga menerapkan menu bar untuk blog saya http://www.gooblogi.com/2016/06/cara-buat-menu-bar-di-atas-laman-blog.html jangan lupa kunbalnya.

Thanks infonya gan...
Monggo visit
Http://ahzavanitour.blogspot.com

IRI DENGAN BLOG INI YANG POPULER
REDREWEL.COM MASIH BERJUANG

lumayan bagus menu drop downnya :)
saya juga punya berbagai macam menu dropdown full color :). bisa dipilih
hanya di http://www.aquillien.ml/2016/08/memasang-menu-drop-down-full-color.html

terimaksih gan informasinya sangat bermanfaat.
http://androidkana.blogspot.co.id/

Terima kasih, telah dipraktekkan dan berhasil

itu yang letakin kode dibawah tag /header, boleh di tempatin di bawah /head doang gak?