Tutorial Membuat Menu Dengan CSS Step by Step

Tutorial Membuat Menu Dengan CSS
Ga penting sih sebenernya gw mau nulis tutorial ini, secara banyak banget tutorial untuk ngebuat menu horizontal dengan CSS. Cuma entah kenapa pengen aja nambahin bendahara tutorial di blog gw ini, dan gw mau coba jelasin sejelas2nya step by step ngebuat menu horizontal dengan CSS.
1. Siapin dulu tag UL LI untuk permulaan..

HTML

1 2 3 4 5 6 7

<ul>   <li><a href="">HOME</a></li>   <li><a href="">ABOUT</a></li>   <li><a href="">NEWS</a></li>   <li><a href="">CATEGORY</a></li>   <li><a href="">CONTACT</a></li> </ul>

Preview

2. Kemudian buat CSS untuk membuat sytle Menghilangkan garis bawah, menghilangkan dot list, dan memberi warna pada menunya

CSS

1 2 3 4 5 6 7 8

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ }

Preview

3. Tambahkan li {display:inline;} agar list menu vertical tersebut berubah menjadi Horizontal

CSS

1 2 3 4 5 6 7 8 9 10 11

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ } li {   display:inline; /*membuat menu menjadi Horizontal*/ }

Preview

4. Nah sekarang tambahin background-color:#ff0000; di selector li biar ada background warna merah

CSS

1 2 3 4 5 6 7 8 9 10 11 12

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ } li {   display:inline; /*membuat menu menjadi Horizontal*/   background-color: #ff0000; /*ngasi warna merah di background menunya*/ }

Preview

5. Ups.. kok ada spasi kosong? ok, kasi float:left; di selector li biar nempel ke kiri dan ga ada spasi kosong lagi

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ } li {   display:inline; /*membuat menu menjadi Horizontal*/   background-color: #ff0000; /*ngasi warna merah di background menunya*/   float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/ }

Preview

6. Nah sekarang udah dempet.. yuks kasi padding:10px; di selector li biar ada jarak antara menu dan jarak atas bawahnya

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ } li {   display:inline; /*membuat menu menjadi Horizontal*/   background-color: #ff0000; /*ngasi warna merah di background menunya*/   float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/   padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/ }

Preview

7. Sekarang tambahin border-right:solid 1px #ccc; di selector li biar ada bates pemisahnya..

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ } li {   display:inline; /*membuat menu menjadi Horizontal*/   background-color: #ff0000; /*ngasi warna merah di background menunya*/   float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/   padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/   border-right:solid 1px #000; /*ngasi border kanan menu untuk pembatas*/ }

Preview

8. Nah pembatas udah ada, coba diliat.. Di menu terakhir ikut nimbrung juga border kanan kan? Sekarang buat selector baru untuk ngilangin border kanan ituli:last-child {border-right:none;}

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ } li {   display:inline; /*membuat menu menjadi Horizontal*/   background-color: #ff0000; /*ngasi warna merah di background menunya*/   float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/   padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/   border-right:solid 1px #000; /*ngasi border kanan menu untuk pembatas*/ } li:last-child {   border-right:none; /*untuk ngilangin border kanan di list menu yg pallingn akhir*/ }

Preview

9. Ok sekarang bagian akhir.. kasi efek hover ganti warna background pas mouseover alias hover di menunya.. tambahin selector li:hover {background-color:#ccc;}

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

ul {   list-style:none; /*menghilangkan dot list*/ } a {   text-decoration:none; /*menghilangkan garis bawah*/   color: #000; /*memberi warna hitam*/   font-weight:bold; /*menebalkan font menu*/ } li {   display:inline; /*membuat menu menjadi Horizontal*/   background-color: #ff0000; /*ngasi warna merah di background menunya*/   float:left; /*bikin nempel ke kiri biar ga ada spasi kosong*/   padding:10px; /*ngasi jarak atas bawah kiri kanan di menu*/   border-right:solid 1px #000; /*ngasi border kanan menu untuk pembatas*/ } li:last-child {   border-right:none; /*untuk ngilangin border kanan di list menu yg pallingn akhir*/ } li:hover { background-color:#ccc; /*untuk ngasi effek ganti warna background pas mouse lewat*/ }

Preview

Oke… Beres.