Welcome to MySide

» » Cara Membuat Top Menu Bar Mirip Google

Cara Membuat Top Menu Bar Mirip Google

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

Subscribe to receive free email updates: