» » Menu Navigasi Horizontal Dropdown versi 2

Menu Navigasi Horizontal Dropdown versi 2

Menu Navigasi Horizontal Dropdown versi 2


Hai sobat blogger ! Sudah beberapa bulan saya vacuum dari dunia blogger, kali ini saya akan menyempatkan diri untuk memposting artikel yang mungkin hanya sekedar tindak lanjut dari postingan sebelumnya mengenai menu navigasi dropdown horizontal. Kali ini menu tersebut lebih elegan dengan tambahan Javascript yang indah serta background yang menarik. Untuk previewnya bisa anda lihat pada gambar diatas. Bagaimana ? tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda 
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>
Kode
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}.menus ul{position:absolute;top:-999em;width: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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNRSwdS3p-YsrNWFwrjV8iNhEKn_WuoCo5LL19gYqhcvO8M5K_qQg5ME8JR0bsxaWJ5YlVyvjUYGZabNNJycEYYZVsQ-D5OohHpuFhAbTwhQ-ycfX4EnEXowCv1UPmeZwpgr16xmWA3Q8/s1600/menu-secondary-background.jpg) left top repeat-x}.menu-secondary{height:40px}.menu-secondary ul{min-width:160px}.menu-secondary li a{color:#FFF;padding:14px 15px 10px 15px;text-decoration:none;border-right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7cqV5XZs785KWkAPC7RkIRA7qtAKNU4FPHJsxoeFsBg46kRLuttuyrzDVS66Cmfur37vpOlH2pYg5N-lSHFHIjLzLt1YiHIakmkMJEkUQt9ydJ4yMoDOee781wL5VnEpy5qh5V_rQTzA/s1600/topmenu_border_blue.jpg) 100% 1px no-repeat;color:#fff;text-transform:uppercase;text-shadow:0 1px 0 #444;font:bold 12px Arial,Helvetica,Sans-serif}.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover &gt;a,.menu-secondary li.current-cat &gt;a,.menu-secondary li.current_page_item &gt;a,.menu-secondary li.current-menu-item &gt;a{color:#FFF;text-shadow:0 1px 0 #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTs6jaD9FRJeWhKXPcl1ylv2NHlpspuTkLkb_qwkJYdCugGSmbpDuW5_U1qahY-iQjQCXhLvrCAmsB3cFCj3WQSa2YdTnM3YFYR3flHsKH-wa8cxrw6k5QoxtPyGoH8JcnZqmnqQzIlg/s1600/Highlight.png);left -140px repeat-x;outline:0}..menu-secondary li.home{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr84spr4YoM_maQvpTqVh4nXWaUFc2nKMHCLQwRkJrx-69QFL2wftB8Bb769bcTYbE2Lc1KdPKAFpECQvXGa6sBEVBd7V5PRjfwoUb1hwi8Hbk_mmCiFmqjPQjANSQYhv3VF6mQJtFhW8/s1600/bk_menu_blue.jpg)}.menu-secondary li li a{color:#FFF;background:#3D79E1;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover &gt;a,.menu-secondary li li.current-cat &gt;a,.menu-secondary li li.current_page_item &gt;a,.menu-secondary li li.current-menu-item &gt;a{color:#000;background:#9EBCF0;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:12px 13px 0 0}.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}.menu-secondary-wrap .sf-shadow ul{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Vm9H-b4SNRIL4ohvOsPJRC8zcOg_w_ZvV3fsO3uEmGq1QyKk_eYiMLRaLnfBMiBRcXYQ1wF5Ja9MlzWoMl5zYG-bnX9CcLSVCpd59u7mhlSUNiXIml0I4PMLNk7o0KPXlG6TPjXHxG3U/s1600/menu-secondary-shadow.png&#39;) no-repeat bottom right}
7.) Cari kode </head>, letakkan kode dibawah ini tepat diatas kode </head>
Kode 
<script type='text/javascript'>
//<![CDATA[
;(function($){
$.fn.superfish = function(op){

var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> &#187;</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 = [c.menuClass];
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>
8.) Lalu letakkan kode dibawah ini tepat dibawah </head>
Kode 
<script type='text/javascript'>/* <![CDATA[ */jQuery.noConflict();jQuery(function(){ jQuery('ul.menu-primary').superfish({ animation: {opacity:'show'},autoArrows: true, dropShadows: false, speed: 200, delay: 800 }); });jQuery(function(){ jQuery('ul.menu-secondary').superfish({ animation: {opacity:'show'},autoArrows: true, dropShadows: false, speed: 200, delay: 800 }); });jQuery(document).ready(function() {jQuery('.fp-slides').cycle({fx: 'fade',timeout: 4000,delay: 0,speed: 400,next: '.fp-next',prev: '.fp-prev',pager: '.fp-pager',continuous: 0,sync: 1,pause: 1,pauseOnPagerHover: 1,cleartype: true,cleartypeNoBg: true}); });/* ]]> */</script>
9.) Cari kode <div id='header-inner'> lalu scroll / cari sedikit kebawah sampai anda menemukan kode </b:section>
10. Lalu letakkan kode dibawah ini tepat dibawah kode </b:section> tersebut atau anda bisa ganti kode navigasi yang anda gunakan di blog anda sekarang
Kode 
<div class='menu-secondary-wrap'><ul class='menus menu-secondary'><li class='home'><a href='#' title='homepage'><img alt='homepage' border='0' height='18px' src='http://png-3.findicons.com/files/icons/60/doodle/24/home.png' style='center' width='18px'/></a></li><li><a href='#'>Menu Link</a><ul class='children'><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li></ul></li><li><a href='#'>Menu Link</a></li><li><a href='#'>Menu Link</a></li><li><a href='#'>Menu Link</a></li></ul></div>
11.) Ganti # dengan URL yang akan dituju
Ganti Menu Link dengan nama yang akan ditampilkan dalam menu utama.
Ganti Sub-menu Link dengan nama yang akan menjadi menu yang berada di bawah menu utama
12.) Simpan dan lihat hasilnya



Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Contact Us

Nama

Email *

Pesan *

Back To Top