Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



TUTORIAL: BINA NAVIGATION MENU DENGAN CSS 2
September 4, 2009
Posted by: Fauzie


Dalam Bahagian 1, kita telah melihat bagaimana membina atau membuat "horizontal menu" dengan hanya menggunakan CSS sahaja.

Mari kita sambung perbincangan ini dengan membuat "vertical menu" pula. Di bawah ini ialah screenshot menu tersebut dan anda boleh klik di sini untuk melihat live demo.

Seabagai permulaan, kita perlu membuat "list" seperti yang telah diterangkan dalam bahagian 1.

<ul>
<li><a href="#">Jom Kita Blog&g</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>

List ini kemudian ditutup (wrap) dalam "div" dengan memberi nama ID nya. Dalam contoh ini, mari kita namakan ID sebagai navigation.

<div id="navigation">
<ul>
<li><a href="#">Jom Kita Blog&g</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>

Screen shot contoh menu yang akan dibina


Sekarang mari kita berikan "style" kepada "container" di mana navigation ini berada.

Style pertama ialah lebar atau "width" container. Dalam contoh ini lebar atau width ialah 354px. Lebar ini sebenarnya bergantung kepada lebar sidebar dimana menu ini akan diletakkan.

#navigation {
width: 354px;
}


Style kedua ialah dibuat kepada "list" iaitu ul (unordered list).

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

Nota: list-style:none bermaksud "membuang" list berfomat "bullet" sebelum ini.

Langkah seterusnya ialah memberi style kepada "li elements" yang berada di dalam container #navigation iaitu dengan memberi effect "border" di bahagian bawah.

#navigation {
border-bottom: 1px solid #ed9f9f;
}

Dan akhir sekali, kita akan beri style kepada link dan visited link seperti di bawah ini.

#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 20px solid #711515;
border-right: 5px solid #711515;
background-color: #b51032
color: #ffffff;
text-decoration: none;
}


Untuk mendapatkan rollover effect (warna bertukar apabila cursor berada di atas menu), kita perlu tambah :hover pseudo-class selector seperti di bawah ini.

#navigation li a:hover {
background-color: #711515;
color: #ffffff;
}

Kod-kod CSS dan HTML sepenuhnya untuk membina menu ini adalah seperti di bawah.

<html>
<head>
<style type="text/css">
#navigation {
width: 354px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ffffff;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 20px solid #660000;
border-right: 5px solid #660000;
background-color: #cc3300;
color: #ffffff;
text-decoration: none;
}
#navigation li a:hover {
background-color: #660000;
color: #ffffff;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Jom Kita Blog</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>

Seperti biasa, kod-kod berwarna maroon ialah kod CSS dan kod-kod berwarna biru adalah kod HTML.