» » Membuat Menu Melayang Dengan Efek Fade Out

Membuat Menu Melayang Dengan Efek Fade Out

Malam sobat, ok artikel kali ini berjudul  Membuat Menu Melayang Dengan Efek Fade Out  menu ini mungkin belum banyak di share blog-blog mudah mudahan Cyber-JM yang pertama. Amin hehe menu ini terletak di bagian atas dan tetap. jika di scroll menu ini akan ber efek Fade out ha gimana gimana, mau? oh masih penasaran bentuknya langsung aja lihat demo ya


[DEMO]

udah lihat kan ? mau ? oke ke proses langsung

Loggin blogger.com > Rancangan > Edithtml
Cari kode ]]></b:skin> dan pastekan kode berikut diatasnya

/*Nav Cyber-JM Start */
#nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url() repeat-x center left;
    z-index:999999;
}
#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}
#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url() repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}
#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(http://www.showofthemonth.com/images/top_button.gif) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(http://cdn1.iconfinder.com/data/icons/bnw/64x64/actions/bottom.png) no-repeat center center;
}
/*Nav Cyber-JM End */ 

Lalu cari kode <body> lalu pastekan kode berikut diatasnya

<div id='nav'>
 <ul>
  <li><a href='http://cyber-jm.blogspot.com/'>Link 1</a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link 2 </a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link  3</a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link  4</a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link  5</a></li>
   <li><a class='top' href='#top'><span/></a></li>
  <li><a class='bottom' href='#bottom'><span/></a></li>  
     
 </ul>
</div> 


Kalo sudah lalu  ya

Semoga Bermanfaat



Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 05.28 and have 12 komentar

12 komentar: