Home » » Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

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 &gt; li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; 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 &gt; li &gt; 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 &gt; a,.sf-menu li.sfHover,.sf-menu &gt; li &gt; 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:&#39;&#39;;position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows &gt; li &gt; .sf-with-ul:focus:after,.sf-arrows &gt; li:hover &gt; .sf-with-ul:after,.sf-arrows &gt; .sfHover &gt; .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 &gt; .sf-with-ul:focus:after,.sf-arrows ul li:hover &gt; .sf-with-ul:after,.sf-arrows ul .sfHover &gt; .sf-with-ul:after{border-left-color:#FFF}.sf-menu li &gt; 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 &gt; i:after{content:&#39;+&#39;;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 &gt; ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;} 
.sf-menu li &gt; i.active:after{content:&#39;-&#39;;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:&quot;f0c9&quot;;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 &gt; 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 &gt; a.home,.sf-menu &gt; li &gt; 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 &gt; ul,.sf-menu li.sfHover &gt; ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover &gt; 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 == &quot;true&quot;'>
<div id='navitions'>
        <div class='isi'>
          <nav class='navix' id='nav1'>
<div id='searchnya'>
               <form action='/search'>
           <input name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Search here…&apos;;}' onfocus='if (&apos;Search here…&apos; === this.value) {this.value = &apos;&apos;;}' 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/).*

Sumber: MBT

Thanks for reading & sharing Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

Previous
« Prev Post

33 comments:

Comment Page:
  1. Replies
    1. alhamdulillah... kasih screnshotnya tampilan HP dong biar CB muat di sini.... :)

      Delete
  2. not working gan, gmna ya

    ReplyDelete
    Replies
    1. nah itu yang lain berhasil.... templatenya gak responsive kali ya...???

      Delete
    2. ea gan, gmna ya caranya biar responsive

      Delete
  3. sore gan, ada 1 maslah nih pas pake template johny wuss... pas di buka via blackberry saja tombol navigasi/menu tidak respon saat di tekan
    kesalahan dimana ya?
    pengguna blackberry kan masih banyak, sayang kl ga kebuka

    trims ya

    ReplyDelete
    Replies
    1. punya CB baik-baik saja.... mungkin ada kode yang kehapus....?

      Delete
  4. Om saya koreksi sedikit ya
    yang kata align:right'> diganti om jadi center jika nggak digan ti tulisan menu nya akan berada di kanan om. Hehehehe berdasarkan pengalaman

    ReplyDelete
  5. GagaL gan,, code html tdk ada yg error, tapi template tdk bsa disave,, !!!
    Mohon penjeLasan Lanjutnya... :)

    ReplyDelete
  6. div id header weapper tak ada.adany div class, macam mana ini?
    fmmm

    ReplyDelete
  7. Artikel yang sangat bermanfaat. Perlu memakai template nya sendiri kali yan Gan sehingga pada template standar agak susah kerjanya? mohon pencerahan

    Terimakasih.

    ReplyDelete
  8. wah patut di coba ni,, terimakasih gan

    ReplyDelete
  9. 1 pertanyaan gan,, untuk tampilan mobile nya apakah di atur ke khusus atau bagaimana?

    ReplyDelete
  10. @Abdul Kholis, lakukan saja seperti tutorial di atas :)

    ReplyDelete
  11. satu saran.. berikan contoh foto yang sudah agan coba pada blog ini, supaya lebih meyakinkan pengunjung blog yang membutuhakn informasi...
    salam sukses selalu..

    ReplyDelete
  12. min kok di template ane gak ada kode <div id

    ReplyDelete
  13. saya nyari kode <div id='header-wrapper ga ada di HTML blog sya ...

    ReplyDelete
  14. saya nyari kode <div id ga ada mas mba CB

    ReplyDelete
  15. kok gak work ya gan ..mohon pencerahannya

    ReplyDelete
  16. gan, kok template aku kode id='header-wrapper'> gak ada ?

    ReplyDelete
    Replies
    1. kalo gak ada kode itu blognya gak akan ada bagian header buat nama/logo, jadi pasti ada

      Delete
    2. Yg ada headwrapper, tapi sudah aku tes copas kode diatasnya tetap gak bisa

      Delete
  17. mas kalo buat menu yang seperti home, tips seo, free template dll di tampilan mobile gimana ?

    ReplyDelete
  18. kalau cara membuat yang versi mobile tampak seperti versi komputer gmn ya gan,

    ReplyDelete
  19. maaf CB, berhubung artikel ini bermanfaat saya mau tanya yang di maksud Kode menu dekstop itu seperti apa ya? CSSnya kah? tak kondisional? atau apanya?
    saya berharap sekali CB konfirmasi ke email saya dayatlopedia@gmail.com

    ReplyDelete
  20. mf untuk no 5 letakan di mana..thanks

    ReplyDelete
  21. templatenya di save bisa gan, tapi di cek di hp kok gak muncul sama sekali yaa ?

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox