Posted by : Unknown Monday, January 19, 2015

Pada sesi sharing kali ini penulis akan bercerita tentang bagaimana kita membuat navigasi menu vertikal. Perlu diketahui bahwa pembuatan menu vertikal bisa di terapkan dengan memakai CSS, javascript, jquery. Untuk sharing kali ini, penulis akan bercerita tentang pembuatan navigasi menu vertikal dengan menggunakan source code CSS. 

Untuk membuat menu seperti ini maka file HTML harus dibuat terlebih dahulu, seperti yang telah di jelaskan pada sesi sharing sebelumnya yaitu: 'Tips Membuat Navigasi Menu Horisontal'. Let's begin this session. Pertama buat file HTML nya yang akan dimodifikasi dengan source code CSS. Buat HTML sperti berikut ini:







Keterangan source code HTML diatas adalah: Membuat 4 pilihan menu (list) yang akan tampil:
.Home
.Profile
.Help
.Contact US

Source code HTML ini akan dimodifikasi dengan source code CSS untuk membuat navigasi menu vertikal. Source code CSS nya adalah seperti:

Penulis akan bahas lagi kode kode CSS diatas, Pada kesempatan ssesi kali ini penulis menggunakan modifikasi warna background dengan linear-gradient. Para web designer biasanya akan memilih akan menggunakan hasil image yang di ciptakan dengan Photoshop atau menggunakan source code CSS yang simple. 

Pada pembahasan kali ini, penulis menggunakan source code CSS yang simple dan mudah digunakan. Mari mulai bahas source code CSS nya.

File pada HTMl yang telah dibuat di atas adalah dengan id=menu, maka dalam pembuatan source code CSS nya ketikkanlah menu, ini dimaksudkan untuk memberi style pada menu tersebut.
margin:2px; --> ini adalah jarak/spasi text, jika margin di set pada 0 px, maka letak file HTML tidak akan terdapat jarak/spasi.
width:100px; --> pengaturan lebar 100 px.
padding:1px; --> pengaturan untuk jarak/spasi antar text.
background:linear-gradient(-20deg, #f40d0d, #000000); --> pemberian wanra latar dengan kombinasi dua warna(gradient dengan posisi -20 derajat).-20 derajat disini berarti mengatur posisi gradient yang akan ditampilkan. Warna mana yang ingin ditampilkan.
border-bottom:1px solid white;---> penggunaan warna putih dengan tebal 1px pada border diposisi bawah. Untuk memberi warna text maka source code CSS nya adalah:
#menu li a
{
color:white;-->pemberian warna putih pada text untuk jenis link<a>;

Untuk result/hasil akhir dengan menggunakan source code CSS akan tampil seperti ini: 


 Good luck guys :D. Try and practice to get more experience



Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Translate Into Your Language

Popular Post

Powered by Blogger.

- Copyright © Sharing All Genre Experience -Robotic Notes- Powered by Blogger