Membuat Website Biodata Pribadi Menggunakan HTML Dan CSS Part 3

C. Membuat Menu Vertikal Dengan CSS

Kita anggap bagian header sudah selesai , Lihat Membuat Header Menggunakan Gambar dan Text . Sekarang kita akan terfokus pada bagian left sidebar , yang akan kita isi menu vertikal. Buka kembali folder proyek kita , dan buka kembali file index.html dan style.css .

Bada blok left , yang sebelumnya berisi "Ini bagian kiri" ganti dengan list , lihat kode dibawah.

<div id="left">
  <div>
   <ul>
    <li>Home</li>
    <li>About Me</li>
    <li>Gallery Foto</li>
    <li>Daftar Biografi</li>
   </ul>
  </div>
</div>

Maka pada browser akan seperti gambar dibawah ini,

Sekarang kita kostum menu dengan css, lihat kode yang cukup panjang dibawah ini ,

#left {
 height: 100%;
 width: 20%;
 float: left;
 background-color: #f75b5b;
}
.menu ul , a{
 text-decoration: none;
 list-style: none;
 margin-top: 0;
 margin-left: -45px;
}
.menu li , a{
 text-decoration: none;
 background-color: #fff;
 margin-bottom: 5px;
 padding: 10px;
 text-align: right;
}

Jangan lupa untuk menambah class menu pada html yang terdapat pada css lihat kode ,

<div id="left">
  <div class="menu">
   <ul>
    <li>Home</li>
    <li>About Me</li>
    <li>Gallery Foto</li>
    <li>Daftar Biografi</li>
   </ul>
  </div>
</div>

Lihat gambar di bawah untuk hasilnya,

Selanjutnya , tambah sedikit fungsi hover untuk menunya apabila menu di klik. Maka lengkapnya akan seperti berikut kode css nya ,

#left {
 height: 100%;
 width: 20%;
 float: left;
 background-color: #f75b5b;
}
.menu ul , a{
 text-decoration: none;
 list-style: none;
 margin-top: 0;
 margin-left: -45px;
}
.menu li , a{
 text-decoration: none;
 background-color: #fff;
 margin-bottom: 5px;
 padding: 10px;
 text-align: right;
 color: black;
}
.menu a:hover {
 color: #f75b5b;
}

Pada browser maka akan tampil seperti ini apabila di arahkan mouse nya ke menu yang di sisipi link.

Tutorial selanjutnya kita akan membuat bagian isi, di antarannya dalam menggunakan tabel.