Menu Navigasi Atas

Menu Navigasi Atas

Menu Navigasi Atas
Hai jumpa lagi dengan Agussalikur, ada yang baru lagi Sobat. Tips blog ini namanya Menu Navigasi Atas untuk blog sobat. Tutorial ini didapat dari blog tetangga, yang mungkin berguna untuk blog anda. Yuk ikuti tips aku :

Cara membuat Menu Navigasi Atas:
1.Anda harus punya blog dahulu.
2.Masuk ke Blogger.
3.Cari Template lalu Edit.
4.Cari kata ]]></skin> saran agar pencarian cepat menggunakan Ctrl+F.
5.Letakkan CSS dibawah ini sebelum ]]></skin>

CSS
/* CSS Top Navigation */
.top-menunavisal {display:block;margin:0 auto;float:left;padding:0;width:100%;max-width:1000px;background:transparent;

border:none;}

.top-menunavisal ul {width:100%;padding:0;margin:0 auto;text-align:left;}

.top-menunavisal li {list-style-type:none;float:left;padding:0;margin:0;}

.top-menunavisal li a{position:relative;font-family:&#39;Open Sans&#39;;font-size:14px;font-weight:400;background-color:transparent;color:#768187;display:block;margin:0;padding:20px 15px;line-height:100%;transition:color .3s}

.top-menunavisal ul li a:active, .top-menunavisal ul li.highlight a {line-height:100%;text-decoration:none;}

.top-menunavisal ul li a:hover {background:#111211;border-bottom: 1px solid #C6EB04;color: #C6EB04;

    text-shadow: 0px 0px 10px #C6EB04, 0px 0px 20px #C6EB04, 0px 0px 30px #C6EB04;text-decoration:none;}

.top-menunavisal a#pull {display:none;}

.top-menunavisal li.armember,.top-menunavisal li.armember2,.top-menunavisal li.codepen,.top-menunavisal li.soundcloud,

.top-menunavisal li.arjoin,.top-menunavisal li.armember3{text-align:center;color:#768187;float:right;}

.top-menunavisal li a.armember:hover,.top-menunavisal li a.armember2:hover,.top-menunavisal li a.codepen:hover,

.top-menunavisal li a.soundcloud:hover,.top-menunavisal li a.arjoin:hover{color:#888;}

.top-menunavisal li i{font-weight:normal;color:#333;transition:color .3s;}

.top-menunavisal ul li:hover i{color:#888;}

.top-menunavisal li.armember3{position:relative;transition:all .3s;}

li.armember3:after{position:absolute;content:&#39;1&#39;;right:2px;top:7px;background:#51b1eb;color:#fff;padding:0;width:18px;height:18px;line-height:18px;border:2px solid #fff;border-radius:4px;font-size:80%;transform:scale(1.0);transition:all .3s ease;}

.top-menunavisal ul li.armember3:hover:after{transform:scale(0.9)}

.top-menunavisal li.infoazzahra{border:0;}

.top-menunavisal li.infoazzahra a{background:#ff675c;color:#C6EB04;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}

.top-menunavisal li.infoazzahra a:hover{background:#e4554b;color:#fff;}

Untuk HTML nya ini 

HTML

<nav class='top-menunavisal'>

<ul style=''>

<li><a href='/p/tentang-agussalikur.html' title='About Us'><i class='fa fa-user'/> About</a></li>

<li><a href='/p/sitemap.html' title='Our Sitemap'><i class='fa fa-globe'/> Sitemap</a></li>

<li><a href='/p/contact.html' title='Contact us'><i class='fa fa-phone'/> Contact</a></li>

<li><a href='/p/privacy-policy.html' title='Privacy'><i class='fa fa-check-lock'/> Privacy</a></li>

<li><a href='/p/pasang-iklan.html' title='Pasang Iklan'><i class='fa fa-credit-card'/> Pasang Iklan</a></li>

<li class='armember2'><a class='agussalikur-tooltip agussalikur-tooltip-left' data-agussalikur-tooltip='Off Topic' href='http://agussalikur.blogspot.com/2014/08/off-topic.html' target='_blank'><i class='fa fa-coffee'/><span class='inv'/></a></li>

</ul>

<a href='https://agussalikur.blogspot.co.id' id='pull'>MENU</a>

</nav>

Untuk Menunya bekerja sempurna ini Scriptnya 

SCRIPT
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavisal 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-menunavisal 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')}})});