Membuat Menu Navigasi atas
HTML
<div class="top-wrapper">
<header class="header-wrapper2">
<div class="top-wrapper">
<nav class="top-menunavi">
<ul>
<li><a href="https://agussalikur.blogspot.com/p/about-us.html" title="About Us"><i class="fa fa-user"></i> About</a></li>
<li><a href="https://agussalikur.blogspot.com/p/sitemap.html" title="Our Sitemap"><i class="fa fa-globe"></i> Sitemap</a></li>
<li><a href="https://agussalikur.blogspot.com/p/contact.html" title="Contact us"><i class="fa fa-phone"></i> Contact</a></li>
<li><a href="https://agussalikur.blogspot.com/p/privacy-policy.html" title="Privacy"><i class="fa fa-lock"></i> Privacy</a></li>
<li><a href="/p/pasang-iklan.html" title="Pasang Iklan"><i class="fa fa-credit-card"></i> Pasang Iklan</a></li>
<li class="armember3"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Pesan Salikur" href="https://agussalikur.blogspot.com/2016/04/masjid-nabawi.html#Masjid Nabawi" target="_blank">
<i class="fa fa-bell"></i><span class="inv"></span></a></li>
<li class="soundcloud"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Follow us on Soundcloud" href="https://soundcloud.com/salikur" rel="nofollow" target="_blank"><i class="fa fa-soundcloud"></i><span class="inv"></span></a></li>
<li class="codepen"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Follow us on Codepen" href="https://codepen.io/agussalikur" rel="nofollow" target="_blank"><i class="fa fa-codepen"></i><span class="inv"></span></a></li>
<li class="armember"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Member" href="/p/member.html" target="_blank"><i class="fa fa-user"></i><span class="inv"></span></a></li>
<li class="sorting-06 arjoin"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Join this site" href="https://www.blogger.com/follow-blog.g?blogID=8217514161399660522" rel="nofollow" target="_blank"><i class="fa fa-sign-in"></i><span class="inv"></span></a></li>
<li class="infosalikur"><a class="popup-link" href="#popup">Info</a></li>
<li class="searchbutton" title="Quick Search"></li>
<li class="armember2"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Off Topic" href="https://agussalikur.blogspot.com/2014/08/off-topic.html" target="_blank"><i class="fa fa-coffee"></i><span class="inv"></span></a></li>
</ul>
<a href="#" id="pull">MENU</a>
</nav>
</div>
</header>
</div>
CSS
/* CSS Top Menu Wrapper */
.salikurtop-wrapper {-webkit-animation:top-wrapper 4s;-moz-animation:top-wrapper 4s;}
@-webkit-keyframes top-wrapper{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}}
@-moz-keyframes top-wrapper{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}}
.salikurtop-wrapper{width:100%;max-width:1000px;background:#111211;z-index:99;position:fixed;
overflow:hidden;margin:auto;border-bottom:1px solid #202020;-webkit-transform:translateZ(0)}
.astop-wrapper {padding:0;position:static;max-width:1000px;margin:0 auto;}
.header-wrapper2 {margin:0 auto;padding:0}
/* CSS Top Navigation */
.top-menunavi {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menunavi ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menunavi li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menunavi li a{position:relative;font-family:'Open Sans';font-size:14px;font-weight:400;background-color:transparent;color:#333;display:block;margin:0;padding:20px 15px;line-height:100%;transition:color .3s}
.top-menunavi ul li a:active, .top-menunavi ul li.highlight a {line-height:100%;text-decoration:none;background:#000;color:#C6EB04;text-shadow: 0px 0px 10px #C6EB04, 0px 0px 20px #C6EB04, 0px 0px 30px #C6EB04;}
.top-menunavi ul li a:hover {color:#fff;text-decoration:none;}
.top-menunavi a#pull {display:none;}
.top-menunavi li.facebook,.top-menunavi li.armember,.top-menunavi li.armember2,.top-menunavi li.codepen,.top-menunavi li.googleplus,.top-menunavi li.soundcloud,.top-menunavi li.arjoin,.top-menunavi li.armember3{text-align:center;color:#333;float:right;}
.top-menunavi li a.facebook:hover,.top-menunavi li a.armember:hover,.top-menunavi li a.armember2:hover,.top-menunavi li a.codepen:hover,.top-menunavi li a.googleplus:hover,.top-menunavi li a.soundcloud:hover,.top-menunavi li a.arjoin:hover{color:#333;}
.top-menunavi li i{font-weight:normal;color:#333;transition:color .3s;}
.top-menunavi ul li:hover i{color:#fff;}
.top-menunavi li.armember3{position:relative;transition:all .3s;}
li.armember3:after{position:absolute;content:'1';right:2px;top:7px;background:#51b1eb;color:#fff;padding:0;width:18px;height:18px;line-height:18px;border:1px solid #202020;border-radius:4px;font-size:80%;transform:scale(1.0);transition:all .3s ease;}
.top-menunavi ul li.armember3:hover:after{transform:scale(0.9)}
.top-menunavi li.infosalikur{border:0;}
.top-menunavi li.infosalikur a{background:#111211;color:#333;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
.top-menunavi li.infosalikur a:hover{background:#000;color:#C6EB04;text-shadow: 0px 0px 10px #C6EB04;}
/* CSS Custom Search */
.top-menunavi li.searchbutton{margin:0;display:inline-block;cursor:pointer;float:right;padding:20px 15px}
.top-menunavi li.searchbutton.active {background:#111211;color:#333;}
.top-menunavi li.searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
.salikur-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;max-width:720px;margin:auto;background:rgba(255,255,255,1);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
.salikur-search.active{opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.salikur-search .fixedinput{background:#f9f9f9;margin:0 auto 15px;padding:10px 0;border-bottom:1px solid #e9e9e9;}
.salikur-search .searchmein{width:90%;margin:auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(255,255,255,1);width:80%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;border:1px solid #e9e9e9;border-radius:3px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{background:rgba(255,255,255,1);border-color:#d9d9d9}
#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.4);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40.5px;padding:0;margin:0;border:0;outline:0;background:#ff675c;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;border-radius:0 3px 3px 0;transition:all .3s ease-out}
#search .input .search:focus,#search .input .search:active, #search .input .search:hover {color:rgba(0,0,0,.8);}
#search .input .submit:focus,#search .input .submit:hover {background:#e4554b;color:rgba(255,255,255,1);}
#search #close{cursor:pointer;position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;margin:0;border:0;outline:0;border-radius:5px;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.3);text-align:center;line-height:32px;transition:all .3s}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.salikur-search .search:focus {outline:none;}
.search-result{padding:20px;width:90%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:15px;border-bottom:1px solid #eee;}
.search-result .search-item:last-child{border-bottom:0}
.search-item img{width:60px;height:60px;float:left;border-radius:3px;background:#fdfdfd}
.search-item a{width:calc(100% - 80px);float:right;display:block;color:#333;text-decoration:none}
.search-item a:hover,.search-item:hover a{color:#ff675c;}
.query-result{display:none;cursor:pointer;background:#111211;color:#e4554b;padding:12px;margin:20px auto 40px;text-align:center;text-transform:uppercase;border-radius:5px;line-height:normal;font-size:85%;letter-spacing:1px;max-width:90px;border:1px solid #ff675c;transition:all .3s ease-out}
.query-result:hover{background:#ff675c;color:#fff;border-color:transparent}
.query-result a{text-decoration:none;color:#e4554b;}
.query-result:hover a,.query-result a:hover{color:#fff;}
.queryword{font-weight:700}
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#ff675c;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#ea5a50;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
/* About Us */
.boxwainner{z-index:99;width:600px;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentboxwa{position:absolute;background-color:#0e0e0e;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#000;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#555;line-height:70px;text-align:center;font-size:200%;position:inherit;width:62.5%;box-sizing:initial}
#left{background:#111211;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{background:#0e0e0e;width:62.2%;padding:20px 20px 40px 20px;color:#555;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(242, 242, 242);font-family:fontawesome}
a.popup-close:hover{color:rgba(57, 230, 0);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
Script
<script type="text/javascript">
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavi ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menunavi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
</script>