membuat menu horizontal di website dengan css - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul membuat menu horizontal di website dengan css, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Belajar CSS, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : membuat menu horizontal di website dengan css
link : membuat menu horizontal di website dengan css

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

Demikianlah Artikel membuat menu horizontal di website dengan css

Sekianlah artikel membuat menu horizontal di website dengan css kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel membuat menu horizontal di website dengan css dengan alamat link https://dev-create.blogspot.com/2013/09/membuat-menu-horizontal-di-website.html