Saturday, September 22, 2012

membuat menu drop down


  • Pertama sobat masuk ke dasbor blogspot atau blogger sobat, pilih Template >> Edit HTML >> centang Expand Template Widget, tapi sebelumnya jangan lupa download/backup templatenya dulu, buat jaga-jaga bila terjadi kesalahan dalam pembuatan drop down nya
  •  Selajuntnya sobat cari kode </body> dan letekan kode berikut tepat diatas kode </body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
  • Setelah itu sobat kemudian letekan kode berikut tepat diatas kode tadi
<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>
  • Jika di blog sobat sudah ada kode Jquery versi berapapun disarankan tidak menambahkan kode diatas karna akan terjadi biasanya sering terjadi galat
  • Selanjutnya sobat cari code berikt ]]></b:skin> Untuk mempermudah pencarian sobat bisa gunakan F3 atau ctrl +F 
  • Selanjutnya sobat copy code berikut dan paste diatas code ]]></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 menu dengan blog sobat silahkan sobat ganti kode yang berwarna pink dengan warna yang sesuai dengan blog sobat.
  • Masih di edit HTML sobat cari kode <div id=’content-wrapper’> setelah itu letakan kode dibawah tepat diatas kode <div id=’content-wrapper’> atau pada template standar saya meletekannya di atas kode <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>
  •  Selanjutnya sobat ganti tanda # dengan link sobat dan jangan lupa untuk tulisan kategori1 sampai kategori7 sesuaikan dengan keinginan sobat.

BERKOMENTARLAH YANG SANTUN, JANGAN SPAM, AYO BERKOMENTARLAH DISINI. . .

Ditulis Oleh : I Gusti Ngurah Made Ardika ~ Mari Berbagi dan Belajar Bersama

Artikel membuat menu drop down ini diposting oleh I Gusti Ngurah Made Ardika pada hari Saturday, September 22, 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

2 komentar:

artikel yg patut diacungi banyak jempol serta tampilan blog yg sangat serasi dengan tampilan artikel, sungguh membuat pengunjung betah berlama lama disini dan tak heran juga blog ini selalu dibanjiri banyak pengunjung...


#Salam Sehat Selalu

oh iya sob, jangan lupa follow balik ya :)

Nah ini baru nama tips yang mudah diterapkan. makasih ya gan....

Post a Comment

Mari kita saling berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada sobat yang lain agar lebih bermanfaat. Terima kasih, Salam Blogger . . .