Floating / Fixed Menu Melayang Ala Mantapweb

Floating menu atau biasa disebut fixed menu ( menu melayang ) seperti yang blog ini pakai sekarang artinya menu ini selalu berada diatas walaupun blog di scrol sampai kebawah, sebelumnya ini sudah di posting oleh Kang Ismet yang menunya ala Kaskus namun pada posting saya kali sedikit berbeda yaitu perbedaan warnanya.

Untuk lebih jelasnya sobat bisa lihat pada screenshot dibawah ini:


Untuk tidak berlama lama langsung saja pada langkah - langkahnya

Simpan kode dibawah ini di atas ]]></b:skin>
     
/* Floating Menu */
#rz_floating_menu{background-color: #599b29;background: #599b29;background: -moz-linear-gradient(top, #599b29 0%, #4a8a1b 100%) ;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599b29), color-stop(100%,#4a8a1b)) ;background: -webkit-linear-gradient(top, #599b29 0%,#4a8a1b 100%) ;background: -o-linear-gradient(top, #599b29 0%,#4a8a1b 100%) ;background: -ms-linear-gradient(top, #599b29 0%,#4a8a1b 100%) ;background: linear-gradient(to bottom, #599b29 0%,#4a8a1b 100%) ;filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599b29', endColorstr='#4a8a1b',GradientType=0 ) ;border-bottom: 1px solid rgba(255, 255, 255, 0.1) ;box-shadow: 0 2px 0 #3e870a;box-shadow: 0px 2px 0px #3e870a;height:34px;width:100% ;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #3e870a;}
#rz_floating_menu ul{list-style: none;margin:0 auto;width:1270px;}
#rz_floating_menu ul li{float:left}
#rz_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px ;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none ;border-right: 1px solid #599b29;border-left:1px solid #599b29;}
#rz_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}


Catatan:
1. Ganti kode #599b29 untuk warna Floating menu sesuai selera sobat
2. Ganti kode #4a8a1b untuk warna background Floating sebelumnya
3. Ganti kode #3e870a untuk border antara masing-masing menu
4. Ganti 970px sesuai ukuran lebar blog sobat

Untuk Mendeklarasikannya, simpan kode ini di bawah </head>
<!-- Floating Menu-->
<div id='rz_floating_menu'>
<ul>
<li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='http://4.bp.blogspot.com/-EjgIhPH-_8k/T2X5jYfOJZI/AAAAAAAABmw/yA1YFlwMqRU/s1600/home.png' style='padding:0px;'/></a>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul> </div>
Edit Menu 1-5 sesuai keinginan dan rubahlah # dengan url menu sobat
Semoga bermanfaat

1 comments:

Post a Comment