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 **

Artikel Lainnya

  • 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).
  • 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
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..

Kiriman terbaru