Ilmu Satria - Membuat Navigasi Horizontal

Halo sobat ilmu satria, jadi pada kesempatan kali ini saya akan memberikan tutorial basic tentang html lebih tepatnya yaitu tentang cara membuat menu navigasi horizontal pada html, jadi tanpa memberikan pembuka panjang dan lebar langsung saja kita menuju kepada tutorialnya.

Mengenal Menu Horizontal


Menu navigasi horizontal merupakan sebuah tampilan pada html dimana terdapat teks yang berjajar membentuk seperti horizontal, lebih tepatnya seperti gambar di bawah ini.

Tutorial membuat menu horizontal dengan CSS


1. Langkah pertama yang harus kalian lakukan terlebih dahulu buka software kesayangan kalian, entah notepad++ atau sublime text.
2. Siapin dulu tag UL LI untuk permulaan.

<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 :


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

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 :


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

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 :


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

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 :


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

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 :


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

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 :


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

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*/ }

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

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 : 


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

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:


11. Selesai

Penutup


Itulah artikel yang dapat saya sampaikan mengenai cara membuat menu navigasi horizontal pada html, jika artikel ini bermanfaat silahkan dishare ke media sosial kalian, jika ada pertanyaan bisa ditanyakan melalui kolom komentar.Terima kasih.