Cara Membuat Menu Melayang Di Atas Header / Floating menu

Pada postingan sebelumnya saya telah membahas Cara Membuat Menu Melayang Di Atas Header, Kali ini saya akan membahas tentang Cara Membuat Floating menu atau yang sering di sebut Membuat menu ikut turun saat mouse di scroll, apakah berbeda? yahh jelas sama dong sob..., yang membedakan hanyalah desain penampilanya saja tapi kegunaanya tetap sama kok.!
jika kalian pada bingung ini adalah sreenshotnya:

Oke langsung aja Caranya:

• Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
• Cari Kode ]]></b:skin> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas ]]></b:skin> .
  

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_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 #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

• Ganti 970px untuk ukuran blog sobat.
• Ganti 34px untuk ukuran lebarnya

Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->er
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzXHmGM1LorX_FlN9KWpEDE35RJqapun5y1eh2iyxuNBESC6JAUfiHHruYLlZSV0-iBczqu-JaL7hkocltjFx6BbK5hRq4xncAulMkaorEhMPmNuJQRD2CHzwPBv3yAPCr7V3ix7BWq50/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>

• Klik Simpan 

Semoga Bermanfaat!

Tweet

Related Posts

Cara Membuat Menu Melayang Di Atas Header / Floating menu

4/ 5

Oleh akuntest123

Pada 9:57 AM 64 Komentar