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.

Share This :