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 1
September 2, 2009
Posted by: Fauzie


Membina navigation menu dengan cara yang lebih mudah adalah salah satu objektif dalam penggunaan CSS. Cara lama membina navigation menu banyak bergantung kepada penggunaan "image", "nested table" dan juga javaScript. CSS membolehkan kita membina navigation menu dengan hanya menggunakan teks--iaitu "mark up text".

Dalam rencana ini, mari kita lihat cara mudah membina dua jenis navigation menu--vertical navigation dan juga horizontal navigation menu--yang mana kedua-duanya hanya bergantung 100% CSS dan "mark up text" (HTML).

Bagaimana kita memberi style kepada "structural list" bagi membuat navigation menu?

Navigation adalah "list" yang mempunyai link untuk tujuan dilawati. Oleh yang demikian, memberi mark up kepada list ini adalah sesuai secara "sematic" dan kita boleh "hook" CSS style kepada elemen-elemen list ini. Navigation menu yang tidak diberi "style" ini sebenarnya hanyalah "bullet list".

Untuk membina navigation yang bergantung kepada "unordered list" (ul) seperti dalam contoh live demo ini, apa yang perlu kita lakukan ialah "create list" dan meletakkan setiap navigation link di bahagian dalam a li element:

<ul>
<li><a href="#">Artikel</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Free Tools</a></li>
<li><a href="#">Beli Cara Online</a></li>
<li><a href="#">Tutorial</a></li>
</ul>


Kemudian kita "wrap" list ini dalam "div" dengan memberi nama "id" nya. Dalam contoh ini, kita namakan id nya sebagai navigasi:

<div id="navigasi">
<ul>
<li><a href="#">Artikel</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Free Tools</a></li>
<li><a href="#">Beli Cara Online</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</div>


Dengan "mark up" seperti di atas, kita telah membuat "bulleted list" seperti di bawah ini.


Sekarang apa yang perlu kita lakukan ialah memberi "style" kepada "container" di mana navigation ini berada--dalam kes ini ialah "navigasi". Style pertama ialah memberi saiz font iaitu "font-size: 90%

#navigasi {
font-size: 90%;
}

Kemudian kita "style"kan pula "list" iaitu "ul element". Pada peringkat permulaan, ia merupakan "bulleted list" (lihat di atas), kita harus membuang effek "bullet" dan caranya ialah dengan menaip "list-style: none; dan berikan saiz margin dan padding. Dalam contoh ini semua di set "sifar" (0)

#navigasi ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}

Dengan style di atas, list yang pada mulanya dalam bentuk "bulleted list" akan bertukar kepada seperti berikut:

Bentuk navigation menu kita sehingga ini ialah "vertical" (menegak). Untuk mendapatkan satu navigation menu berbentuk "horizontal" (mendatar), style baru hendaklah diberi pada "li element" (list item element) dengan memperkenalkan style "display" sebagai "inline" seperti berikut:

#navigasi li {
display: inline;
}


Untuk memberi gaya tarikan yang lebih kepada navigation menu ini, kita akan memberi style kepada link seperti berikut:

#navigasi a:link, #navigasi a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #ffffff;
background-color: #ff3300;
text-decoration: none;
border-top: 1px solid #ffffff;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
CCborderRadius: 10px;
}


Style-style border-bottom: 2px solid #999; dan border-right: 2px solid #999; membuat ketebalan border kanan dan bawah 2px dan berwarna kelabu seolah-olah seperti bayang-bayang.

Style ini pula membuat semua corner menu menjadi bulat:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
CCborderRadius: 10px;

Kod sepenuhnya untuk membina horizontal navigation menu ini adalah seperti di bawah ini. Kod berwarna maroon ialah kod CSS dan yang berwarna biru pula ialah kod HTML. Untuk mencuba sila copy & paste ke dalam notepad dan save file dengan extension .html (seperti: contohmenu.html)

<html>
<head>
<style type='text/css'>
#navigasi {
font-size:90%
}
#navigasi ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigasi li {
display: inline;
}
#navigasi a:link, #navigasi a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #FFFFFF;
background-color: #FF3300;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
CCborderRadius: 10px;
}
#navigasi a:hover {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
}
</style>
</head>
<body>
<div id='navigasi'>
<ul>
<li><a href='#'>ARTIKEL</a></li>
<li><a href='#'>BLOG</a></li>
<li><a href='#'>FREE TOOLS</a></li>
<li><a href='#'>BELI CARA ONLINE</a></li>
<li><a href='#'>TUTORIAL</a></li>
</ul>
</div>
</body>
</html>