Membuat Phantom Top Menu Dengan Versi Mobile Khusus
29 June 2015
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: "« Previous",nextText: "Next »",animationLoop:1,slideshow:!1,itemWidth:109.5,minItems:4,asNavFor:"#slider"}),$("#slider").flexslider({animation:"slide",controlNav:!1,directionNav:1,prevText: "« Previous",nextText: "Next »",animationLoop:1,slideshowSpeed:5e3,sync:"#carousel"})})});
//]]>
</script>Selesai.. Selamat Mencoba.. 😇
Baca Juga : Membuat Top Menu dengan Kotak Pencarian di Blog
Semoga Tutorial Ini bermanfaat..