Breadcrumb adalah teknik navigasi menampilkan semua halaman yang telah kita kunjungi dari halaman homepage ke halaman yang sedang dilihat. Semua halaman terkait untuk navigasi breadcrumb. Biasanya ini ditempatkan di dekat bagian atas halaman web. Jadi misalnya, jika anda melihat ke bagian atas halaman ini anda akan melihat breadcrumb navigasi menu yang mengarah jalan kembali ke homepage. Breadcrumb juga berfungsi untuk memudahkan user dalam mengakses setiap halaman di website anda. Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Breadcrumb Menggunakan HTML5 dan CSS3.
Hal pertama yang perlu teman-teman ketahui adalah breadcrump ini kita buat menggunakan unorderlist tag supaya memudahkan teman-teman dalam memberikan stylenya. Ok, berikut adalah langkah-langkah Cara Membuat Breadcrumb Menggunakan HTML5 dan CSS3:
-Pertama teman-teman ketikan kode html5 di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Membuat Breadcrumb</title> </head> <body> <ul class="breadcrumbs"> <li><a href="#">Paket Kursus</a></li> <li><a href="#">Web Master</a></li> <li>HTML5 & CSS3</li> </ul> </body> </html> |
Setelah teman-teman buat silakan teman-teman simpan. Dan coba buka di browser teman-teman, maka hasilnya akan menjadi seperti gambar di bawah ini:
Bisa teman-teman lihat tampilannya hanya tampilan dasar dari tag unorderlist maka dari itu teman-teman harus lanjut ke langkah yang kedua.
-Langkah ke-dua, teman-teman ketikan kode css3 di bawah ini untuk mempercantik breadcrump dan memberikan efek pada saat di hover, berikut kode css3-nya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
body { padding: 10px; } * { -webkit-backface-vibisility: hidden; -moz-backface-vibisility: hidden; -ms-backface-vibisility: hidden; backface-vibisility: hidden; } /*Menghilangkan liststyle pada tag list*/ .breadcrumbs { list-style: none; margin: 0; padding: 0; } /*Merubah tag list menjadi inline dan membuat hruf menjad capital*/ .breadcrumbs li { list-style: none; margin: 0; padding: 0; display: block; float: left; font-family: Helvetica Neue,sans-serif; font-size: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; line-height: 20px; color: hsl(0, 0%, 30%); } .breadcrumbs li a { display: block; padding: 0 40px 0 0px; color: hsl(0, 0%, 30%); text-decoration: none; height: 20px; position: relative; perspective: 700px; } /*Membuat tanda panah yang terdapat di akhir tag list*/ .breadcrumbs li a:after { content: ''; width: 20px; height: 20px; border-color: #333; border-style: solid; border-width: 1px 1px 0 0; -webkit-backface-visibility: hidden; outline: 1px solid transparent; position: absolute; right: 20px; -webkit-transition: all .15s ease; -moz-transition: all .15s ease; -ms-transition: all .15s ease; transition: all .15s ease; -webkit-transform: rotateZ(45deg) skew(10deg, 10deg); -moz-transform: rotateZ(45deg) skew(10deg, 10deg); -ms-transform: rotateZ(45deg) skew(10deg, 10deg); transform: rotateZ(45deg) skew(10deg, 10deg); } /*Memasukan efek hofer*/ .breadcrumbs li a:hover:after { right: 15px; -webkit-transform: rotateZ(45deg) skew(-10deg, -10deg); -moz-transform: rotateZ(45deg) skew(-10deg, -10deg); -ms-transform: rotateZ(45deg) skew(-10deg, -10deg); transform: rotateZ(45deg) skew(-10deg, -10deg); } |
Keterangan fungsi kode CSS3 ada di commenting dalam kode di atas.
Nah, setelah teman-teman selesai memasukan kode CSS3 di atas teman-teman save dengan style.css lalu buka file html yang telah di buat dan beri link di bawah ini di dalam tag head, berikut link-nya:
|
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
Save kembali kode htmlnya dan teman-teman refresh browser-nya, maka hasilnya akan menjadi seperti gambar di bawah ini:
Pada saat teman-teman arahkan kursor pada link breadcrumb di atas maka tanda panah akan mengalami efek mengerecut.
Bagaimana teman-teman cukup mudahkan Membuat Breadcrumb Menggunakan HTML5 dan CSS3.
Sekian tutorial kali ini tentang Cara Membuat Breadcrumb Menggunakan HTML5 dan CSS3, maaf bila ada kesalahan sampai berjumpa kembali di tutorial berikutnya. Selamat mencoba.