Cara Membuat Navigasi Top Menu Responsive plus Media Sosial

Baca Juga

Cara Membuat Navigasi Top Menu plus Media Sosial Responsive

NAVIGASI menu atas (top menu) ini bisa 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 seperti tips desain navigasi menu responsive sebelumnya yang sudah CB share dan dipasang di blog ini.

Navigasi menu berfungsi sebagai link internal sekaligus memudahkan pengunjung membuka konten blog kita. Navigasi menu umumnya diisi link ke halaman statis (Kontak, About, Sitemap), bisa juga link ke halaman label, tautan keluar (external link), plus link ke akun media sosial.

Cara Membuat Navigasi Top Menu Responsive plus Media Sosial 

KODE CSS 
Simpan di atas kode ]]></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:&#39;Open Sans&#39;;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:&quot;Open Sans&quot;;font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:&quot;\f03a&quot;;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 kode header, misalnya <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 kode </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 kode </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'/>

Pastikan juga sudah terpasang link ke kode jQuery di template blog Anda!

<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).*