BLANTERORBITv102

    Membuat Website Biodata Pribadi Menggunakan HTML Dan CSS Part 3

    Jumat, 27 Maret 2015
    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,

    Gambar-6-Membuat-Website-Biodata-Pribadi-Menggunakan-HTML-dan-CSS

    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,

    Gambar-7-Membuat-Website-Biodata-Pribadi-Menggunakan-HTML-dan-CSS

    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.

    Gambar-8-Membuat-Website-Biodata-Pribadi-Menggunakan-HTML-dan-CSS


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

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing