Search This Blog

Membuat Horizontal Menu

  • Monday, June 11, 2018 at 6:12:00 PM
  • 0 Comments
  • Views
Awal Kisah
Catatan ini dibuat agar aku bisa mengingat kembali kode-kode CSS yang telah aku pelajari dari Intenet, catatan ini aku sadur dari salah satu blog yang bernama Bertzzie.

Menu Horizontal dengan Display:Inline
Yang pertama adalah kode untuk membuat vertical list menjadi horizontal menu dengan mengubah properti display dari elemen li menjadi bernilai inline. Untuk kode HTML nya adalah seperti berikut ini: Kemudian dipadukan dengan CSS berikut ini: Untuk demo Menu Horizontal dengan Display:Inline nya bisa dilihat di link di bawah ini:
Sayangnya, pembuatan menu seperti ini memiliki sedikit kekurangan, yaitu kita tidak dapat sepenuhnya mengontrol margin dan padding dari setiap elemen. Secara standar, browser akan menambahkan satu spasi diantara setiap elemen li. Untuk menanganinya, kita dapat menggunakan float.

Menu Horizontal dengan Float
Seperti namanya, menu horizontal dengan float dibuat dengan menggunakan properti float. Pengunaan float akan memungkinkan kita memiliki kontrol penuh akan penampilan keseluruhan dari sebuah elemen. Kode HTML nya seperti berikut: Dibuat menjadi sebuah menu horizontal dengan menggunakan kode CSS berikut: Demonya bisa dilihat di link di bawah ini:
Setelah di otak-atik entah kenapa aku tidak bisa membuat menu float ini berada di tengah padahal aku sudah menambahkan text-align:center; di CSS nya. Bila ada yang ingin menambahkan dan ingin menolong saya memperbaiki kode tersebut bisa di sampaikan melalui komentar ya manteman.

Referensi
No comments
No comments

Post a Comment