Cara membuat menu Drop Down Versi Mobile, HP dan Versi Komputer
Menu Drop Down ini bisa digunakan dan bisa tampil untuk versi mobile, HP dan versi web (dekstop/pc/laptop).
Contoh gambar
Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :
Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuhorizontal{
background: #222222 repeat-x;
width:100%;
margin:0 auto;
padding:0 auto
}
#menuhorizontal1{
position:static;
width:100%;
height:30px;
margin:0 auto
}
.clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%}
#submenubarhorizontal,#submenubarhorizontal ul{
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0
}
#submenubarhorizontal a{
display:block;
text-decoration:none;
font-size:11px;
font-weight:700;
text-transform:uppercase;
color: #ff9900;
border-right:1px solid #222222;
padding:12px 10px 8px
}
#submenubarhorizontal
a.trigger{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGfAPlkBbmijvQ7VDiz4pBig1Ojb1kcuo2eFIoXT7iaNujPuMVLE4yONw8FyUyJcBjU5WdmY9vR4tT3V07xQIkmW11b7KNVmyT0mRP2lgoa8EWLniL0ZY49rLmB72gz2lxgM7G0CYmlw/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:12px 24px 8px 10px
}
#submenubarhorizontal li{
float:left;
position:static;
width:auto
}
#submenubarhorizontal li ul,
#submenubarhorizontal ul li{
width:170px
}
#submenubarhorizontal ul li a{
text-align:left;
color:#fff;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;border:none;padding:5px 10px
}
#submenubarhorizontal li ul{z-index:100;position:absolute;
display:none;
background:#C50A0A;padding-bottom:5px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
}
#submenubarhorizontal li:hover ul,
#submenubarhorizontal li.hvr ul{display:block}
#submenubarhorizontal li:hover ul a,
#submenubarhorizontal li.hvr ul a{color:#edfdfd;
background-color:transparent;
text-decoration:none
}
#submenubarhorizontal li ul li.hr{border-bottom:1px solid #444;
border-top:1px solid #000;
display:block;font-size:1px;
height:0;line-height:0;
margin:4px 0
}
#submenubarhorizontal ul a:hover{
background-color:#ff9900!important;
color:#fff!important;text-decoration:none
}
Kemudian cari kode
<header> : untuk menu di atas header blog
</header>: untuk menu di bawah header blog
Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> untuk menu diatas header dan atau diatas kode </header> untuk menu dibawah header
<div id='menuhorizontal'>
<div id='menuhorizontal1'>
<ul id='submenubarhorizontal'>
<li><a href=' nama-alamat-blog.html ' target='new'>Home</a></li>
<li><a class='trigger'>nama menu 1</a>
<ul><li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target= ' new '>sub nama menu 1</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target= ' new '> sub nama menu 1</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target=' new '> sub nama menu 1</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> sub nama menu 1</a></li>
</ul></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>nama menu </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>nama menu</a></li>
<li><a class='trigger'>nama menu 2</a>
<ul><li class='hr'/>
<li><a href='nama-alamat-blog.html ' target=' new '>sub nama menu 2</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='_blank '> sub nama menu 2</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> sub nama menu 2</a></li>
</ul></li>
<li><a class='trigger'>nama menu 3</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> sub nama menu 3</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new'> sub nama menu 3</a></li>
</ul></li>
<li><a class='trigger'>nama menu 4</a>
<ul><li class='hr'/>
<li><a href= ' nama-alamat-blog.html '>Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href= ' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
</ul></li>
<li><a href=' nama-alamat-blog.html ' target='new '> nama menu </a></li>
</ul>
</ul>
<br class='clearit'/></div>
<div style='clear:both;'/></div>
Keterangan
Kode berwarna merah adalah warna background utama
Kode warna coklat adalah warna teks utama
Kode berwarna biru adalah lebar menu
Kode warna hijau adalah garis pembatas menu
Kode warna biru langit adalah warna background sub menu
Nama alamat blog adalah Url tujuan, ganti dengan Url pada blognya kawan
Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.
http://ketutjoel.blogspot.co.id/2014/07/cara-membuat-menu-drop-down-versi.html
Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP
MENU navigasi blog responsive dropdown berikut ini khusus hanya muncul di tampilan versi mobile (HP/SmartPhone), tidak muncul di komputer desktop.
Bagaimana Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP saja? Yang pernah CB praktikkan adalah sebagai berikut:
1. Letakkan kode berikut ini DI ATAS kode </head>
<style type="text/css">
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>
2. Letakkan kode berikut ini DI ATAS kode <div id='header-wrapper'>
<div class="mobileShow">
<div style='background-color:#ddd;height:20px;padding:10px;text-align:right'>
<a href="/">Home</a> -
<a href="#">About</a> -
<a href="#">Sitemap</a> -
<a href="#">Contact</a> -
<a href="#">Link</a>
</div>
</div>
Anda juga bisa meletakkannya di bawah kode <div id='header-wrapper'> jika ingin memunculkan menu khusus versi mobile ini di bawah logo/nama blog, tapi nanti akan "bentrok" dengan menu versi mobile yang sudah ada.
3. Save Template!
4. Test langsung di HP Anda!
Sumber: HubSpot.
Cara Lain Membuat Menu Navigasi Blog Khusus buat Tampilan di HP
Cara lainnya adalah sebagai berikut. Namun, sebelumnya Anda bisa lihat dulu DEMO. Minimize browser Anda!
Gambarnya navigasi menu responsive dropdown khusus HP sebagai berikut (tampilan mobile saja, di dekstop gak muncul):
Menu Navigasi Khusus HP
Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini di bawah kode <head> atau di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Catatan:
Jika di template blog Anda sudah ada tiga kode di atas --jQuery library, FontAwesome, dan font Oswald, abaikan langkah di atas!
3. Copas kode berikut ini di atas kode </head>
<style>
.sf-menu a.home:before,#searchnya button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}.highlight{background-color:#f09903;color:#1a1308}#searchnya{float:right;width:80%;position:relative;right:0}.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}#searchnya input{padding:5px 10px;width:75%;margin:5px 0 0;background-color:#FFF;height:21px;box-shadow:1px 2px 4px #A2A2A2 inset;position:relative}#searchnya input,#searchnya button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:oswald;color:#BDB5B5;font-weight:400}#searchnya button{background-color:#6FC415;padding:0;width:15%;height:31px;margin-right:5px;cursor:pointer;position:relative;top:0}#searchnya button:hover{background:#76D314}
#navitions{background-color:#242729;border-bottom:0px solid #6FC415;box-shadow:0 1px 9px #666;display:none}#mobilenav{display:none}#nav1{height:40px;position:relative;background:#242729;box-shadow:1px 2px 9px #6FC415}.sf-menu,.sf-menu *{list-style:none;margin:0;padding:0}.sf-menu li{white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}.sf-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}.sf-menu > li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:block}.sf-menu a{display:block;position:relative;height:40px;line-height:40px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0 15px; font-family:oswald; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}.sf-menu > li > a{font-size:105%;font-family:oswald}.sf-menu ul ul{top:0;left:100%}.sf-menu{float:left}.sf-menu a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}.sf-menu li:hover{background:#222}.sf-menu ul li{background-color:#242729}.sf-menu ul li:hover{background-color:#333}.sf-menu ul a{font-weight:400;height:30px;line-height:30px;font-family:oswald,arial}.sf-menu ul ul li{background:#3C3C3C}.sf-menu li:hover > a,.sf-menu li.sfHover,.sf-menu > li > a.current{-moz-transition:none;-webkit-transition:none;transition:none}.sf-arrows .sf-with-ul{padding-right:1em}.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows > li > .sf-with-ul:focus:after,.sf-arrows > li:hover > .sf-with-ul:after,.sf-arrows > .sfHover > .sf-with-ul:after{border-top-color:#FFF}.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent transparent transparent #FFF}.sf-arrows ul li > .sf-with-ul:focus:after,.sf-arrows ul li:hover > .sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-left-color:#FFF}.sf-menu li > i{position:absolute;top:15px;right:15px;width:27px;height:22px;cursor:pointer;display:none;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px Verdana,Geneva,sans-serif}.sf-menu li > i:after{content:'+';color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}.sf-menu li ul li i:after{left:3px;font-size: 16px;top: -1px;} .sf-menu li ul li i.active:after {left: 4px;font-size: 26px;top: -8px;}
.sf-menu li > ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;}
.sf-menu li > i.active:after{content:'-';font-size:36px;top:-14px}.sf-menu a.home{position:relative}.sf-menu a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}.sf-menu a.home:before,#view a:before{text-indent:0}html {-webkit-text-size-adjust: 100%;}
@media only screen and (max-width:320px){#searchnya input{width:67%}}
@media only screen and (max-width:768px) {
#navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:35px;top:4px;left:10px;position:absolute;height:32px;outline:0;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#fff}#mobilenav:before{content:"f0c9";top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px 10px}#menunav li{float:none;margin:0}#menunav > li{margin:1px 0}.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px 20px;border:0}.sf-menu a:hover{background-color:#2c2c2c!important}.sf-menu ul{position:static;padding-top:0}.sf-menu ul a{padding-left:30px}.sf-menu ul ul li a{padding-left:50px; }.sf-menu ul ul ul li a{padding-left:60px; }.sf-menu a.home,.sf-menu li:hover > a.home,.sf-menu > li > a.current{color:#FFF;background-color:#cd2122}.sf-menu ul a:hover{padding-left:40px}.sf-menu ul ul a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover > a,.sf-menu li.sfHover{background-color:transparent}.sf-menu a.home:before,#mbt-search-layout button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit}
}
</style>
<script type='text/javascript'>
//<![CDATA[
// Superfish v1.7.2 - jQuery menu widget - Joel Brich
(function(b){var a=(function(){var p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var c=document.documentElement.style;return("behavior" in c&&"fill" in c&&/iemobile/i.test(navigator.userAgent))})(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)})}})(),m=function(s,t){var c=p.menuClass;if(t.cssArrows){c+=" "+p.menuArrowClass}s.toggleClass(c)},r=function(c,s){return c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+" "+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}).removeClass(s.pathClass)},n=function(c){c.children("a").toggleClass(p.anchorClass)},g=function(c){var s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)},j=function(t,u){var c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}var s="MSPointerDown.superfish";if(!f){s+=" touchend.superfish"}if(k){s+=" mousedown.superfish"}t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)},i=function(t){var s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}else{b.proxy(l,s.parent("li"))()}}},l=function(){var c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")},h=function(){var c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}},q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}},e=function(c){return c.closest("."+p.menuClass)},o=function(c){return e(c).data("sf-options")};return{hide:function(s){if(this.length){var v=this,w=o(v);if(!w){return this}var t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var x=b(this);w.onHide.call(x)})}return this},show:function(){var t=o(this);if(!t){return this}var s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)});return this},destroy:function(){return this.each(function(){var s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return false}clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return v.replace(/display[^;]+;?/g,"")});t.$path.removeClass(t.hoverClass+" "+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")})},init:function(c){return this.each(function(){var t=b(this);if(t.data("sf-options")){return false}var u=b.extend({},b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof d==="object"||!d){return a.init.apply(this,arguments)}else{return b.error("Method "+d+" does not exist on jQuery.fn.superfish")}}};b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true, disableHI:false,onInit:b.noop,onBeforeShow:b.noop, onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop, onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery);
function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false});b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")});function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false});var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})};
//]]>
</script>
4. Copas kode berikut ini di bawah kode <body>
<b:if cond='data:blog.isMobileRequest == "true"'>
<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav1'>
<div id='searchnya'>
<form action='/search'>
<input name='q' onblur='if ('' === this.value) {this.value = 'Search here…';}' onfocus='if ('Search here…' === this.value) {this.value = '';}' type='text' value='Search here…'/>
<button title='Search' type='submit'>
<i class='fa fa-search siy'/>
</button>
</form>
</div>
<a href='#' id='mobilenav'>
Select Menu
</a>
<ul class='sf-menu' id='menunav'>
<li>
<a class='home' expr:href='data:blog.homepageUrl'>
Home
</a>
</li>
<li><a href='#'>LINK TEXT </a></li>
<li><a href='#'>LINK TEXT </a></li>
<li><a href="#">DROPDOWN MENU</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
menunav (jQuery);
//]]>
</script>
</nav>
</div>
</div>
</b:if>
5. Saatnya menyembunyikan Menu Desktop di Mobile Device (Jika navigasi menu blog Anda tidak responsive), yaitu dengan menambahkan Tag Kondisional.
<b:if cond='data:blog.isMobileRequest == "false"'>
Kode Menu Desktop Anda di Sini
</b:if>
6. Save template!
Demikian Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP (tidak muncul di desktop). Good Luck! (http://www.contohblog.com/).*
http://www.contohblog.com/2016/06/membuat-template-bawaan-blogger-jadi-responsive.html
0 Response to "Cara Membuat Menu Drop Down Versi Mobile Pada Blog"
Post a Comment