Cara Membuat Menu Dropdown Dan Submenu Responsive Di Blog

Cara Membuat Menu Dropdown Dan Submenu Responsive Di Blog | yang akan saya bagikan di artikel yang berlabel Blog ini sekaligus sebagai catatan saya dan koleksi menu-menu blog yang saya terapkan pada blog saya sendiri. Tentu saja bukan saya yang buat menu ini, saya hanya mengedit kode HTML, CSS dan Script tersebut dan sekaligus cara menerapkannya pada blog.

Salah satu untuk memperindah suatu blog yaitu pada menu, agar blog menjadi pofesional dan SEO menu pada blog juga menjadi prioritas terutama menu yang responsive. Bila ada yang ingin memasang menu dropdown ini mungkin sesuai dengan tema anda silahkan ikuti langkah-langkah berikut ini:

• Pertama Masuk ke Blogger
• Selanjutnya pilih Tema dan Edit HTML
• Kemudian cari kode </header>
• Selanjutnya copy pastekan kode dibawah ini diatas atau dibawah kode </header>

<div class='container'>
<a class='toggleMenu' href='#'>Menu</a>
<ul class='nav'>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Computer</a>
<ul>
<li><a href="#">Software</a>
<ul>
<li><a href="#">Adobe</a></li>
<li><a href="#">Corel</a></li>
<li><a href="#">Games</a></li>
</ul>
</li>
<li><a href="#">Microsoft</a>
<ul>
<li><a href="#">Office</a></li>
<li><a href="#">Windows</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Printer</a></li>
<li><a href='#'>Tutorial</a></li>
</ul>
</div>

Keterangan:
Ganti tulisan yang berwarna merah diatas, tanda pagar dengan URL dan judul menu blog sesuai dengan URL link menu atau label blog.

• Kedua cari kode </head> selanjutnya copy dan pastekan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>
body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
    width: 90%;
    max-width: 1000px;
    margin: 10px auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#175e4c;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
    border-top: 1px solid #104336;
}
.nav > li > .parent {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIe2gATMImWE9miUGeLpsF3Ns9dSymUQDbTUMY1tco5NscWoH9mH6wOZbYtCknoPrxfVhSZPvfbnq6t_8b18hs1tjUcMpLSTie1s2JgJA_nzIxmnsHE8weOfFjDTjZhXRfpzi92q3P0qA/h120/DownArrow-thopads.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

@media screen and (max-width: 800px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIe2gATMImWE9miUGeLpsF3Ns9dSymUQDbTUMY1tco5NscWoH9mH6wOZbYtCknoPrxfVhSZPvfbnq6t_8b18hs1tjUcMpLSTie1s2JgJA_nzIxmnsHE8weOfFjDTjZhXRfpzi92q3P0qA/h120/DownArrow-thopads.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}
</style>

• Ketiga agar menu tersebut bekerja dengan baik cari kode </body> dan copy pastekan kode dibawah ini di atas kode tersebut

<script type='text/javascript'>
//<![CDATA[
var ww = document.body.clientWidth;
$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })
    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();});
    adjustMenu();})
$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});
var adjustMenu = function() {
    if (ww < 800) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
});
    }
    else if (ww >= 800) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
             // must be attached to li so that mouseleave is not triggered when hover over submenu
             $(this).toggleClass('hover');
});
    }
}
//]]>            
</script>

• Terakhir Simpan Tema dan kemudian lihat hasilnya

Demikian Cara Membuat Menu Dropdown Dan Submenu Responsive Di Blog yang saya bagikan ini, semoga bermanfaat bagi para pembaca, sekian dan terimakasih,...