29 June 2015

Membuat Phantom Top Menu Dengan Versi Mobile Khusus

Phantom Responsive Top Menu

Phantom Top Menu ini saya dapatkan dari salah satu template buatan @Arlina yaitu Phantom Blogger Template, tadinya saya hanya melihat menu ini dari tampilan desktop saja, dan saya mencoba melihat tampilan responsivenya, dan melihat top menunya berubah Style menjadi Left Menu, pokoknya keren baget dehh... 😎

Nah Untuk yang pengen tau nih tampilan aslinya seperti apa, langsung aja deh cek demonya..

Buat yang gak punya HP / Android, coba aja kecilin ukuran browsernya sampai berukuran seperti Mobile, dan lihat tampilannya..

Jika sobat tertarik untuk memasang phantom top menu pada blog sobat, ikuti tutorial dibawah ini. 👇


<div class='top-navigation' id='primary-navigation' role='navigation'>
<div class='navigation-item'>
<ul class='top-menu-items top-menu' id='top-menu-items'>
<li><a href='/'><i class='fa fa-home'></i> Home</a></li>
<li><a href='#contact'><i class='fa fa-envelope'></i> Contact</a></li>
<li><a href='#sitemap'><i class='fa fa-list'></i> Sitemap</a></li>
<li><a href='#disclaimer'><i class='fa fa-check-circle'></i> Disclaimer</a></li>
<li><a href='#'>Menu</a>
<ul class='sub-menu'>
<li><a href='#'>Bangsa Indonesia</a></li>
<li><a href='#'>Indonesia Maju</a></li>
<li><a href='#'>Indonesia Merdeka</a></li>
</ul>
</li>
<li><a href='#'>Menu</a>
<ul class='sub-menu'>
<li><a href='#'>Menu 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
</ul>
</li>
</ul>
<form action='/search' class='searchform' id='searchform' method='get' role='search'>
<div>
<div class='hamburger hamburger-search'></div>
<input class='field' id='s' name='q' placeholder='Search' type='text'/>
</div>
</form>
</div>
</div>
<a class='mobile-menu' href='#primary-navigation'>
<div class='hamburger hamburger-menu'></div></a>

Note : Biasanya pada gak tau nih HTML ini di letakan dimana.. HTML ini di letakan pada template > Edit HTML, Gunakan fungsi Ctrl + F untuk mencari bagian untuk meletakan HTML tersebut, atau sobat juga bisa meletakannya di wrapper atau di atas body...

CSS Letakan di atas ]]></b:skin> atau </style>

