membuat menu navbar horisontal
Menubar horizontal terletak didaerah header ataupun footer yang akan memasilitasi visitor (pengunjung) untuk menuju isi dari sebuah blog, Menubar juga berfungsi untuk memperindah layout template, terlihat bagaikan rak-rak yang tersusun lengkap dengan bermacam-macam isi blog dari ownernya, Pembuatan menubar atau menu navigasi bar tidaklah begitu sulit, hanya merujuk pada tag padding dan margin yang menjadi kunci pokoknya, karena kita akan mengatur jarak saja untuk menggunakan properti tersebut, Anda tidak perlu sulit-sulit untuk menyusunnya, penulis akan memberikannya gratis dan tinggal pastekan saja, Tapi penulis tekankan untuk mengerti dari nilai tag tag CSS dan htmlnya, Berikut kode-kode CCSnya, pastekan dibawah kode CSS header
position: relative;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
background: url(bgmenu.gif) repeat-x;
clear: both;
}
#menu ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
border: 0;
height: 29px;
}
#menu ul li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#menu ul a {
display: block;
text-decoration: none;
padding: 7px 15px 7px 15px;
font-weight: bold;
color: #fff;
white-space: nowrap;
border-right: 1px solid #1F1010;
border-left: 1px solid #793E3E;
float: left;
}
#menu ul a:hover {
background-color: #810101;
}
#menu ul a:hover {
color: #ff0;
border-bottom-width: 0;
}
Dan htmlnya pastekan dibawah kode html <head>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Member</a></li>
<li><a href="#">Info Blog</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Member</a></li>
<li><a href="#">Info Blog</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
