Cara Dan Teknik Menciptakan Topmenu Responsive + Media Umum Di Atas Header Blog

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

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

Topmenu Bar plus media umum ini juga seolah-olah 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 ia instruksi dan cara memasangnya:

KODE CSS
Pasang di atas instruksi ]]></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 instruksi <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 instruksi </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 instruksi HTML. Kode pagar (#) ialah link menu. Lihat Juga: Cara dan metode Memasang Link Halaman Statis di Navigasi Menu.

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


Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Teknik Menciptakan Topmenu Responsive + Media Umum Di Atas Header Blog

4/ 5

Oleh Unknown

Unknown April 24, 2016