MEMBUAT MENU NAVIGASI UNIK.

ul#navigation {

    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#fe6b6b;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #fc0202;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2rWJLD2pNjkE0RutJJs-JOeHNQQIDzUdAK1-AHaSuVAJKqBPwwj9jDYwElma0LyP1JgDXwOqcFE8pLAjlsqIbn5zkmv0JQUsENbcBaC1wfm79_vqd5meay_Ee7c6oKZ5hHTrLUhHZA/s1600/5.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6XD-6AZ3qzBEchYq_gwVGxU5uxwDRDuztdYJTpfO8KDnWHDn-mAckcyFRO6WR5kzBUqeV59ATuCpTN2NirRuLFsxzz3BqtDkmKlECYnH6AwxU0WBSC04gI0IKBsgWzKCVJjaEQK2OQ/s1600/1.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0izp-MOAtgsTXCdD1hZ7fYscQGy6RvvlRvntw8AvKrxz_ndg-KGRQFpqj_KcLp9I-SC7ti0UtutTkCA1_czptUvDOx3TtmFdxJpcvLnmo0K1YarhmEIUWHMBYFpL7D9Bnc2oX3eWUA/s1600/3.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTf__64LmMadDLwHUsmeqHu-dHojNeRoMpZVWX4hP7Aj-6hY-CSDgX_2ygd33EmhlB8WShus9uLyFEE91-2SxCQleRNhOTABIY5nPCbRPMn_oSVKs7zwQsrMwm6vnpIJGvuXUlgwViw/s1600/9.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi38M8cxYIANODe32B8LEn4DN-br5PTZjleTIr2RPnAVfwoJMFFgbg06PbuoEEAJX_K_AX4-1zF748ninLh5zPRMMhVTpM8k_t7ctHtWmBckWlO_h8_vUY35MZhAGTTAw6tMliZ78lEVg/s1600/8.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheB4rd1jE5Hng8ny463KPvNl4gH8HQgYPbZgOjLBVSykK4v5Qw_jh7RuteCSQpa4AxnMA2YqMoTr-t9vdxodPpveWm4LwAsu82ZwCefVltcfcY0zu5BTm7pd8lekZxnfrc8ieN9kmDwQ/s1600/10.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJOAmnZXiRxv5A2KPFm_TSAAV1_MmT9P71GxNeddRMwCy8rWffCgKBHlN6-zuWcHf164LvvjoLTPfG2l4SCtE9KxQJBKAYI5cx8-1Q6I4kae0lKZaE0o5O38bYAth1mUQQzO3QaannFQ/s1600/6.png);
}

<script type="text/javascript" src="http://loefa-cebook.googlecode.com/files/jquery-1.3.2.js"></script>

6. Langkah terakhir cari code </body> dan simpan code di bawah di atas code </body>

<ul id='navigation'> 
       <li class='home'><a href='Link' title=''/>Nama Link </li> 
       <li class='about'><a href='#' title=''/></li> 
       <li class='search'><a href='#' title=''/></li> 
       <li class='photos'><a href='#' title=''/></li> 
       <li class='rssfeed'><a href='#' title=''/></li> 
       <li class='podcasts'><a href='#' title=''/></li> 
       <li class='contact'><a href='#' title=''/></li> 
     </ul> 
 <script type="text/javascript"> 
       $(function() { 
         $('#navigation a').stop().animate({'marginLeft':'-85px'},1000); 
         $('#navigation > li').hover( 
           function () { 
             $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); 
           }, 
           function () { 
             $('a',$(this)).stop().animate({'marginLeft':'-85px'},200); 
           } 
         ); 
       }); 
     </script>  

Lalu Save/simpan dan lihat hasilnya.
Semoga berhasil..!!

keterangan : Code yang di kasih warna bisa kalian edit sesuai kemauan kalian.
Biru > Alamat Link kalian
Pink > Nama Link kalian

MEMBUAT MENU NAVIGASI UNIK.

>