Membuat Menu dengan CSS

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Keberadaan menu dalam sebuah halaman website tentu sangatlah penting. Menu adalah Antar muka yang memudahkan pengunjung karena dengan Menu Seorang Visitor dapat dengan mudah mencari hal-hal yang mereka inginkan. Saat ini pembuatan menu banyak dilakukan dengan menggunakan CSS (Cascading Style Sheet). Apalagi dengan telah ditulisnya CSS 3 Penyajian menupun menjadi sangat variatif.

Kali ini saya akan sharing tentang pembuatan menu dengan menggunakan CSS. Postingan ini merupakan lanjutan dari postingan sebelumnya yang membahas tentang mengatur halaman Website dengan CSS jika anda belum membacanya silahkan baca disini.

setelah kita berhasil mengatur interface halaman website kita, bagian penting selanjutnya adalah membuat menu. sebelumnya kita sudah membuat sebuah wadah pada interface website kita untuk menampung menu ini. jadi, code-code menu akan diletakkan didalam tag berikut <div class="menu"> Code Menu ada disini </div>. Berikut adalah Listing Code menu. silahkan copy dan letakkan didalam tag div menu.
<ul>
<li><a href="#">Satu</a></li>
<li><a href="#">Dua</a></li>
<li><a href="#">Tiga</a></li>
<li><a href="#">Empat</a></li>
<li><a href="#">Lima</a></li>
<li><a href="#">Enam</a></li>
</ul>

Sedangkan untuk Code CSSnya, anda hanya perlu menambahkan beberapa baris code berikut. Silahkan Buka Code CSS anda kemudian Copy Paste code berikut
.menu ul{
margin:0;
padding:0;
}

.menu li{
list-style:none;
color:#FFF;
float:left;
display:inline;
position:relative;
}

.menu li a{
display:block;
background:0;
color:#000;
text-decoration:none;
font:bold 14px Arial;
text-shadow: -1px -1px 0 #88140e;
outline:none;
padding:7px 30px;
}

.menu li a:hover{
background:#2a2a2a;
color:#FFF;
}

Sampai disini Kita Sudah Berhasi Membuat Menu dengan CSS. Untuk Hasilnya, Kurang Lebih Akan Seperti berikut.
Membuat Menu dengan CSS

Tunggu Postingan Selanjutnya tentang membuat menu Bertingkat (Drop Down) dengan CSS Silahkan Baca disini. Happy Coding !
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.