Menu Navigasi Responsive Blogger

Ini adalah lanjutan dari tutorial Cara Membuat Menu Navigasi di Blogger, Sebelumnya kita membuat menu navigasi untuk blogger hanya menggunakan code css dan html sederhana. Ciri menu navigasi responsive adalah ketika sebuah website di akses dari perangkat tablet, smartphone atau pc desktop tampilan menu navigasi akan beradaptasi sesuai dengan perangkat yang kita gunakan, maka akan ada perbedaan tampilan ketika mengaksesnya dengan perangkat yang berbeda.

Kali saya akan melanjutkan membuat menu navigasi menjadi responsive dengan menggunakan Media Query CSS dan jQuery. Langsung saja simak baik-baik caranya di bawah ini.

Cara Membuat Menu Navigasi Responsive di Blogger

Pertama masuklah ke blog akun sobat kemudian pilih menu Tema > Edit HTML. Tekan CTRL+F carilah kode ]]></b:skin>. Copy dan paste kode CSS di bawah ini tepat di atas kode tersebut.

@media screen and (max-width: 768px) {
    .main-nav .nav-toggle {
        display: block;
    }
    .main-nav ul {
        display: none;
        float: left;
        overflow: hidden;
        width: 100%
    }
    .main-nav ul ul,
    .main-nav ul ul ul {
        display: block;
        left: 0;
        top: 0;
        position: relative;
    }
    .main-nav ul li {
        display: block;
        float: none;
    }
    .main-nav ul ul li {
        padding-left: 25px;
    }
    .main-nav ul li a {
        border-top: 1px solid #404040;
    }
    .main-nav li > a:after {
        background: #262626;
        border-radius: 50%;
        padding: 0 3px;
    }
    .main-nav ul ul li > a:after,
    .main-nav ul ul ul li > a:after {
        content: "\f0d7";
        transform: none;
        left: 0;
        top: 0;
        margin-left: 6px;
        position: relative;
    }
}

Lanjut carilah kode </head>, copy dan paste kode di bawah ini tepat di atasnya.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Kemudian carilah kode </body>, copy dan paste kode di bawah ini tepat di atasnya.

<script type="text/javascript">
    (function($) {

        $('.nav-toggle').on('click', function() {
            $(this).parent().find('ul:first').slideToggle(250);
            $(this).toggleClass('expand');
        });

        $(window).on('resize', function() {
            if ($(this).width() > 480) {
                $('.nav-toggle').parent().find('ul:first').removeAttr('style');
            }
        });

    })(jQuery);
</script>

Selanjutnya klik Simpan tema. Untuk melihat hasilnya ubahlah ukuran browser menjadi lebih kecil atau dengan menekan CTRL + SHIF + I(Inspect) pada browser Google Chrome lalu klik Toggle device toolbar. Lihat gambar di bawah ini.

contoh menu navigasi responsive

Selesai, Selamat mencoba.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *