Navigasi merupakan hal yang ponting untuk ada di website, ini untuk memudahkan user dalam menjelajahi isi website, Navigasi bisa disebut menu, menu ada yang berbentuk Vertical, dan ada juga yang berbentuk Horizontal.
Menu Vertical adalah menu yang berderet kebawah, sedangkan Horizontal Memanjang Kesamping.
Pada tips singkat berikut ini kita akan mencoba teknik dasar bagaimana teknik dasar membuat Horizontal menu dengan CSS.
Disini kita juga akan belajar Pseudo-element :before dan :first-child milik CSS.
Oke kita mulai dengan Membuat Struktur HTML seperti berikut ini
Penjelasan:
Inti utama dalam membuat menu horizontal yaitu pada baris code 4, dimana tertulis display:inline
.horizon-menu li{display:inline;margin:5px 0}
Sedangkan untuk membuat pemisah kita menggunakan li:before{content:' | '}, dimana akan menulis karakter [ | ]
Agar pemisah tidak muncul diawal maka kita membutuhkan li:first-child:before{content:' '}
Tambahan:
Untuk membuat menu tersebut Responsive terhadap lebar layar, dimana akan berfungsi dengan baik jika dibuka di layar yang lebih kecil seperti Smartphone atau PC Tablet, maka kita tambahkan code berikut:
I'm just simple person, web developer part time, web design holic, website researcher.
Work in the world of websites & coding for eat :
View all posts by Abuser
Artikel-artikel menarik dari website lain yang membahas Pembuatan Website dan Desain
Warning: strpos() expects parameter 1 to be string, array given in /home2/tutoria1/public_html/wp-includes/SimplePie/Content/Type/Sniffer.php on line 97
Warning: substr() expects parameter 1 to be string, array given in /home2/tutoria1/public_html/wp-includes/SimplePie/Content/Type/Sniffer.php on line 99
Warning: strpos() expects parameter 1 to be string, array given in /home2/tutoria1/public_html/wp-includes/SimplePie/Content/Type/Sniffer.php on line 97
Warning: substr() expects parameter 1 to be string, array given in /home2/tutoria1/public_html/wp-includes/SimplePie/Content/Type/Sniffer.php on line 99
Warning: strpos() expects parameter 1 to be string, array given in /home2/tutoria1/public_html/wp-includes/SimplePie/Content/Type/Sniffer.php on line 97
Warning: substr() expects parameter 1 to be string, array given in /home2/tutoria1/public_html/wp-includes/SimplePie/Content/Type/Sniffer.php on line 99
It’s so useful for beginner like me… Thank you.
Coll….I Like It
makasih mas sangat membantu saya,trims
Ini dia yang saya cari-cari…
Terima kasih,,.. sangat membantu sekali… :D
class=”lang” pada HTML
ini maksudnya apa ya?
maklumin saya masih tahap belajar :)
Boleh kamu hiraukan saja, dihapus pun tak apa, karena itu kayaknya hanya dipakai untuk project kami waktu itu dan lupa disesuaikan dengan tutorialnya.
oo.. begitu ya
thanks..