Home » Blog » Cara Membuat Menu Melayang Di Atas Header

Cara Membuat Menu Melayang Di Atas Header

Cara Membuat Menu Melayang Di Atas Header-Sudah lama gak update , sekarang saya akan memberikan tutorial cara membuat menu floating , ini merupakan cara kang ismet yang saya modif supaya valid HTML5
dan seo

Berikut cara membuat menu floating :

1. Cari kode ]]></b:skin>
2. Letakan kode di bawah ini di atas kode ]]></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;}

3. Cari kode <body>
4. Letakan kode di bawah ini di sesudah kode <body>


<div id='ki_floating_menu_black'>
<ul>
<li style='border-left:1px solid #555'><a href='/'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgmpI-TaJ8gehQkOGmSi1it4SMmdgjh0Xsu146nTkJBkberVZG447YumqieeO7aw_9mzErYvuSoliB01_E9expSZxFfYynRZuhQFonD4Vg8vqX2RBe7TMd4gDMs5nKV5Bv6lAgQeX2IAI/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>

5. Simpan template dan lihat hasilnya