CSS : Membuat Menu Navigasi

Membuat Menu Navigasi

Untuk post kali ini saya akan mengajak anda membuat tutorial menu navigasi dibawah header.

Membuat file HTML untuk Menu Navigasi

Baiklah kita langsung saja , ketikkan kode HTML untuk membuat menu navigasi dibawah ini :

<html>
<head>
<title>Membuat Menu Navigasi</title>
<link href="style.css" rel="stylesheet" type="text/css"
media="all" />
</head>
<body>
<div id="container">
<div id="menu">
<a href="#">HOME</a>
<a href="#">PRODUK</a>
<a href="#">ARTIKEL</a>
<a href="#">MEMBER</a>
<a href="#">TESTIMONIAL</a>
<a href="#">KONTAK</a>
<a href="#">ABOUT US</a>
</div>
</div>
</body>
</html>

Keterangan dari kode HTML diatas:

Kode tersebut saya ambil hanya bagian menu navigasi saja dari file HTML layout website yang nantinya bisa di gabung lagi sehingga bisa membentuk sebagai website utuh.
Disini saya hanya menambahkan navigasi mulai Home sampai dengan About Us, anda bisa merubah sesuai dengan keinginan anda sendiri, dan saya sudah memberikan link yang isinya hanya “#”.

Buatlah folder baru dengan nama Bab II Membuat Menu Navigasi dan simpan file HTML diatas dengan nama menu-navigasi.html

Membuat File CSS dari Menu Navigasi

Selanjutnya anda buat lagi file CSS berikut ini :

#container{
width:1000px;
margin:0 auto;
font-family: verdana;
}
#menu{
background-color:#993300;
width:1000px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
a:link{
background-color:#FFFF00;
color:#000099;
text-decoration:none;
font-size:14px;
}
a:hover{
background-color:#0000CC;
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
font-size:16px;
}
a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}

Penjelasan dari CSS rule diatas sebagai berikut ini :

#container {…} seperti biasanya saya membuat page dengan lebar 1.000 px dengan margin 0 dan auto untuk menempatkannya ditengah.
#menu {…} untuk membuat background menu dengan warna #993300, lebar 1.000 px, penempatan text di tengah dengan kali ini saya menghilangkan ukuran tinggi dan mengatur dengan memberi nilai padding atas dan bawah masing-masing 10 px.
a:link {…} ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari content atau image yang telah diberi link. Text menu telah diberi link dan pengaturannya di sini dengan pengaturan yaitu background color dari text tesebut dengan warna kuning (#FFFF00 ) dan text dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu text diberi link maka saya memberikan text decoration dengan nilai none dengan font size 14 px.
a:hover {…} adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi biru ( #0000CC ) dengan warna tulisan menjadi putih (#FFFFFF ), kali ini saya memberikan hurufnya menjadi tebal serta diberi under line serta font size berubah menjadi 16 px.
a:active {…} dimana keberadaan text ketika mouse di klik dan saya memberi nilai background color berubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam ( #000000 ) lalu ketebalan saya kembalikan lagi seperti asal.

Setelah itu simpan file ini dengan nama style.css didalam folder sama dengan file HTML, lalu anda jalankan.

Berikut screenshotnya :

Kelihatannya anda makin menyukai dengan penggunaan CSS ini, cukup mudah bukan…?

Silahkan anda membuat kreasi sendiri dengan merubah nilai dari CSS rule ini dan anda juga bisa mengganti tulisan dengan gambar.

Materi Pembellajaran CSS Selanjutnya adalah : Mengedit Content.

Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)