LANGKAH SATU
Pertama, kita harus membuat html untuk menu yang sebenarnya. The html berikut adalah untuk menu utama. Perhatikan bahwa id disebut "main-menu" untuk div. Juga, perhatikan bahwa link Resources memiliki kelas yang disebut "aktif":
1
2
3
4
5
6
7
8
9
| <div id="main-menu">
<ul>
<a href="#"> Home </ a> </ li>
<a href="#"> Layanan </ a> </ li>
<a href="#"> Portofolio </ a> </ li>
<a class="active" href="#"> Resources </ a> </ li>
<a href="#"> Kontak </ a> </ li>
</ Ul>
</ Div>
|
The html berikut adalah untuk submenu. Perhatikan bahwa kelas ini disebut "submenu" untuk daftar unordered. Juga, perhatikan bahwa link Tutorial memiliki kelas yang disebut "aktif":
1
2
3
4
5
6
| <ul class="submenu">
<a class="active" href="#"> Tutorial </ a> </ li>
<a href="#"> Downloads </ a> </ li>
<a href="#"> Afiliasi </ a> </ li>
<a href="#"> Link </ a> </ li>
</ Ul>
|
The html berikut adalah untuk footer. Perhatikan bahwa id disebut "footer" untuk div:
1
2
3
4
| <Div id = "footer">
<A href = "#"> Syarat Penggunaan </ a> |
<A href = "#"> Kebijakan Privasi </ a>
</ Div>
|
LANGKAH KEDUA
Sekarang bahwa kita memiliki html, kita perlu membuat CSS untuk gaya masing-masing menu navigasi.CSS berikut ini untuk menu utama:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| # Main-menu ul {
margin: 0px;
padding: 0px;
}
# Main-menu li {
list-style-type: none;
display: inline;
margin: 0 5px 5px 0;
}
# Main-menu li a {
color: # FFFFFF;
text-decoration: none;
}
# Main-menu li a aktif, # main-menu:. Hover {
text-decoration: underline;
color: # D9CD60;
|
Tidak ada komentar:
Posting Komentar