February 18, 2015

Cara Membuat Top Menu Bar Mirip Google

February 18, 2015

TOP Menu Bar atau bar navigasi menu di atas header blog menjadi salah satu trend desain website modern. Menu ini statis, sticky, alias floating (melayang), yakni tetap muncul saat discroll. Ini penampakannya:

top menu bar mirip google


Tips Cara Membuat Top Menu Bar Mirip Google ini melengkapi sekaligus alternatif dari posting sebelumnya tentang Cara Membuat Navigasi Menu di atas header atau  Top Nav Menu Mirip Facebook.

Cara Membuat Top Menu Bar Mirip Google (Google Style Top Fixed Menu Bar)

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode  ]]></b:skin>

.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}

.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}

.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}

.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}

.menu ul li{
padding:0;
float:left;
}

.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}

.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;

/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}

.active ul{
display:block !important;
}

.single ul{
display:block !important;
}

.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;

/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}


/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}

.active a:hover{
background-color:white;
color:#3366CC;
}

.active ul a:hover{
background-color:#e4ebf8;
}

.active ul a{
border:0 !important;

/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}

.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}

.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}

3. Copas kode berikut ini di bawah kode <body>


<div class="menu">
<ul>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://plus.google.com">+You</a>
</li>
<!-- Using class="current" for the link of the current page --> <li class="current">
<a target="_blank" href="#">Web</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="#">Drive</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://gmail.com">Gmail</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="https://www.google.com/calendar">Calendar</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="https://docs.google.com">Documents</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown --> <a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
</li>
<li><!-- Do not add any class for links with dropdown --> <a href="#">More<span class="arrow"></span></a>

<!-- Drop Down menu Items --><ul>
<li><a href="http://www.google.co.in/reader">Reader</a></li>
<li><a href="https://sites.google.com">Sites</a></li>
<li><a href="http://groups.google.co.id">Groups</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.id">Images</a></li>
<li><a href="http://maps.google.co.id/maps">Maps</a></li>
<li><a href="http://translate.google.co.id/">Translate</a></li>
<li><a href="http://books.google.co.id">Books</a></li>
<li><a href="http://scholar.google.co.id/">Scholar</a></li>
<li><a href="http://blogsearch.google.co.id">Blogs</a></li>
<li>

<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
<li>
<div class="mid-line">
</div>
</li>
</ul>
</li>
</ul>
</div>

Ganti nama-nama dan link menu!

4.  Copas kode berikut ini di atas kode </head>

UPDATE!!! Kode sudah diperbaiki! No Error Again Lah...!!!

<script>
$(function ($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
$("html").click(function() {
menu.find('.active').removeClass('active');
});

menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') &amp;&amp; !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
//displaying the drop down menu
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
}
else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.active').removeClass('active');
}
})
});
}
})(jQuery);
</script><script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>

4. Save Template!

Kini Top Menu Bar Mirip Google sudah muncul di atas header blog Anda.

Top Menu Bar Cara CB (Recommended!)

Bagi CB, setelah ujicoba, cara Membuat Top Menu Bar Mirip Google dari Lab Strike di atas agar "ribet" dan terlalu banyak kode.

CB rekomendasikan Anda mengggunakan cara berikut ini yang lebih simple. Tinggal ganti atau tambah aja nama-nama menunya dengan menu-menu mirip Google Top Bar itu.

1. "Template" > "Edit HTML"
2. Copas kode berikut ini di atas kode ]]></b:skin>

<!-- Static Top Menu Bar Google Style -->
* html #top{position:absolute}
#top {margin: auto;padding:0 10px 15px 10px;width: 100%;background: #2d2d2d;border-bottom: 2px solid #777;z-index: 100;height: 20px;}
#top-wrap {margin:auto;padding: 0;width: 950px;background:#2d2d2d;}
#navwrap {margin: 0px auto; width:100%; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-size:13px;display:block;padding:10px 10px;color:#f2f2f2;text-decoration:none;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#444; color:#f2f2f2;}

3. Copas kode berikut ini tepat di bawah kode <body>

<div id='top' style='position:fixed'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
  <li><a href='#'>Google Plus</a></li>
  <li><a href='#'>Gmail</a></li>
  <li><a href='#'>Tips SEO</a></li>
  <li><a href='#'>Desain</a></li>
  <li><a href='#'>Posting</a></li>
  <li><a href='#'>Free Templates</a></li>
  <li><a href='#'>Naon Deui</a></li>
  </ul>
</div>
</div>
</div>

4. Tambahkan kode padding-top: 45px; dalam kode .header-wrapper atau #header-wrapper

Contoh:
.header-wrapper {padding-top: 45px; ... }

Itu dia Cara Membuat Top Menu Bar Mirip Google untuk mempercantik blog sekaligus membuat navigasi menu tambahan dan internal link. Good Luck! (http://contohblognih.blogspot.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

18 comments on Cara Membuat Top Menu Bar Mirip Google

  1. Sedikit koreksi CB

    Yang no 3 buat gini aja om

    href="#">Images</a></li>
    <li><a href="#">Maps</a></li>

    yang nomor 4

    if (!$(this).parent().hasClass('single-link') && !$(this).parent(). (Hilangkan &&)

    Kayaknya sih...

    ReplyDelete
    Replies
    1. Good! Kode && kalo error di-parse dulu , thanks....

      Delete
    2. tolong lebih detil lagi! ane bingung masih, error missing terus....hee

      Delete
  2. gan, bisa bikin template blogger sesuai keinginan gak gan? kalo ada mantap tu gan, apalagi buka jasanya, masalahnya ane liat di google gak profesional penawarannya gan? mudahan aja agan bisa saya butuh juga nih gan

    ReplyDelete
    Replies
    1. bisa, silakan pesan ke Layanan Premium via email cbblogger2014@gmail.com

      Delete
  3. gan yang di farse bagian mana ya?

    ReplyDelete
    Replies
    1. kalau ngga ada kode body di taruh dimana ya? ane pakai template bawaan blog...

      Delete
  4. eror di bagian kode && mas

    ReplyDelete
  5. Dear @All
    UPDATE!!! Kode sudah diperbaiki! No Error Again Lah...!!!

    ReplyDelete
  6. ko, more nya nggak dropdown ya gan? mohon help me...hehe

    ReplyDelete
  7. ko more dropdownnya ga aktif ya gan? gmn caranya nih...serta bagaimana caranya buat footer yang isinya page seperti home, privacy policy, disclaimer, dll...help me brother....! i wait...! hehe

    ReplyDelete
  8. masih error bang,,, mlh bentuk'a vertikal...

    ReplyDelete
  9. Boss Untuk Mengganti Link Menu bar bawaan di templat Dynamic Mag g mna???

    ReplyDelete
    Replies
    1. Template > Edit HTML > cari nama menunya

      Delete
  10. Gan jika yang di template NJW V3 navbarnya diganti sama ini bisa gak gan? caranya gmn tlng gan makasih.

    ReplyDelete

Contact Form

Name

Email *

Message *