• Posted by : Ariel Nicho Aug 8, 2012

    What's up gan?
    Are you fine today?
    If you fine, I want to tell you about "Cara Membuat Menu Drop-Down/Horizontal"

    Pada para pemula-pemula yang baru saja menggunakan blogger, mungkin sedikit bingung bagaimana sih caranya membuat menu-menu yang bisa ada anak-anaknya atau yang bisa bercabang-cabang??
    ..Nah, supaya para gan2 semua tidak bingung, kali ini saya akan memberitahukannya kepada gan2 semua dengan cara2 saya dan semoga artikel ini dapat membantu gan2 semua.

    Okelah gan cukup basa-basinya, langsung aja kita ke langkah-langkahnya..
    *(Tapi sebelumnya, saya punya beberapa style/desainnya, jdi silahkan gan yang pilih desain mana yang mau gan pilih)*

    Cara 1 / Model 1 :
    1. Login di blogger.com
    2. Masuk ke Menu Template
    *!! sebelum memulai langkah yang ke-3, sebaiknya gan BackUp/Unduh dulu template yang gan gunakan sekarang, agar ketika step ini gagal, gan bisa mengembalikannya ke awal/sebelumnya. (Cara BackUp/Mengunduh/Mendownload Template Sendiri) !!*
    3. Pilih Edit HTML, pilih Lanjutkan
    4. Centang/Ceklis
    5. Search/Cari kode </body> (untuk lebih mudah mencari, tekan tombol F3 / tekan tombol CTRL + F) , lalu letakkan kode berikut diatas kode </body>


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

    6. Setelah itu gan letakkan code berikut ini diatas kode yang tadi ( </body> )


    <script type='text/javascript'>
    //<![CDATA[

    (function($){
        /* hoverIntent by Brian Cherne */
        $.fn.hoverIntent = function(f,g) {
            // default configuration options
            var cfg = {
                sensitivity: 7,
                interval: 100,
                timeout: 0
            };
            // override configuration options with user supplied object
            cfg = $.extend(cfg, g ? { over: f, out: g } : f );

            // instantiate variables
            // cX, cY = current X and Y position of mouse, updated by mousemove event
            // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
            var cX, cY, pX, pY;

            // A private function for getting mouse position
            var track = function(ev) {
                cX = ev.pageX;
                cY = ev.pageY;
            };

            // A private function for comparing current and previous mouse position
            var compare = function(ev,ob) {
                ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
                // compare mouse positions to see if they've crossed the threshold
                if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                    $(ob).unbind("mousemove",track);
                    // set hoverIntent state to true (so mouseOut can be called)
                    ob.hoverIntent_s = 1;
                    return cfg.over.apply(ob,[ev]);
                } else {
                    // set previous coordinates for next time
                    pX = cX; pY = cY;
                    // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                    ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
                }
            };

            // A private function for delaying the mouseOut function
            var delay = function(ev,ob) {
                ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
                ob.hoverIntent_s = 0;
                return cfg.out.apply(ob,[ev]);
            };

            // A private function for handling mouse 'hovering'
            var handleHover = function(e) {
                // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
                var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
                while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
                if ( p == this ) { return false; }

                // copy objects to be passed into t (required for event object to be passed in IE)
                var ev = jQuery.extend({},e);
                var ob = this;

                // cancel hoverIntent timer if it exists
                if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

                // else e.type == "onmouseover"
                if (e.type == "mouseover") {
                    // set "previous" X and Y position based on initial entry point
                    pX = ev.pageX; pY = ev.pageY;
                    // update "current" X and Y position based on mousemove
                    $(ob).bind("mousemove",track);
                    // start polling interval (self-calling timeout) to compare mouse coordinates over time
                    if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

                // else e.type == "onmouseout"
                } else {
                    // unbind expensive mousemove event
                    $(ob).unbind("mousemove",track);
                    // if hoverIntent state is true, then call the mouseOut function after the specified delay
                    if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
                }
            };

            // bind the function to the two event listeners
            return this.mouseover(handleHover).mouseout(handleHover);
        };

    })(jQuery);

    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[

    /*
     * Superfish v1.4.8 - jQuery menu widget
     * Copyright (c) 2008 Joel Birch
     *
     * Dual licensed under the MIT and GPL licenses:
     *     http://www.opensource.org/licenses/mit-license.php
     *     http://www.gnu.org/licenses/gpl.html
     *
     * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
     */

    ;(function($){
        $.fn.superfish = function(op){

            var sf = $.fn.superfish,
                c = sf.c,
                $arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
                over = function(){
                    var $$ = $(this), menu = getMenu($$);
                    clearTimeout(menu.sfTimer);
                    $$.showSuperfishUl().siblings().hideSuperfishUl();
                },
                out = function(){
                    var $$ = $(this), menu = getMenu($$), o = sf.op;
                    clearTimeout(menu.sfTimer);
                    menu.sfTimer=setTimeout(function(){
                        o.retainPath=($.inArray($$[0],o.$path)>-1);
                        $$.hideSuperfishUl();
                        if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                    },o.delay);
                },
                getMenu = function($menu){
                    var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                    sf.op = sf.o[menu.serial];
                    return menu;
                },
                addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

            return this.each(function() {
                var s = this.serial = sf.o.length;
                var o = $.extend({},sf.defaults,op);
                o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
                    $(this).addClass([o.hoverClass,c.bcClass].join(' '))
                        .filter('li:has(ul)').removeClass(o.pathClass);
                });
                sf.o[s] = sf.op = o;

                $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
                    if (o.autoArrows) addArrow( $('>a:first-child',this) );
                })
                .not('.'+c.bcClass)
                    .hideSuperfishUl();

                var $a = $('a',this);
                $a.each(function(i){
                    var $li = $a.eq(i).parents('li');
                    $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
                });
                o.onInit.call(this);

            }).each(function() {
                var menuClasses = ;
                if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
                $(this).addClass(menuClasses.join(' '));
            });
        };

        var sf = $.fn.superfish;
        sf.o = [];
        sf.op = {};
        sf.IE7fix = function(){
            var o = sf.op;
            if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
                this.toggleClass(sf.c.shadowClass+'-off');
            };
        sf.c = {
            bcClass     : 'sf-breadcrumb',
            menuClass   : 'sf-js-enabled',
            anchorClass : 'sf-with-ul',
            arrowClass  : 'sf-sub-indicator',
            shadowClass : 'sf-shadow'
        };
        sf.defaults = {
            hoverClass    : 'sfHover',
            pathClass    : 'overideThisToUse',
            pathLevels    : 1,
            delay        : 800,
            animation    : {opacity:'show'},
            speed        : 'normal',
            autoArrows    : true,
            dropShadows : true,
            disableHI    : false,        // true disables hoverIntent detection
            onInit        : function(){}, // callback functions
            onBeforeShow: function(){},
            onShow        : function(){},
            onHide        : function(){}
        };
        $.fn.extend({
            hideSuperfishUl : function(){
                var o = sf.op,
                    not = (o.retainPath===true) ? o.$path : '';
                o.retainPath = false;
                var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
                        .find('>ul').hide().css('visibility','hidden');
                o.onHide.call($ul);
                return this;
            },
            showSuperfishUl : function(){
                var o = sf.op,
                    sh = sf.c.shadowClass+'-off',
                    $ul = this.addClass(o.hoverClass)
                        .find('>ul:hidden').css('visibility','visible');
                sf.IE7fix.call($ul);
                o.onBeforeShow.call($ul);
                $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
                return this;
            }
        });

    })(jQuery);

    //]]>
    </script>


    <script>

        $(document).ready(function(){
            $(&quot;ul.menu-secondary&quot;).superfish({
                pathClass:  &#39;current&#39;
            });
        });

    </script>

    7. Selanjutnya gan cari code ]]></b:skin> , dan letakkan code berikut tepat diatas kode ]]></b:skin>


    .menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;}
    .menus ul{position:absolute;top:-999em;100%;}
    .menus ul li{width:100%}
    .menus li:hover{visibility:inherit}
    .menus li{float:left;position:relative}
    .menus a{display:block;position:relative}
    .menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
    .menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
    .menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
    .menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
    .menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
    .sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
    .menus .sf-shadow ul.sf-shadow-off{background:transparent}
    .menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background: #BDB76B; width: 100%;}
    .menu-secondary{height:40px}
    .menu-secondary ul{min-width:160px}
    .menu-secondary li a{color:#1B1A1A;padding:13px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif; border-right: 1px solid #A52A2A;}
    .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background: #C3C3C3;outline:0;}
    .menu-secondary li li a{color::#A52A2A;background:#FFEBCD;padding:10px 15px;text-transform:none;font-weight:normal; border-right: 0;}
    .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#A52A2A;background:#FFEBCD;outline:0}
    .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
    .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
    .menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}

    Untuk menyesuaikan warna dengan keinginan sobat, silahkan ganti tulisan-tulisan yang berwarna merah dengan warna yang gan sukai, untuk melihat kode-kode warna, silahkan kunjungi beberapa artikel saya :
    - Kode Warna 238 Warna
    - Tabel & Kode Warna
    *!! Tapi untuk mengubah-ubah warnanya, saya harap itu belakangan saja karena belum bisa dilihat/dipratinjau

    8. Selanjutnya cari kode <div id='content-wrapper'> jika gan tidak menemukan kodenya coba kode yang satu ini <div class='content'>, jika sudah ketemu, letakkan kode berikut di atas kode <div id='content-wrapper'> atau <div class='content'> :

     
    <div class='menu-secondary-wrap'>
    <ul class='menus menu-secondary'>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>Kategori1</a>
    <ul class='children'>
    <li><a href='#'>Sub Kategori1</a></li>
    <li><a href='#'>Sub Kategori1</a></li>
    <li><a href='#'>Sub Kategori1</a></li>
    </ul>
    </li>
    <li><a href='#'>Kategori2</a>
    <ul class='children'>
    <li><a href='#'>Sub Kategori2</a></li>
    <li><a href='#'>Sub Kategori2</a></li>
    <li><a href='#'>Sub Kategori2</a>
    <ul class='children'>
    <li><a href='#'>sub menu kategori2</a>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='#'>Kategori3</a>
    <ul class='children'>
    <li><a href='#'>Sub Kategori3</a>
    <ul class='children'>
    <li><a href='#'>Sub menu Kategori3</a></li>
    <li><a href='#'>Sub menu Kategori3</a></li>
    <li><a href='#'>Sub menu Kategori3</a></li>
    </ul>
    </li>
    <li><a href='#'>Sub Kategori3</a></li>
    <li><a href='#'>Sub Kategori3</a></li>
    <li><a href='#'>Sub Kategori3</a></li>
    </ul>
    </li>
    <li><a href='#'>Kategori4</a></li>
    <li><a href='#'>Kategori5</a>
    <ul class='children'>
    <li><a href='#'>Sub Kategori5</a></li>
    <li><a href='#'>Sub Kategori5</a></li>
    </ul>
    </li>
    <li><a href='#'>Kategori6</a></li>
    <li><a href='#'>Kategori7</a></li>
    </ul>
    </div>

    *!! Silahkan gan ganti tanda pagar (#) dengan link tujuan menu tersebut !!*
    *!! Silahkan ganti tulisan "Kategori, Sub Kategori, dan Sub Menu Kategori" dengan keinginan gan masing-masing !!*

    9. Coba gan pratinjau terlebih dahulu, jika tidak ada gangguan, silahkan simpan templatenya, dan silahkan gan ubah-ubah warna, dan tulisan-tulisannya.

    Sekian dulu desain yang Pertama, saya akan meng-share desain yang kedua segera, karena saya sedang sibuk jadi saya tidak sempat untuk mengsharenya sekaligus. Dan saya akan segera menerbitkan live demo untuk desain yang pertama. Thanks.


    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    Selamat mencoba..


    *jangan lupa komentarnya ya gan.. :D

    { 1 comments... read them below or add one }

    Peraturan yang harus diikuti ketika membuat komentar :
    1. Tidak Membuat Link Aktif
    2. Tidak SPAM
    3. Menggunakan Bahasa Yang Sopan
    4. Tidak Berhubungan Dengan SARA, Seks, dan Judi

    Selamat Berkomentar..
    Terima Kasih Atas Kerjasamanya.. ^_^

    Show Konversi KodeHide Konversi Kode Show Emoticon

  • Copyright © 2013 - Nisekoi - All Right Reserved

    ANS Home Powered by Blogger - Designed by Johanes Djogan