Membuat Menu Navigasi Seperti Google

Pertama : Sobat masukkan kode dibawah ini, tepat diatas </head>
 

<script src='http://cing-ss.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>

<script src='http://cing-ss.googlecode.com/files/jquery.google_menu.js' type='text/javascript'/>

<script>

$('document').ready(function(){

$('.menu').fixedMenu();

});

</script>

Kedua : Masukkan kode berikut tepat diatas  ]]></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;

-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;

-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;

}

.current a{

background-color:#2D2D2D;

border-top:2px solid #DD4B39;/*garis warna merah diatas*/

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;

-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;

}

Ketiga : Masukkan kode berikut dibawah  Tag pembukaan kode outer-wrapper 
 

<div class='menu'>

 <ul>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://plus.google.com' target='_blank'>+You</a>

  </li>

        <!-- Using class="current" for the link of the current page -->

      <li class='current'>

  <a href='http://www.google.co.in/' target='_blank'>Web</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://orkut.com' target='_blank'>Orkut</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://gmail.com' target='_blank'>Gmail</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='https://www.google.com/calendar' target='_blank'>Calendar</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='https://docs.google.com' target='_blank'>Documents</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://picasaweb.google.co.in/home' target='_blank'>Photos</a>

  </li>

   <li>

  <a href='#'>More<span class='arrow'/></a>

        <!-- Drop Down menu Items -->

<ul>

   <li><a href='#'>Reader</a></li>

   <li><a href='#'>Sites</a></li>

   <li><a href='#'>Groups</a></li>

   <li><a href='http://www.youtube.com'>YouTube</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='#'>Images</a></li>

   <li><a href='#'>Maps</a></li>

   <li><a href='http://translate.google.co.in/'>Translate</a></li>

   <li><a href='http://books.google.co.in'>Books</a></li>

   <li><a href='http://scholar.google.co.in/'>Scholar</a></li>

   <li><a href='http://blogsearch.google.co.in'>Blogs</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='http://www.google.co.in/intl/en/options/'>even more &gt;&gt;</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

  </ul>

  </li>

 </ul>

</div>

Note : Silahkan sobat ganti setiap link yang ada dengan link pada blog sobat sendiri.

Source code : loefa-cebook.blogspot.com