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(){
        $("ul.menu-secondary").superfish({
            pathClass: 'current'
        });
    });

</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.

priyoga pratama

Membuat Menu Drop Down

Tidak ada komentar:

Posting Komentar

foto ogoh-ogoh

Translate

Kunjungan

Mengenai Saya

Arsip Blog

join my site

Populer post