Cara Membuat Topmenu Responsive + Media Sosial di Atas Header Blog

Baca Juga

Cara Membuat Navigasi Topmenu Bar Resposnive + Media Sosial di Atas Header Blog

NAVIGASI Top Menu Responsive Plus Media Sosial ini mirip dengan Navigasi Topmenu Dropdow plus Medsos  yang sudah di-share sebelumnya.

Topmenu Bar plus media sosial ini juga mirip Navigasi Menu plus Medsos Super Seo.

Kode topbar plus medsos responsive ini diambil dari blog demo Minima Stylo. Sudah berhasil CB terapkan di Webmaster CB.

Langsung saja, ini dia kode dan cara memasangnya:

Cara Membuat Topmenu 

KODE CSS
Pasang di atas kode ]]></b:skin> atau </style>

/* CSS Top Navigation */
.menu-wrapper {background:#404040;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:"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:#e74c3c;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
Pasang di atas kode <div id='header'> atau <div class='header'>

<div class='menu-wrapper'>
<div class='outerinner'>
          <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 stumbleupon'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-stumbleupon 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>
  </div>

KODE JAVASCRIPT
Pasang 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>

Save Template!
Beres, Brow....!

Kini Anda tinggal mengedit nama dan link menunya di kode HTML. Kode pagar (#) adalah link menu. Lihat Juga: Cara Memasang Link Halaman Statis di Navigasi Menu.

Kode Topmenu Lainnya

See the Pen
Top Menu Responsive by CB Blogger (@cbblogger)
on CodePen.

Good Luck & Happy Blogging! (http://www.contohblog.com).*