NAVIGASI hidangan atas (top menu) ini dapat juga dipasang di navigasin utama (main navigation). Namun, baiknya tetap pasang di atas header atau halaman blog paling atas.
Navigasi Top Menu ini responsive alias mobile friendly, sama ibarat tips desain navigasi hidangan responsive sebelumnya yang sudah CB share dan dipasang di blog ini.
Navigasi hidangan berfungsi sebagai link internal sekaligus memudahkan pengunjung membuka konten blog kita. Navigasi hidangan umumnya diisi link ke halaman statis (Kontak, About, Sitemap), dapat juga link ke halaman label, tautan keluar (external link), plus link ke akun media sosial.
cara Dan Teknik Membuat Navigasi Top Menu Responsive plus Media Sosial
KODE CSS
Simpan di atas isyarat ]]></b:skin> atau </style>
/*Topmenu plus Social Icon */
.menu-wrapper {background:#2980b9;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-family:'Open Sans';font-size:14px;font-weight:400;background-color:transparent;color:#fff;display:block;margin:0;padding:8px 12px;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:#fff;transition:initial;}
.top-menu li.socialwrap a:hover{background:#ef4824;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}
@media only screen and (max-width:768px) {
.menu-top li ul { background:#222222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#fff;display:inline-block;font-family:"Open Sans";font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#eee;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;}
.top-menu li a:hover, nav a:active {background:#ef4824;border:none;color:#fff;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}
KODE HTML
Simpan di atas isyarat header, contohnya <div id='header...> atau <div class='header...>
<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
<li><a href='/p/about.html' title='About Us'>About</a></li>
<li><a href='/p/sitemap.html' title='Our Sitemap'>Sitemap</a></li>
<li><a href='/p/kontak.html' title='Contact us'>Contact</a></li>
<li><a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap pinterest'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest fa-fw'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-fw'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-fw'/></a></li>
<li class='socialwrap facebook'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-fw'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav></div>
KODE JAVASCRIPT
Simpan di atas isyarat </body> atau </head>
<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu 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-menu 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>
LINK AWESOME FONT
Pasang link ke font awesome di atas isyarat </head>. Jika di blog Anda sudah ada, abaikan!
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
SAVE TEMPLATE!
Jika dilakukan dengan benar, mestinya Navigasi Top Menu Responsive plus Media Sosial sudah muncul di blog Anda. Good Luck & Happy Blogging! (www.contohblog.com).*
Sumber http://www.contohblog.com/
Cara Dan Teknik Menciptakan Navigasi Top Sajian Responsive Plus Media Umum
4/
5
Oleh
Unknown
