Membuat Website Biodata Pribadi Menggunakan HTML Dan CSS Part 3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

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.

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Membuat Website Biodata Pribadi Menggunakan HTML Dan CSS Part 3, Diterbitkan oleh scodeaplikasi pada Kamis, 26 Maret 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.