Membuat Floating Menu Dengan Judul Blog No Java Script

Floating Menu / Melayang - Merupakan sebuah menu tetap atau dengan kata lain menu ini tidak akan ikut naik keatas manakala Scrool sebuah tampilan blog/web ditarik kebawah.  

Ketika melakukan search di google banyak blog/web yang menyajikan tutorial pembuatan menu ini dengan banyak variasi yang menarik, namun pada kesempatan ini Kolom Tutorial™ akan menyajikan kepada sobat blogger sebuah menu melayang/floating menu dengan judul blog disampingnya. untuk vreviewnya kuang lebih seperti gambar dibawah  :

 Preview sebelum scroll diseret kebawah

  Preview sesudah scroll diseret kebawah

DEMO FLOATING MENU

Langkah penerapannya :-

Untuk panduan pemasangan widget silakan klik DISINI

UNTUK KODE HTML NYA

<div id="kthdbar">
  <a href="joens-tutorial.blogspot.com">
    <div class="name">Kolom Tutorial™</div></a>
  <div class="hdbarmenu">
    <div><a href="#">Home</a></div>
    <div><a href="#">Products</a></div>
    <div class="tips"><a href="#">Tips</a></div>
    <div><a href="#">Contact</a></div>
    <div><a href="#">Help</a></div>
  </div>
</div>

UNTUK KODE CSS NYA

#kthdbar
{
  -webkit-box-shadow: 0 3px 30px green;
  -moz-box-shadow: 0 3px 30px green;
  box-shadow: 0 3px 30px green;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  border-bottom: 4px solid #21E21D;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px; 
  color: white;
  height: 48px;  
}
.name
{
  float: left;
  font: bold 25px 'Calibri';
  margin: 9px;
}
#kthdbar a
{
  text-decoration: none;
  color: white;
}
#kthdbar div
{
  display: inline-block;
}
.hdbarmenu
{
  font: normal 17px 'Calibri';
  float: right;
  margin: 13px;
}
.hdbarmenu a
{
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  margin: 5px;
}
.hdbarmenu a:hover
{
  background: #21E21D;
  padding: 13px 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.hdbarmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px;
 }
.hdbarmenu ul li:hover > a, .hdbarmenu ul li.active > a {
      background: #1b9bff;
      color: #FFF;
 }


@media (max-width: 400px)
  {
    #cbthdbar
    {
      height: 30px;
    }
    .name
    {
      font-size: 11px;
    }
    .hdbarmenu
    {
      font-size: 9px;
    }
    .hdbarmenu a
    {
      margin: 0;
    }
    .tipsmore
    {
      top: 29px;
      right: 30px;
    }
    .tipsmore a
    {
      font-size: 9px;
    }
  }

Demikian artikel kali ini, dan menu ini sudah Responsive, terimakasih salam silaturahmi.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post