Membuat Menu Navigasi Horizontal Tidak Bergerak

Saat anda membuat blog di blogspot pertama kali akan mendapatkan menu Navbar, biasanya navbar ini banyak di sembunyikan dan sebagai gantinya mengunakan menu lainnya.  Fitur menu navigasi seperti blog pada umumnya telah banyak dipergunakan. Menu ini fungsinya sebagai navigasi pembaca untuk melihat-lihat halaman lain atau kategori lain dalam blog anda. Pada posting ini kita akan belajar cara membuat menu navigasi bisa di katakan lain dari pada yang lain.

Menu navigasi ini tidak bergerak atau akan tetap berada di atas ketika kita melakukan scroll ke bawah atau keatas.

Ok Langsung saja kita praktekan, tetapi alangkan baiknya kita lakukan backup dengan download full template.

Pada Css kita copy paste kode dibawah ini diatas body {

#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(../images/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#nav ul li{
display:inline;
float:left;
margin:0px 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(../images/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#D9D9DA none;
color: #fff;
}

Pada HTML kodenya seperti berikut :

<div id="nav">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>

Cukup Sekian, semoga bermanfaat

Related Articles by Category