Navigasi Bar adalah tombol – tombol menu yang berisi
perintah untuk menuju halaman web lainnya. Navigasi bar berfungsi sebagai
pengantar untuk menuju suatu halaman pada web.
Contoh Navigasi bar.
Untuk membuat beberapa tombol navigasi, ada beberapa yang
harus ada pada pembuatan navigasi bar, yaitu :
1.
CSS Style, CSS Style yang kita perlukan yaitu
CSS Tag.
2.
List, untuk membuat list, biasanya kita
menggunakan kode
<ul>
<li></li>
</ul>
3.
Link, biasanya anda dapat memasukan linknya pada
properties di kotak link. Atau pada kode, anda dapat memasukan kode ini ke
dalam kode list li.
<a href=’link_kamu.html’>Navigasi
Kamu</a>
Dibawah ini adalah langkah – langkah membuat navigasi bar.
1. Membuat
coding setiap page dengan HTML.*
*Pada
Dreamweaver, anda harus menempatkan kode ini ke dalam kode <body></body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="#">Designs</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Basic</a></li>
<li><a href="#">Static Page</a></li>
<li><a href="#">Dynamic Page</a></li>
<li><a href="#">Publication</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</li>
<li><a href="#">Downloads</a>
<ul>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Advanced
Tools</a></li>
</ul></li></ul>
<ul><li><a href="#">About
Me</a></li>
</ul>
Tanda # dapat digantikan dengan link sesuai keinginan.
</ul>
Tanda # dapat digantikan dengan link sesuai keinginan.
2.
Membuat coding Css untuk Tampilan coding HTML.*
*Pada
Dreamweaver, anda harus menempatkan kode ini ke dalam kode
<head></head>
<style type="text/css">
ul {
font-family:
Arial, Verdana;
font-size:
14px;
margin:
0;
padding:
0;
list-style:
none;
font-weight:
bold;
}
ul li {
display:
block;
position:
relative;
float:
left;
}
li ul {
display:
none;
}
ul li a {
display:
block;
text-decoration:
none;
color:
#ffffff;
border-top:
1px solid #ffffff;
white-space:
nowrap;
background-color:
#006699;
width:
auto;
padding-top:
2px;
padding-right:
40px;
padding-bottom:
2px;
padding-left:
40px;
margin-left:
1px;
}
ul li a:hover {
background-color:
#036;
text-align:
left;
font-weight:
bold;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background-color:
#036;
}
li:hover li a:hover {
background-color:
#003;
}
</style>
Setelah
itu, simpan dalam bentuk HTML. Maka hasilnya akan seperti gambar di atas.
Thanks for reading & sharing Dreamweaver Tutorial
0 comments:
Post a Comment