Phantom Top Menu
Phantom Top Menu Responsive And Mobile Version Top Menu.
by Rhinokage Rio
HTML
<script src="https://cdn.rawgit.com/Arlina-Design/phantom/master/masternav.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<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='http://www.idblanter.com/'><i class='fa fa-home'></i> Home</a></li>
<li><a href='http://www.idblanter.com/p/contact.html'><i class='fa fa-envelope'></i> Contact</a></li>
<li><a href='http://www.idblanter.com/p/daftar-isi.html'><i class='fa fa-list'></i> Sitemap</a></li>
<li><a href='http://www.idblanter.com/p/disclaimer.html'><i class='fa fa-check-circle'></i> Disclaimer</a></li>
<li><a href='#'>Menu</a>
<ul class='sub-menu'>
<li><a href='#'>Santap Sahur</a></li>
<li><a href='#'>Pasar Kaget</a></li>
<li><a href='#'>Berbuka</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>
CSS
body {background:#E8E8E8;}
/* CSS Indominus 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...
JavaScript
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"})})});