Membuat Menu Navigasi Drop Down Header Responsive

Membuat Navigasi Header Dengan Menu dropdown - Tampilan yang menarik pada blog biasanya akan mulai terlihat pada awal tampilan blog itu sendiri, yaitu tampulan header yang dilengkapi dengan menu navigisi. Menu navigasi dropdown biasanya akan menjadi pilihan utama bagi para blogger karene menu tersebut lebih simple dan lebih User Friendly.

Pengunjung blog akan lebih senang ketika mengarahkan mousenya kearah menu kemudian menu tersebut melakukan auto dropdowns. Menu dropdown tersebut secara otomatis akan memunculkan sub menu yang menjadi bagian dari judul menu utama (tempat mouse diarahkan).

Pada tutorial kali ini, kita akan membuat menu navigasi pada header dengan metode dropdown. Hal ini tentunya juga akan di kombinasikan untuk tampilan dekstop dan mobile (/?m=1). Sebenarnya, tutorial ini sudah lama ingin saya buat, namun belum sempat karena terlalu banyak kesibukan. Dan beberapa hari yang lalu saya mendapat request melalui email untuk dibuatkan tutorial cara membuat menu dropdown seperti yang blog ini gunakan.

Sebenarnya, menu dropdowns yang saya gunakan adalah bawaan dari template Viomagz premium. Ada beberpa fitur hebat lainnya selain menu dropdown. Untuk selengkapnya bisa Anda baca pada postingan Review Template Viomagz. Namun bagi Anda yang ingin memilik tampilan menu dari viomagz saja. maka silakan ikuti tutorialnya berikut ini.

Cara Memasang Menu Navigasi dropdown Sederhana

1. Silakan Login keakun Bloger Anda

2. Masuk Ke Thema➨Edit HTML

3. Silakan cari kode <header> pada blog Anda. Gunakan CTRL + F untuk memudahkan pencarian.

4. Setelah ketemu, cari kode menu navigasi yang ada dalam header tersebut. Contohnya seperti pada gambar dibawah.

Tiap template akan memiliki kode yang berbeda, maka silakan Anda cari kode Menu NAV pada template Anda

Hapus kode tersebut dan ganti dengan kode dibawah ini.

<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</div>
  
<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu 1</a></li>
  <li><a href='#'>Menu 2</a></li>
  <li><a href='#'>Menu 3</a>
  <ul>
    <li><a href='#'>SubMenu 1</a></li>
    <li><a href='#'>SubMenu 2</a></li>
  </ul>
  </li>
</ul>
</nav>

5. Selanjutnya, Tambahkan file CSS berikut ini sebeluam </style> atau ]]</b:skin>

