Menu Vertikal
Langkah membuat menu vertikal seperti tampilan di atas:
1. Buat file HTML sebagai berikut :
<ul>
<li><a
href="#">Product</a></li>
<li><a
href="#">Galery</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li>
<li><a
href="#">Logout</a></li>
</ul>
2.
Buat
perintah CSS untuk menghilangkan style list
dan margin text
#vertical ul
{
list-style-type:none;
margin:0;
padding:0;
}
Perintah list-style-type:none;
digunakan untuk menghilangkan style
list. Kemudian untuk
menghilangkan margin digunakan perintah margin:0 dan padding:0
(Hasil Koding langkah II)
3. Atur batas
kiri list dengan perintah padding:
#vertical ul li
{
padding-left:.1em;
}
4.
Berikan
perintah formatting dan pewarnaan pada list yang digunakan sebagai link
#vertical
ul li a
{
font-family:"Times New Roman", Times, serif;
text-decoration:none;
color:#000066;
background-color:transparent;
width:8em;
display:block;
border-bottom:dotted 1px #000033;
border-left:solid 1px #FFFFFF;
border-top:solid 1px #FFFFFF;
padding: .3em .5em;
}
Keterangan:
Perintah CSS
|
Fungsi
|
font-family:"Times
New Roman", Times, serif;
|
Menentukan
jenis font text yang digunakan
|
text-decoration:none;
|
Menghilangkan
garis bawah pada text
|
color:#000066;
|
Menentukan
warna text
|
background-color:transparent;
|
Memberikan
warna background transparan pada text
|
width:8em;
|
Menentukan
lebar menu sebanyak 8 x karakter
|
display:block;
|
Menentukan
agar yang dijadikan link tidak
textnya saja, melainkan satu kotak selebar 8em.
|
border-bottom:dotted
1px #000033;
border-left:solid
1px #FFFFFF;
border-top:solid
1px #FFFFFF;
|
Menentukan
ketebalan garis sebesar 1px dan warnanya masing-masing baik bawah, kiri, atas
|
padding:
.3em .5em;
|
Mengatur
jarak text dengan blok(Kotak)
|
( Hasil Koding Langkah IV)
5. Memberikan
perintah css saat kursor didekatkan ke menu:
#vertical
ul li a:hover
{
font-weight:bold;
border-right:solid
1px #000033;
border-bottom:solid
1px #000033;
border-left:solid
1px #FFFFFF;
border-top:solid
1px #FFFFFF;
}
Perintah #vertical ul li a:hover, merupakan
event saat mouse berada di atas menu, kemudian diberikan perintah cetak tebal
terhadap textnya dengan perintah : font-weight:bold;
dan border pada masing-masing sisinya.
6. Melengkapi
Tag HTML dengan perintah css yang dudah dibuat, tentunya harus dilinkkan
terlebih dahulu kalau cssnya dibuat secara external.
<div id="vertical">
<ul>
<li><a
href="#">Product</a></li>
<li><a
href="#">Galery</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li>
<li><a
href="#">Logout</a></li>
</ul>
</div>
(Hasil Akhir)
KODE SELENGKAPNYA:
Kode HTML:
<html>
<head>
<link
rel="stylesheet" type="text/css"
href="style1.css" />
</head>
<body>
<div
id="vertical">
<ul>
<li><a
href="#">Product</a></li>
<li><a
href="#">Galery</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li>
<li><a
href="#">Logout</a></li>
</ul>
</div>
</body>
</html>
Kode CSS
#vertical ul
{
list-style-type:none;
margin:0;
padding:0;
}
#vertical ul li {padding-left:.1em;}
#vertical ul li a
{
font-family:"Times
New Roman", Times, serif;
text-decoration:none;
display:block;
color:#000066;
background-color:transparent;
width:8em;
border-bottom:dotted
1px #000033;
border-left:solid 1px
#FFFFFF;
border-top:solid 1px
#FFFFFF;
padding: .3em .5em;
}
#vertical ul li
a:hover
{
font-weight:bold;
border-right:solid
1px #000033;
border-bottom:solid
1px #000033;
border-left:solid 1px
#FFFFFF;
border-top:solid 1px
#FFFFFF;
0 comments:
Post a Comment