Cara Membuat Navigasi Menu Responsive + Dropdown untuk Blogger

Baca Juga

Cara Membuat Navigasi Menu Responsive + Dropdown untuk Blogger

BERIKUT ini cara membuat navigasi menu responsive (mobile friendly) dropdown dan multidropdown untuk blog blogger. Serupa dengan posting sebelumnya: cara membuat navigasi menu responsive simple keren.

Penampakan menu ini di dekstop seperti pada umumnya menu navigasi. Penampilan menu responsivenya, saat dibuka di mobile devices alias HP, seperti gambar berikut ini:

Keren 'kan?

Cara Membuat Navigasi Menu Responsive + Dropdown untuk Blogger

1. Template > Edit HTML
2. Copas kode CSS Menu Responsive berikut ini di atas kode ]]></b:skin>

/* Responsive Menu Dropdown */
.dropdowns nav, .dropdowns ul, .dropdowns li, .dropdowns a  {margin: 0; padding: 0;}

.dropdowns a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;}

.toggleMenu {
    display:  none;
}
.nav {
    list-style: none;
     *zoom: 1;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
}
.nav a {
    padding: 10px 15px;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > .parent {
    background-image: url("images/downArrow.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;
    position: relative;
    z-index:100;
}
.nav li li li a {
    z-index:200;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.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;
    }

}
.toggleMenu {
    background: #666;
    color: #fff;
}

.nav {
     background:#175e4c;
}

.nav a {
    color:#fff;
}

.nav > li {
    border-top: 1px solid #104336;
}

.nav li li a {
    background: #1d7a62;
    border-top: 1px solid #175e4c;
}

.nav li li li a {
    background:#249578;
    border-top: 1px solid #1d7a62;
}
.dropdowns {
    width: 100%;
    max-width: 960px;
    background: #111;
}

a.toggleMenu {
    padding: 10px 15px;background: #111;
}

.nav ul {
    width: 9em;
}

.nav > li > .parent {
  
}

3. Copas kode JavaScript Navigasi Menu Responsive + Dropdown untuk Blogger berikut ini di atas kode </body> atau </head>


<script type="text/javascript">
(function($){
    $.fn.dropdowns = function (options) {
       
        var defaults = {
            toggleWidth: 768
        }
       
        var options = $.extend(defaults, options);
       
        var ww = document.body.clientWidth;
       
        var addParents = function() {
            $(".nav li a").each(function() {
                if ($(this).next().length > 0) {
                    $(this).addClass("parent");
                }
            });
        }
       
        var adjustMenu = function() {
            if (ww < options.toggleWidth) {
                $(".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 >= options.toggleWidth) {
                $(".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');
                });
            }
        }
       
        return this.each(function() {
            $(".toggleMenu").click(function(e) {
                e.preventDefault();
                $(this).toggleClass("active");
                $(this).next(".nav").toggle();
                adjustMenu();
            });
            adjustMenu();
            addParents();
            $(window).bind('resize orientationchange', function() {
                ww = document.body.clientWidth;
                adjustMenu();
            });
        });
   
    }
})(jQuery)
</script>
<script>
    $(".dropdowns").dropdowns();
</script>

4. Copas Kode HTML alias nama-nama dan link menunya di bawah kode penutup </header> atau di atas kode <div class='main-wrapper'> dan yang serupa dengannya.


<div class='dropdowns'>

<a class='toggleMenu' href='#'>Menu</a>
<ul class='nav'>
  <li><a href='/'>Home</a></li>
  <li><a href='/p/about.html'>About</a></li>

    <li class='test'>
        <a href='#'>Dropdown1</a>
        <ul>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>Sandals</a></li>
                    <li><a href='#'>Sneakers</a></li>
                    <li><a href='#'>Wedges</a></li>
                    <li><a href='#'>Heels</a></li>
                    <li><a href='#'>Loafers</a></li>
                    <li><a href='#'>Flats</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>Loafers</a></li>
                    <li><a href='#'>Sneakers</a></li>
                    <li><a href='#'>Formal</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Dropdown2</a>
        <ul>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>T-Shirts</a></li>
                    <li><a href='#'>Dress Shirts</a></li>
                    <li><a href='#'>Tank Tops</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>T-Shirts</a></li>
                    <li><a href='#'>Blouses</a></li>
                    <li><a href='#'>Dress Shirts</a></li>
                    <li><a href='#'>Tunics</a></li>
                    <li><a href='#'>Camisoles</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Pants</a>
        <ul>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>Trousers</a></li>
                    <li><a href='#'>Slacks</a></li>
                    <li><a href='#'>Jeans</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>Trousers</a></li>
                    <li><a href='#'>Slacks</a></li>
                    <li><a href='#'>Jeans</a></li>
                    <li><a href='#'>Leggings</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Skirts</a>
        <ul>
            <li>
                <a href='#'>Long</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Short</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Mini</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Dresses</a>
        <ul>
            <li>
                <a href='#'>Casual</a>
            </li>
            <li>
                <a href='#'>Formal</a>
                <ul>
                    <li><a href='#'>Wedding</a></li>
                    <li><a href='#'>Party</a></li>
                </ul>
            </li>
          
        </ul>
    </li>
    <li>
        <a href='#'>Seks</a>
        <ul>
            <li><a href='#'>Mens</a></li>
            <li><a href='#'>Womens</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Link</a>
    </li>
</ul>
</div>

Save Template!

NOTES!
Pastikan di template Anda suda link ke kode jQuery seperti ini:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

atau

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Jika belum ada, pasang/tambahkan salah satu kode tersebut di atas  kode </head>

KHOTIMAH
Kode Navigasi Menu Responsive + Dropdown untuk Blogger di atas dimodifikasi dari sumbernya di Github. Wasalam. (http://blogromeltea.blogspot.com).*
 
Link Sumber Kode: https://github.com/tessalt/dropdowns