Home » » Cara Membuat Topmenu Responsive + Media Sosial di Atas Header Blog

Cara Membuat Topmenu Responsive + Media Sosial di Atas Header Blog

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

Topmenu + Media Sosial Responsive
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:

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.

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

Thanks for reading & sharing Cara Membuat Topmenu Responsive + Media Sosial di Atas Header Blog

Previous
« Prev Post

1 comments:

Comment Page:

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox