Cara Membuat Phantom Topmenu Responsive

Halo sob , malam ini admin ingin share tutorial blogger yaitu Cara Membuat Phantom Topmenu Responsive yang di publikasikan oleh ArlinaDesign Topmenu ini responsive dengan tampilan melalui smartphone dan tablet gan.

Admin juga mengucapkan terimakasih untuk Idblanter yang sudah republish. Topmenu ini sangat cocok untuk blog yang sudah menggunakan sticky top menu. Di lengkapi dengan searchbox dan submenu topmenu ini menjadi terlihat lengkap gan.

Okelah langsung ke cara pemasangan

Tutorial

Pertama Copypaste CSS tepat diatas ]]></b:skin>

/* 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}}

Copypaste HTML nya dibawah <body> 

<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>

Terakhir Copypaste Javascript diatas </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>

Tinggal Save template , tutorial ini tidak terlalu sulit bagi admin tapi kalau memang agan merasa bingung admin siap bantu silahkan komentarkan saja di kolom komentar gan. Terimakasih sudah berkunjung.

Title: Cara Membuat Phantom Topmenu Responsive
Posted by:Unknown
Published :2015-06-30T21:36:00+07:00
Rating: 3.5
Reviewer: 5 Reviews
Cara Membuat Phantom Topmenu Responsive

Posted by Unknown

Tweet