Home  ›  Desain Blog

February 18, 2015

Cara Membuat Top Menu Bar Mirip Google

February 18, 2015

Baca Juga

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

Tags :
Previous
« Prev Post
Next
Next Post »
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

18 comments on Cara Membuat Top Menu Bar Mirip Google

  1. Kang Tora2/18/2015 10:57 AM

    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. CB Blogger2/18/2015 11:27 AM

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

      Delete
    2. Anonymous2/19/2015 12:15 AM

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

      Delete
  2. Unknown2/19/2015 7:14 PM

    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. CB Blogger2/21/2015 8:57 AM

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

      Delete
  3. Bebas Berkarya2/19/2015 10:17 PM

    gan yang di farse bagian mana ya?

    ReplyDelete
    Replies
    1. CB Blogger2/21/2015 7:45 AM

      kode ini: &&

      Delete
    2. Bebas Berkarya2/22/2015 5:11 PM

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

      Delete
  4. Unknown2/21/2015 7:29 AM

    eror di bagian kode && mas

    ReplyDelete
  5. CB Blogger2/21/2015 7:51 AM

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

    ReplyDelete
  6. Anonymous2/26/2015 1:03 PM

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

    ReplyDelete
  7. Anonymous2/26/2015 1:17 PM

    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. Unknown2/26/2015 4:07 PM

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

    ReplyDelete
  9. Unknown5/17/2015 8:54 AM

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

    ReplyDelete
    Replies
    1. CB Blogger5/17/2015 9:23 AM

      Template > Edit HTML > cari nama menunya

      Delete
  10. Unknown10/12/2015 8:42 AM

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

    ReplyDelete
  11. My name sabiq3/05/2017 5:02 PM

    mantaaapppp...artikel na

    ReplyDelete

Subscribe to: Post Comments (Atom)

Contact Form

Name

Email *

Message *

Copyright © Contoh Blog. All rights reserved.