/* NAV MENU */
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#cssmenu ul li a{position:relative;}
#cssmenu #head-mobile{position:relative;}
#cssmenu{text-align:left;}
#cssmenu ul{margin:0;display:block;height:48px;}
#cssmenu #head-mobile{display:none;position:relative;}
#cssmenu > ul > li{float:left;margin:0;}
#cssmenu > ul > li > a{padding:0 17px;font:bold 12px Helvetica,Arial,sans-serif;line-height:48px;letter-spacing:0.8px;text-decoration:none;text-transform:uppercase;color:#fff;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#f8f8f8;}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:rgba(64,64,64,0.1);-webkit-transition:background .2s ease;-ms-transition:background .2s ease;transition:background .2s ease;}
#cssmenu ul li.has-sub{position:relative;}
#cssmenu > ul > li.has-sub > a::after,#cssmenu ul ul li.has-sub > a::after{content:"";border-color:#fff transparent transparent;border-style:solid;border-width:4px;height:0;width:0;display:inline-block;vertical-align:middle;margin-left:6px;margin-bottom:-2px;}
#cssmenu ul ul li.has-sub > a::after{content:"";border-color:transparent transparent transparent #fff;margin-bottom:0;}
#cssmenu ul ul{height:auto;position:absolute;left:-9999px;z-index:1;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);opacity:0;transform:translateY(-2em);transition:all 0.3s ease-in-out 0s;}
#cssmenu li:hover > ul{left:auto;opacity:1;transform:translateY(0%);transition-delay:0s,0s,0.3s;}
#cssmenu ul ul li{background:#000080;margin:0;}
#cssmenu ul ul li:hover{background:#575757;}
#cssmenu ul ul ul{margin-left:100%;top:0;}
#cssmenu ul ul li a{font:bold 12px Helvetica,Arial,sans-serif;border-bottom:1px solid rgba(150,150,150,0.15);padding:0 17px;line-height:36px;max-width:100%;text-decoration:none;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0;}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#575757;}
@media screen and (min-width:801px){#cssmenu ul{display:block!important;}}
@media screen and (max-width:800px){#cssmenu{float:none;}#cssmenu ul{background:#000080;width:100%;display:none;height:auto;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);}#cssmenu > ul{max-height:calc(100vh - 48px);overflow-y:auto;}#cssmenu ul ul{-webkit-box-shadow:none;box-shadow:none;display:none;opacity:1;transform:translateY(0%);transition:unset;}#cssmenu li:hover > ul{transition-delay:0s,0s,0s;}#cssmenu ul li{width:100%;border-top:1px solid rgba(150,150,150,0.15);background:#000080}#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#575757;}#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff;}#cssmenu ul ul li a{padding:0 25px;}#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0;color:#fff;}#cssmenu > ul > li{float:none;position:relative;}#cssmenu ul ul li.has-sub ul li a{padding-left:35px;}#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left;}#cssmenu > ul > li.has-sub > a::after,#cssmenu ul ul > li.has-sub > a::after{display:none;}#cssmenu #head-mobile{display:block;padding:24px;color:#fff;font-size:12px;font-weight:bold;}.button{width:25px;height:20px;position:absolute;right:0;top:14px;cursor:pointer;z-index:2;outline:none;}.mline1,.mline2,.mline3{position:absolute;left:0;display:block;height:3px;width:22px;background:#fff;content:'';border-radius:5px;transition:all 0.2s;}.mline1{top:0;}.mline2{top:7px;}.mline3{top:14px;}.button.menu-opened .mline1{top:8px;border:0;height:3px;width:22px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}.button.menu-opened .mline2{top:8px;background:#fff;width:22px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}.button.menu-opened .mline3{display:none;height:0;}#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;cursor:pointer;}#cssmenu .submenu-button::after{content:"";border-color:#fff transparent transparent;border-style:solid;border-width:4px;height:0;width:0;display:inline-block;vertical-align:middle;margin:20px 20px 14px;}#cssmenu ul ul .submenu-button::after{margin:16px 20px 12px;}#cssmenu ul ul ul li.active a{border-left:none;}#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none;}}
@media only screen and (max-width:640px){#cssmenu > ul > li > a{padding:0 15px;}}
#cssmenu ul ul li,#cssmenu > ul > li.has-sub > a::before,#cssmenu ul ul li.has-sub > a::before{transition:all 0.2s;-moz-transition:all 0.2s;-webkit-transition:all 0.2s;}

6. Setelah itu, tambahkan kode JS berikut sebelum </body>

<script>
    //<![CDATA[
    // nav menu
    ! function(s) {
        s.fn.menumaker = function(n) {
            var e = s(this),
                o = s.extend({
                    format: "dropdown",
                    sticky: !1
                }, n);
            return this.each(function() {
                s(this).find(".button").on("click", function() {
                    s(this).toggleClass("menu-opened");
                    var n = s(this).next("ul");
                    n.hasClass("open") ? n.slideToggle(150).removeClass("open") : (n.slideToggle(150).addClass("open"), "dropdown" === o.format && n.find("ul").show())
                }), e.find("li ul").parent().addClass("has-sub"), multiTg = function() {
                    e.find(".has-sub").prepend('<span class="submenu-button"></span>'), e.find(".submenu-button").on("click", function() {
                        s(this).toggleClass("submenu-opened"), s(this).siblings("ul").hasClass("open") ? s(this).siblings("ul").removeClass("open").slideToggle(150) : s(this).siblings("ul").addClass("open").slideToggle(150)
                    })
                }, "multitoggle" === o.format ? multiTg() : e.addClass("dropdown"), !0 === o.sticky && e.css("position", "fixed")
            })
        }
    }(jQuery),
    function(s) {
        s(document).ready(function() {
            s("#cssmenu").menumaker({
                format: "multitoggle"
            })
        })
    }(jQuery);
//]]></script>

7. Save temlate dan lihat hasilnya.

Kemungkinan akan terdapat beberapa kode CSS yang tidak tepat pada template Anda, karena tiap template blog memilik strukture yang berbeda, jadi silakan atur dan sesuaikan kode CSS sesuai kebutuhan.

Demikain tutorial singkat Membuat Navigasi Header Dengan Menu dropdown, responsive, keren dan SEO Friendly serta valid HTML 5. Semoga bisa diterapkan dengan baik. Jika ada masalah, jangan sungkan untuk bertanya pada kolom komentar dibawah atau langsung melalui halaman contact. Terima kasih.

Share