Permana Jayanta

Web Developer

CSS Tab Menu dengan List

css-tab-1 Kali ini saya ingin menjelaskan cara “gaul” membuat menu navigasi horizontal, yang biasanya diletakkan pada bagian atas (biasanya dibawah header) halaman web. Mungkin cara ini sudah bukan barang baru bagi mereka yang sudah sering bermain dengan CSS. Tapi tetap saya buat tutorialnya siapa tahu masih ada yang perlu dan siapa tahu nanti saya lupa gimana cara bikin menu seperti ini Tongue.

Kenapa saya bilang gaul ? karena di zaman web 2.0 ini, menu bar seperti pada blog saya dibuat dengan list, bukan lagi dengan table. Baiklah langsung saja saya mulai.

Secara singkat, langkah-langkahnya adalah : Mempersiapkan gambar, Slice, Mempersiapkan HTML, Mengatur CSS.

Mempersiapkan gambar
Terlebih dahulu, buat gambarnya dulu. Buka aplikasi pengolah gambar (saya pakai photoshop). Buat image ukuran 500×150 pixel. Kebiasaan saya, saya selalu memberikan garis bantu (guide) pada gambar.

css-tab-2

Buat kreasi menu yang anda inginkan. Saya akan membuat yang seperti dibawah ini saja.

css-tab-3

Menu A adalah tampilan menu dalam keadaan normal. Menu B adalah tampilan saat menu di hover, sedangkan Menu C adalah tampilan menu dalam keadaan halaman dipilih.

Slice
Langkah berikutnya adalah melakukan pemotongan (slice) pada gambar yang sudah anda buat. Saya memotong gambar seperti pada gambar dibawah.

css-tab-5

Yup, yang diperlukan memang cuma potongan 02, 04, dan 06. Bukan semua gambarnya. Simpan ketiga potongan gambar tersebut menjadi 3 file terpisah dengan Save for Web.

Mempersiapkan HTML
Langkah berikutnya adalam merpersiapkan kode HTML. Untuk latihan, buat folder khusus yang namanya ‘LatihanCSS’ (apa saja boleh kok). Di dalamnya buat folder bernama ‘images’. Letakkan 3 file gambar tadi ke folder image ini.

Buat sebuah file HTML (misal : index.html). Untuk membuat menu, ketikkan tag HTML berikut untuk membuat list.

<div id="menubar">
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
</ul>
</div>

Coba sekarang lihat file index.html di dalam browser. Maka hasilnya akan seperti gambar dibawah.

List masih muncul seperti biasa. Sekarang kita tinggal mengatur style CSSnya.

Mengatur CSS

Kode CSS saya jadikan satu dengan halaman index.html dengan cara mengetikkan kode <style type="text/css">.. kode css ... </style> di dalam file index.html. Anda bisa memisahkan file CSS dan file HTML lalu melakukan link ke file CSS dari file HTML dengan sintaks <link rel="stylesheet" type="text/css" href="style.css" /> .

Pertama, ketik kode CSS dibawah ini :


1. #menubar ul, #menubar li{
2. padding:0;
3. margin:0;
4. list-style:none;
5. }
6.
7. #menubar li {
8. float:left;
9. }
10.
11. #menubar {
12. background:#336633 url(images/menucss_02.png) repeat-x center left;
13. height:30px;
14. }
15.
16. #menubar a{
17. display:block;
18. padding: 3px 5px 3px 5px;
19. }
20.
21. #menubar a:link,
22. #menubar a:visited,
23. #menubar a:active {
24. color:#ccff99;
25. text-decoration:none;
26. }
27.
28. #menubar a:hover {
29. background:#669900 url(images/menucss_04.png) repeat-x center left;
30. }
31.
32. #menubar .current{
33. background:#336600 url(images/menucss_06.png) repeat-x center left;
34. }
35.

Pada kode diatas, ganti teks berwarna biru sesuai dengan lokasi dimana anda menyimpan gambar. Penjelasan kode sebagai berikut :

Baris 1-5 :

Menghilangkan padding dan margin dengan memberi nilai 0. Juga menghilangkan simbol bulat hitam pada list.

Baris 7-9 :

Float list item ( <li>) pada menubar. List kini tidak lagi dari atas ke bawah, tapi dari kiri ke kanan. kalau diberi nilai right, maka List dari kanan ke kiri.

Baris 11-14 :
Memberikan background pada Menubar. Potongan gambar pada slice kedua tadi diulang-ulang penempatannya secara horizontal.

Baris 16-19 :
Membuat link (<a>) agar ditampilkan sebagai element block. Gampangnya, link yang bisa diklik bukan hanya teksnya saja, tapi juga disekitarnya. Area yang bisa diklik berbentuk kotak.

Baris 20-26 :
Memberikan warna pada link (link pada saat di-klik, di-sorot, dan yang telah dikunjungi). Dan menghilangkan garis bawah pada link.

Baris 28-30 :
Mengubah background saat link di-sorot (hover).

Baris 32-34 :
Tambahkan atribut class="current" pada bagian <li> untuk menyatakan link tersebut sedang aktif.

Sekarang refresh halaman index.html yang sudah dibuka tadi, maka hasilnya akan terlihat. Hasilnya kurang lebih seperti gambar dibawah :

css-tab-6

Download file

Sekian panduannya, semoga orang-orang yang searching cara membuat css tab menubar bisa menemukan postingan ini Big Grin. Dan semoga dengan menuliskannya ke blog saya tidak lupa-lupa lagi kode CSSnya Tongue.

Kalau ada yang mengalami kesulitan atau kebingungan, silahkan tanyakan via komentar.

16 Comments

  1. hehehe.., tanks mas for sharing 🙂

  2. Permana Jayanta

    July 16, 2008 at 3:13 pm

    Yuk, sama-sama kang juned

  3. sip tutorialnya 🙂

  4. Permana Jayanta

    July 17, 2008 at 1:28 pm

    Hehe, makasih o-om …

  5. terima kasih tipsnya mas semoga berguna

    salam kenal

  6. Permana Jayanta

    July 17, 2008 at 10:32 pm

    Hehe, makasih ..
    Salam kenal juga

  7. Tutorialnya enak buat diterapin mas … langgeng aja buat blognya …

  8. mantaps!!!!!

  9. Ok, Trims infonya
    saya coba moga berhasil

    http://www.tulisantinta.co.cc

  10. thank’s to your tutorial…..
    good luck

  11. Thanks $ the tutorial. I hope U will make another tutorial that more challanges 4 me, ok!!! 🙂

  12. Thanks atas informasinya ya, sungguh sangat bermanfaat.

  13. => itu kodenya di letakkan dmn ya? Apa di ‘edit html’ blog? Kalo iya, di letakin tepatnya diatas kode apa / dibwh kode apa?

    => Kalo misalnya alamat url imagenya diganti di photobucket.com (sdh di upload) bs nggak ya ?

    Tlng d jwb ea,:-)

  14. Thanks for the great information. I have a blog discussing web site design tips and usabilty. If you want to take a look.

  15. Terima kasih ya, sangat membantu

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2019 Permana Jayanta

Theme by Anders NorenUp ↑