Membuat Floating Menu / Fixed Menu di Blog

in blog - on 17.53 - 5 comments

Membuat Floating Menu / Fixed Menu di Blog - Floating Menu (Menu Melayang) atau sering juga disebut dengan "Fixed Menu" yang intinya adalah menu yang selalu berada di atas, walaupun blog di scroll sampai bawah.

Cara membuat floating menu / fixed menu ini sudah direquest oleh beberapa sahabat, namun baru saat ini saya buat tutorialnya. Untuk lebih jelasnya,sahabat bisa lihat menu paling atas di blog ini, atau lihat screenshoot dibawah ini :

Konsep CSS dasar dari Floating Menu ini sebenarnya sangat simpel, sebagai contoh :

#floating_menu{
width:100%;
position:fixed;
top:0;
}

tinggal dimasukan tambahan-tambahan lain yang diperlukan, seperti background, height, z-index, a, color, dll.

Saat ini saya coba share 2 warna floating menu yaitu Biru ala Kaskus, seperti blog ini, dan Minimalis (berwarna hitam)

Floating Menu Blue Style

Demo

Simpan kode ini 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 dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->
<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/AVvXsEjKRcGkpWWh0Uomx7XUcD9_eSuGGrldtBqrfr7zgomYMms-3zIEaDiwjZ31AChWCMm_4aVdinr0FZtm_ffwFNMGiMcEEmLyBk34yampqF5y6X6SdsQgFzR-NmogvjbgzPTXPUyvRTjJw2o/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 dan Home tidak usah di edit.

Floating Menu Minimalist Style

Demo

Simpan kode ini di atas ]]></b:skin>

/* Floating Menu Minimalis*/
#ki_floating_menu_black{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#ki_floating_menu_black ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu_black ul li{float:left}
#ki_floating_menu_black ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#ki_floating_menu_black ul li a:hover{background-color:#666;color:white;}

Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUeLEMnIjaAGQoJsK4d7O55ORLFH9n3bEbUCg0xM61letrrfKruCpr2DVc8Z7lqnfLVJv-HLvSsOitVP515ybZAsRJccq2GG2HNFYJwPgB4oCsfevK2jVBTBXeWaJlhyphenhyphenpGnR82PFIwS7c/s1600/home2.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>