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

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

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 :


Menu file HTML menu navigasi tanpa CSS


Menu Navigasi setelah ada CSS dan Ketika file dibuka


 Menu Navigasi setelah ada CSS dan Ketika mouse berada diatas


                                       Menu Navigasi setelah ada CSS dan Ketika di klik 

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.