/* CSS Indominus Phantom Top Navigation */
.top-navigation{font-family:Arial;background-color:rgba(255,255,255,.98);margin:auto;padding:0;border-bottom:1px solid #eaeaea}.top-menu,.top-menu *{margin:0;padding:0;list-style:none}.top-menu>li{float:left}.top-menu li{position:relative}.top-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99}.top-menu li:hover>ul,.top-menu li.top-menuhover>ul{display:block}.top-menu a{display:block;position:relative;text-decoration:none;}.top-menu-items a{font-size:12px;padding:18px;color:#333;letter-spacing:.5px}.top-menu-items a:hover,.top-menu-items a:visited:hover{background-color:#fff;color:#07ACEC}.top-menu-items .sub-menu a:hover{background-color:rgba(7, 172, 236, 0.98);color:#fff}.hamburger-menu:before{content:"\f0c9";font-family:FontAwesome}.top-menu ul ul{top:0;left:100%}.top-menu-arrow>li>.top-menu-inner:focus:after,.top-menu-arrow>li:hover>.top-menu-inner:after{border-top-color:#07ACEC}.top-menu-arrow>.top-menuhover>.top-menu-inner:after,.top-menu-items .sub-menu .top-menu-arrow>a>.top-menu-inner:after{border-top-color:#fff}.top-menu-arrow .top-menu-inner{padding-right:2.5em}.sub-menu a{padding:15px;color:#fff}.top-menu-arrow .top-menu-inner:after{content:'';position:absolute;top:50%;right:1em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:rgba(0,0,0,.5)}.top-menu-arrow ul .top-menu-inner:after{margin-top:-5px;margin-right:-3px;border-color:transparent;border-left-color:rgba(255,255,255,.7)}.top-menu-arrow ul li>.top-menu-inner:focus:after,.top-menu-arrow ul li:hover>.top-menu-inner:after,.top-menu-arrow ul .top-menuhover>.top-menu-inner:after,.top-menu-arrow ul .top-menu-items .sub-menu a>.top-menu-inner:after,.top-menu-items .sub-menu .top-menu-arrow ul a>.top-menu-inner:after{border-left-color:#fff}.top-menu-items{width:74.57627%;float:left;margin-right:1.69492%}.top-menu-items .top-menuhover,.top-menu-items .sub-menu a{background-color:rgba(25,25,25,.9)}.widget-master .widget_nav_menu div{padding:0}.sider-page,.sider-fixed-top,.sider-fixed-bottom,.sider-menu.sider-horizontal>.sider-panel{transition:none .4s ease;transition-property:top,right,bottom,left,border}html.sider-opened .sider-page,html.sider-opened #sider-blocker{left:0;top:0;margin:0;border:0 solid transparent}html.sider-opening .sider-page,html.sider-opening #sider-blocker{border:0 solid rgba(100,100,100,0)}.sider-menu .sider-hidden{display:none}.sider-fixed-top,.sider-fixed-bottom{position:fixed;left:0}.sider-fixed-top{top:0}.sider-fixed-bottom{bottom:0}html.sider-opened .sider-page,.sider-menu>.sider-panel{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}html.sider-opened{overflow-x:hidden;position:relative}html.sider-opened .sider-page{position:relative}html.sider-background .sider-page{background:inherit}#sider-blocker{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)transparent;display:none;width:100%;height:100%;position:fixed;z-index:999}html.sider-opened #sider-blocker,html.sider-blocking #sider-blocker{display:block}.sider-menu.sider-current{display:block}.sider-menu a:hover{color:#fff}.sider-menu{background:inherit;display:none;overflow:hidden;height:100%;padding:0;position:fixed;left:0;top:0;z-index:0}.sider-menu>.sider-panel{background:inherit;-webkit-overflow-scrolling:touch;overflow:scroll;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;padding:0;position:absolute;top:0;left:100%;z-index:0}.sider-menu>.sider-panel.sider-opened{left:0;padding:0}.sider-menu>.sider-panel.sider-subopened{left:-40%}.sider-menu>.sider-panel.sider-highest{z-index:1}.sider-menu>.sider-panel.sider-hidden{display:block;visibility:hidden}.sider-menu .sider-list{padding:0}.sider-menu>.sider-list{padding:20px 0 40px}.sider-panel>.sider-list{margin-left:0;margin-right:0;width:100%;float:none}.sider-panel>.sider-list:first-child{padding-top:0}.sider-list,.sider-list>li{list-style:none;display:block;padding:0;margin:0}.sider-list{font:inherit;font-size:14px}.sider-list a,.sider-list a:hover{text-decoration:none;font-size:14px}.sider-list>li{position:relative}.sider-list>li>a,.sider-list>li>span{font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:inherit;line-height:20px;display:block;padding:10px 10px 10px 20px;margin:0}.sider-list>li:not(.sider-subtitle):not(.sider-label):not(.sider-noresults):after{content:'';border-bottom-width:1px;border-bottom-style:solid;display:block;width:100%;position:absolute;bottom:0;left:0}.sider-list>li:not(.sider-subtitle):not(.sider-label):not(.sider-noresults):after{width:auto;margin-left:20px;position:relative;left:auto}.sider-list a.sider-subopen{background:#292929;width:40px;height:100%;padding:0;position:absolute;right:0;top:0;z-index:2}.sider-list a.sider-subopen:hover{background:#07ACEC}.sider-list a.sider-subopen:before{content:'';border-left-width:1px;border-left-style:solid;display:block;height:100%;position:absolute;left:0;top:0}.sider-list a.sider-subopen.sider-fullsubopen{width:100%}.sider-list a.sider-subopen.sider-fullsubopen:before{border-left:none}.sider-list a.sider-subopen+a,.sider-list a.sider-subopen+span{padding-right:5px;margin-right:40px}.sider-list>li.sider-selected>a.sider-subopen{background:transparent}.sider-list>li.sider-selected>a.sider-fullsubopen+a,.sider-list>li.sider-selected>a.sider-fullsubopen+span{padding-right:45px;margin-right:0}.sider-list a.sider-subclose{text-indent:20px;padding-top:30px;margin-top:-20px}.sider-list>li.sider-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:10px;text-transform:uppercase;text-indent:20px;line-height:25px;padding-right:5px}.sider-list>li.sider-spacer{padding-top:40px}.sider-list>li.sider-spacer.sider-label{padding-top:25px}.sider-list a.sider-subopen:after,.sider-list a.sider-subclose:before{content:'';border:2px solid transparent;display:block;width:7px;height:7px;margin-bottom:-5px;position:absolute;bottom:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.sider-list a.sider-subopen:after{border-top:none;border-left:none;right:18px}.sider-list a.sider-subclose:before{border-right:none;border-bottom:none;margin-bottom:-15px;left:22px}.sider-menu.sider-vertical .sider-list .sider-panel{display:none;padding:10px 0 10px 10px}.sider-menu.sider-vertical .sider-list .sider-panel li:last-child:after{border-color:transparent}.sider-menu.sider-vertical .sider-list li.sider-opened>.sider-panel{display:block}.sider-menu.sider-vertical .sider-list>li.sider-opened>a.sider-subopen{height:40px}.sider-menu.sider-vertical .sider-list>li.sider-opened>a.sider-subopen:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:16px;right:16px}html.sider-opened .sider-page{box-shadow:0 0 10px rgba(0,0,0,.2)}.sider-ismenu{background:#363636;color:rgba(255,255,255,.7)}.sider-menu .sider-list>li:after{border-color:rgba(0,0,0,.15)}.sider-menu .sider-list>li>a.sider-subclose{background:rgba(0,0,0,.1);color:rgba(255,255,255,.3)}.sider-menu .sider-list>li>a.sider-subopen:after,.sider-menu .sider-list>li>a.sider-subclose:before{border-color:rgba(255,255,255,.5)}.sider-menu .sider-list>li>a.sider-subopen:hover:after,.sider-menu .sider-list>li>a.sider-subclose:hover:before{border-color:rgba(255,255,255,1)}.sider-menu .sider-list>li>a.sider-subopen:before{border-color:rgba(0,0,0,.15)}.sider-menu .sider-list>li.sider-selected>a:not(.sider-subopen),.sider-menu .sider-list>li.sider-selected>span{background:rgba(0,0,0,.1)}.sider-menu .sider-list>li.sider-label{background:rgba(255,255,255,.05)}.sider-menu.sider-vertical .sider-list li.sider-opened>a.sider-subopen,.sider-menu.sider-vertical .sider-list li.sider-opened>ul{background:rgba(255,255,255,.05)}html.sider-opening .sider-page,html.sider-opening #sider-blocker,html.sider-opening .sider-fixed-top,html.sider-opening .sider-fixed-bottom{left:80%}.sider-menu{width:80%}.flex-direction-nav{padding:5px 0;overflow:hidden}.flex-direction-nav .flex-prev{float:left}.flex-direction-nav .flex-next{float:right}.searchform{width:0;float:right;margin-right:20px;position:relative;color:#ddd;}.searchform div{position:relative;float:right}.searchform .hamburger{display:inline-block;color:#999;right:8px;top:20px;width:18px;height:18px;line-height:18px;font-size:15px;position:absolute}.hamburger-search:before{content:"\f002";font-family:FontAwesome}.searchform .field{padding:10px;background-color:transparent;margin-top:9px;border:1px solid #eaeaea;padding-left:8px;width:210px;transition:all 400ms ease-in-out 0s}.searchform .field:focus{border-color:#dadada}@media screen and (min-width:641px){#menu-utama{display:block;position:fixed;z-index:99;width:100%;margin:auto;max-width:100%;-webkit-transform:translateZ(0)}.mobile-menu,.tinynav{display:none}.searchform,.main-navigation-items{display:block}}@media screen and (max-width:640px){.top-menu-items a:hover,.top-menu-items a:visited:hover,.top-menu-items .top-menuhover,.top-menu-items .sub-menu a{background-color:#07ACEC;color:#fff}.mobile-menu{display:block;position:fixed;width:100%;background:#fff;z-index:50;-webkit-transform:translateZ(0);opacity:.96;border-bottom:1px solid #e9e9e9}.mobile-menu .hamburger{display:inline-block;background:#07ACEC;font-size:25px;padding:10px;color:#fff;cursor:pointer}.mobile-menu .hamburger:hover{display:inline-block;background:#292929;color:#fff}#menu-utama,.searchform,.main-navigation-items{display:none}.tinynav{display:block}}@media all and (min-width:550px){.sider-menu{width:440px}html.sider-opening .sider-page,html.sider-opening #sider-blocker,html.sider-opening .sider-fixed-top,html.sider-opening .sider-fixed-bottom{left:440px}}@media all and (max-width:175px){.sider-menu{width:140px}html.sider-opening .sider-page,html.sider-opening #sider-blocker,html.sider-opening .sider-fixed-top,html.sider-opening .sider-fixed-bottom{left:140px}}

Javascript letakan di atas </body>
<script src='https://cdn.rawgit.com/Arlina-Design/phantom/master/masternav.js'></script>
<script type='text/javascript'>
//<![CDATA[
// Menu
var $=jQuery.noConflict();$(document).ready(function(){$("#primary-navigation").clone().attr("id","menu-utama").insertBefore("#primary-navigation"),$("#primary-navigation ul").removeClass("top-menu"),$("#primary-navigation").mmenu(),$("ul.top-menu").supersubs({minWidth:12,maxWidth:27,extraWidth:1}).superfish({delay:50,animation:{opacity:"show",height:"show"},speed:"fast"}),$("#main-navigation .main-navigation-items").tinyNav({active:"current-menu-item"})}),$(window).load(function(){$(document).imagesLoaded(function(){$("#carousel").flexslider({animation:"slide",controlNav:!1,directionNav:1,prevText: "&laquo; Previous",nextText: "Next &raquo;",animationLoop:1,slideshow:!1,itemWidth:109.5,minItems:4,asNavFor:"#slider"}),$("#slider").flexslider({animation:"slide",controlNav:!1,directionNav:1,prevText: "&laquo; Previous",nextText: "Next &raquo;",animationLoop:1,slideshowSpeed:5e3,sync:"#carousel"})})});
//]]>
</script>


Selesai..  Selamat Mencoba.. 😇

Baca Juga : Membuat Top Menu dengan Kotak Pencarian di Blog

Semoga Tutorial Ini bermanfaat..
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic