Membuat menu dengan CSS

membuat menu dengan cssKita bisa berkreasi membuat menu sendiri yang unik sesuai selera kita baik warna, bentuk, maupun gambar. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.

Kali ini saya akan berbagi tips sedikit tentang bagaimana membuat menu sederhana dengan html+css.

Pertama kita membuat dulu serangkaian hyperlink dalam area <body>..</body> yang disusun dalam sebuah HTML list dengan kode :

<div id="menuku">
<ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
</div>

Jika kita simpan, kode diatas akan menghasilkan tampilan seperti berikut :

Kemudian kita membuat susunan kode css yang nantinya mengubah tampilan dari menu yang sudah dibuat. Untuk css kita letakkan di bagian <head>..</head>, kodenya bisa dilihat berikut :

<style type="text/css">
DIV#menuku {
	/* ini digunakan untuk mengatur bingkai menu */
	width: 400px; /* digunakan untuk mengatur lebar bingkai menu */
	margin: 0 auto; /* digunakan untuk mengatur posisi menu ditengah halaman */
	padding: 10px; /* digunakan untuk mengatur jarak bingkai dengan menu */
	background-color: #404040;
}
DIV#menuku ul {
	/* ini digunakan untuk merubah tampilan list */
	list-style: none; /* digunakan untuk menghilangkan simbol list */
	margin: 0; /* digunakan untuk menghilangkan jarak list dengan bingkai menu */
	padding: 0; /* sda */
}
DIV#menuku ul li {
	display: inline; /* mengubah list menjadi horizontal */
	padding-right: 5px; /* mengatur jarak list item */
}
DIV#menuku ul li a {
	/* digunakan untuk mengatur hyperlink yang sudah dibuat */
	background-color: #aaaaaa; /* warna background tulisan */
	padding: 3px 10px 3px 10px; /* memberi efek kotak pada tulisan */
	color: white; /* memberi warna tulisan */
	border:1px dotted #fff; /* memberi garis luar kotak hyperlink */
	text-shadow: 1px 1px #000; /* efek bayangan pada tulisan */
  text-decoration:none; /* menghilangkan garis bawah */
	/* dengan konfigurasi diatas hyperlink akan terlihat berbentuk kotak */
}
DIV#menuku ul li a:hover {
	/* digunakan untuk mengatur tampilan hyperlink pada saat mouse diatasnya */
	background-color: silver;
}
</style>

Setelah selesai menulis cssnya dan kita simpan maka hasil akhir akan berubah seperti berikut :

Kita juga bisa menggunakan background gambar atau model-model lainya yang dipasang melalui css, insyaallah lain kali dibahas.

Semoga bermanfaat
Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.
  • Kenapa menggunakan css (Cascading Style Sheets)
    CSS sudah tidak asing lagi dikalangan para blogger atau pengembang website karena css sangat mudah digunakan dan cara penulisannya pun sangat gampang diingat. Tapi tahukah anda masih banyak lagi alasan kenapa css menjadi idola para blogger dan pengembang? Dalam artikel ini saya akan mengemukaan alasan-alasan kenapa menggunakan css.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit
  • Membuat efek gambar dengan css
    CSS memiliki kemampuan efek khusus yang bisa digunakan untuk memperindah tampilan web atau blog. Selain bisa kita terapkan pada objek-objek tulisan, tabel, dan list kita juga bisa gunakan untuk mengatur tampilan gambar.
  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).

Kiriman terbaru