membuat menu horizontal di website dengan css

Salam selamat saya tuturkan kepada pengunjung setia ebsof... yang masih setia walaupun belum ada artikel yang sempat saya update, dikarenakan kesibukan didalam dunia nyata...

Tidak perlu panjang lebar lagi.. kali ini saya akan menjelaskan tahap pengembangan dari website dinamis ebsofmedia V.2 , yang kali ini kita akan menambahkan fitur menu horizontal pada website. yang nantinya akan kita buat dinamis, maksudnya... kita dapat mengubah-ngubah isi menu sesuai dengan yang kita mau tanpa perlu mengedit kodenya..dan tentunya ini akan berhubungan dengan database.

Langsung aja ... berikut scrantshoot nya :

Dan jika ingin melihat tampilan secara langsung bisa  anda lihat DEMO

Nah ,, untuk membuat menu horizontal dengan css pada website dinamis ebsofmedia , anda hanya perlu menambahkan code di bawah ini , pada file index.php

  <tr bgcolor="#003399">
    <td colspan="2">
        <ul id="atas">
        <li><a href="#" title="Kembali ke Halaman Utama">HOME</a></li>
        <li><a href="#">Kontak</a></li>
        <li><a href="#">Profil</a></li>
        <li><a href="#">About</a></li>
        </ul>    
    </td>
  </tr>

Perhatikan pada coding di atas , sebenarnya kita hanya , menambahkan 1 baris lagi pada table, yang kita sisipkan pada file index.php , dimana untuk menambahkan baris baru di awali dengan tag <tr> .... dan di dalamnya kita sisipkan tag <td> ... setelah kita menambahkan baris baru kemudian kita sisipkan kode Menu

Setelah itu.. kita perlu menambahkan coding css pada file style.css , dimana codingnya yaitu :

#atas ul{
list-style:none;
width:100%;
float:left;
background:#FF6600;
}
#atas li{
display:block;
padding-left:10px;
}
#atas li a{
display:block;
float:left;
background:#003399;
padding:5px 12px;
text-decoration:none;
color:#FFFFFF;
font:12px Arial, Helvetica, sans-serif;
font-weight:bold;
border-right:1px solid #3e65b2;
}
#atas li a:hover{
color:#FFF;
background:#3e65b2;

}
ul {list-style: none; margin: 0; padding: 0;}

Setelah ke dua file tersebut diperbaharui.. simpanlah. dan siap untuk dijalankan...