Coding Menu Navigasi Breadcrumb Anggun di CSS3
Menu dan tautan navigasi mungkin merupakan elemen antarmuka paling penting untuk tata letak web. Ini adalah satu-satunya outlet bagi pengguna untuk bepergian antar halaman dan berinteraksi dengan semua konten yang Anda buat. Breadcrumb menawarkan fungsionalitas serupa dengan manfaat tambahan melacak posisi Anda saat ini. Anda akan bisa tampilkan semua jalur tautan sebelumnya saat pengguna menelusuri hierarki situs Anda.
Dalam tutorial ini kita akan membuat menu navigasi breadcrumb yang brilian dengan beberapa efek CSS3. Ini telah diuji untuk bekerja di semua browser yang kompatibel dengan CSS3, bahkan browser yang lebih tua yang tidak mendukung CSS3 masih akan merendernya dengan benar dalam banyak kasus.
Sebelum kita menyelami kode kita akan berbicara sedikit tentang fungsi remah roti kami, tutorial lengkap sekaligus!
Menawarkan Jejak
Jejak remah roti tidak lebih kompleks dari menu lainnya. Gaya kami akan menggunakan properti CSS yang jauh lebih kompleks daripada kebanyakan contoh, namun kerangka kosong kami masih ada untuk memandu pengguna dari satu halaman ke halaman lainnya..
Dalam contoh ini kita akan membuat ulang gaya yang sama dengan menu dukungan Google. Anda dapat melihat menu mereka di halaman dukungan Gmail untuk mendapatkan gambaran tentang tujuan kami. Akhirnya kami mau memberikan pengalaman pengguna terbaik kami untuk semua pengguna, terlepas dari Sistem Operasi mereka atau perangkat lunak browser, dengan demikian saya telah membangun 2 contoh kode berbeda untuk mendukung degradasi yang lebih baik di antara browser lama.
Yang pertama dibangun menggunakan gambar latar belakang khusus dan penyelarasan CSS yang tepat. Semua acara melayang dan acara aktif dibuat sebelumnya hanya dengan beberapa gaya CSS, tetapi pengguna yang gambarnya dimatikan tidak akan dapat mengalami efek ini! Inilah sebabnya saya juga membuat menu yang mirip dengan gradien CSS, sudut membulat, dan bayangan kotak.
Jika Anda gugup mendukung kedua gaya, Anda dapat memilih di antara keduanya untuk situs Anda sendiri. Sebagian besar pengunjung akan menggunakan gambar secara default, tetapi gali melalui alat analisis situs web Anda jika Anda menginginkan data pengunjung yang lebih tepat.
Kata-kata yang cukup, mari lompat ke proyek! Kami akan mulai dengan membuat kerangka HTML dasar dan beralih ke efek gaya yang berbeda. Pertama-tama Anda perlu mengunduh gambar diperlukan untuk proyek tersebut.
HTML Bare-Bones
Saya memulai dokumen saya dengan template halaman HTML5 standar. Ini termasuk DOCTYPE default, terkait CSS, dan semua elemen dasar. Saya telah menambahkan kode di bawah ini jika Anda ingin memulai dokumen Anda sendiri dengan cara ini. Perhatikan bahwa itu seharusnya tidak mempengaruhi bagaimana remah roti Anda ditampilkan, jadi silakan gunakan templat halaman Anda sendiri jika diinginkan.
Halaman Default
Saya akan membagi kode menjadi dua blok yang berbeda. Blok pertama dengan gambar dibangun dengan cara yang sedikit berbeda, diikuti oleh menu kami tanpa gambar. Setiap set diberikan sendiri ID sehingga kami dapat mengidentifikasi konten lebih mudah. Jika Anda juga penggemar jQuery, Anda dapat menggunakan Pemilih #ID untuk memanipulasi semua elemen DOM internal.
Pertama kita punya mengandung div dengan id “remah roti“. Dalam file demo saya telah menggunakan ini untuk memisahkan kode kami dan memindahkannya ke halaman dengan beberapa margin tambahan. Anda bisa menghapus div luar ini, tetapi Anda harus mengubah gaya segalanya agar sesuai dengan templat baru. Tidak ada ruginya meninggalkan wadah karena Anda akan dapat lebih mudah mengontrol pemosisian.
Secara internal, saya telah membuat remah roti menggunakan daftar yang tidak diurutkan. Ada begitu banyak cara unik untuk menyesuaikan daftar gaya HTML, dan remah roti hanyalah salah satunya. Anda mungkin memperhatikan bahwa saya telah memberikan item daftar awal a kelas dari “pertama“. Ini diperlukan untuk beberapa lapisan tambahan agar item menu tetap sesuai. Selain itu kecil span span ditambahkan sehingga kami memiliki batas kiri yang tepat yang tidak tumpang tindih dengan gambar latar belakang.
Selain itu setiap tautan jangkar ditanam dengan angka yang menurun untuk indeks-z milik. Kita harus menggunakan gambar masing-masing tautan kami tumpang tindih untuk menampilkan panah remah roti dengan benar. Cara termudah untuk mencapai ini adalah menyesuaikan indeks-z jadi setiap tautan melapisi berikutnya. Saya mulai dengan 9 dan bekerja dari sana, tetapi jika Anda memiliki lebih banyak tautan di menu Anda, mulailah dengan bilangan bulat yang lebih tinggi.
Menu Tanpa Gambar
Untuk dengan anggun menurunkan remah roti kami kita membutuhkan set sekunder daftar item HTML. Jika Anda mencoba mundur pada satu navigasi, Anda bisa menggunakan jQuery untuk mendeteksi agen peramban dan menerapkan ID yang sesuai. Sayangnya ini tidak selalu dapat diandalkan (untuk pengguna seluler tertentu, misalnya). Solusi lain adalah dengan termasuk stylesheet khusus IE dan sembunyikan atau tampilkan menu mana yang paling berhasil - tetapi tentu saja, opsi ini hanya untuk Internet Explorer.
remah roti2 adalah ID baru kami yang digunakan untuk menargetkan menu tanpa gambar. Sesuai dengan pola ini, saya telah menggunakan remah2 sebagai kelas untuk daftar tidak berurutan. Perhatikan bahwa alasan kami menggunakan kelas adalah untuk nya kesederhanaan untuk menduplikasi menu ini, jadi ketika Anda ingin beberapa remah roti berbeda pada halaman Anda, dengan kelas-kelas ini ini tidak akan pernah menjadi masalah.
Kami telah menyimpannya .pertama kelas tetapi juga ditambahkan .terakhirkelas ke item daftar akhir. Tanpa gambar, kami tidak dapat menduplikasi panah untuk setiap item menu navigasi, jadi saya telah menggunakan beberapa sudut bundar untuk membumbui menu sekunder. .pertama kelas dan .terakhir memanipulasi radius batas di bagian paling ujung menu kami untuk menciptakan gaya web 2.0 yang sangat keren.
Gambar Latar Belakang Geser CSS
Untuk beberapa efek yang lebih sederhana, saya telah menggabungkan kedua remah roti bersama-sama saat membangun properti. Ini berguna karena tidak hanya menghemat ruang, tetapi ketika kembali mengedit gaya itu lebih mudah untuk disesuaikan penampilanmu sendiri.
Untuk keduanya #remah roti dan # breadcrumb2 Saya sudah siap daftar-gaya: tidak ada; jadi semua item internal tidak akan memiliki spidol. Anda dapat meninggalkan ini jika Anda suka efeknya, tetapi saya menemukan HTML menjadi melelahkan untuk dikerjakan dan jauh lebih mudah untuk membuat ikon baru. Jadi mari kita mulai dengan .remah-remah kelas.
.remah display: blok; .crumbs li display: inline; . remah li.first padding-left: 8px; . remah-remah a,. remah-remah a: tautan,. remah-remah a: dikunjungi color: # 666; display: blok; mengapung: kiri; ukuran font: 12px; margin-left: -13px; pengisi: 7px 17px 11px 25px; posisi: relatif; teks-dekorasi: tidak ada; .crumbs li a background-image: url ('... /img/bg-crumbs.png'); background-repeat: no-repeat; posisi latar belakang: 100% 0; posisi: relatif; . remah-remah a: hover color: # 333; posisi latar belakang: 100% -48px; kursor: pointer; . remah-remah: a aktif: warna: # 333; posisi latar belakang: 100% -96px; . remah li. pertama rentang tinggi: 29px; lebar: 3px; border-left: 1px solid # d9d9d9; posisi: absolut; atas: 0px; kiri: 0px; Kita setel daftar tidak terurut kami menjadi blok jadi tidak ada lagi yang merayap di sekitar area. Perhatikan daftar item ditampilkan sebaris sementara setiap tautan jangkar diberi lebih banyak ruang untuk disebarkan. Kami ingin semua ruang di menu kami dapat diklik sehingga ini membutuhkan membangun jangkar kami sebagai elemen blok.
Saya telah menggunakan gambar yang disebut bg-crumbs.png untuk latar belakang. Ini dikenal sebagai sprite sheet sederhana dalam CSS, atau sebagai alternatif a pintu geser teknik. Ini berarti ketika pengguna mengarahkan atau mengklik sebuah tautan, kami menggeser posisi latar belakang untuk menampilkan gaya yang diperbarui. Gambar tunggal ini berisi semua 3 desain yang kita butuhkan untuk membuat latar belakang remah roti pada posisi yang berbeda, sehingga kita dapat menggunakan posisi latar belakang properti untuk dipindahkan berdasarkan interaksi pengguna.
Efek Khusus dengan CSS3
Desain remah roti asli jauh lebih mudah untuk dibuat. Ini terlihat karena banyak properti CSS lebih mendasar daripada yang Anda bayangkan, tetapi sekarang kita mulai fokus untuk menduplikasi efek ini hanya dengan CSS3!
Gaya individual membutuhkan banyak ruang jadi saya akan memecahnya menjadi 2 blok kode.
.crumbs2 display: block; margin-kiri: 27px; bantalan: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: tautan, .crumbs2 li a: visited color: # 666; display: blok; mengapung: kiri; ukuran font: 12px; padding: 7px 16px 7px 19px; posisi: relatif; teks-dekorasi: tidak ada; perbatasan: 1px solid # d9d9d9; border-right-width: 0px; . crumbs2 li a background-image: -webkit-gradient (linear, kiri bawah, kiri atas, color-stop (0,45, rgb (241.241.241)), color-stop (0.73, rgb (245.245.245))); background-image: -moz-linear-gradient (tengah bawah, rgb (241.241.241) 45%, rgb (245.245.245) 73%); / * Untuk Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Untuk Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; batas-bawah-kanan-jari-jari: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
Itu .remah2 menu menggunakan Gradien CSS untuk menduplikasi efek latar belakang. Jika Anda tidak terbiasa dengan ini, saya sangat merekomendasikan panduan Trik CSS tentang Gradien CSS3 yang seharusnya membantu Anda menggunakan gradien CSS3 secara efisien. Mereka telah memasukkan beberapa properti lagi untuk browser Microsoft dan Opera, tetapi ini tidak sepenuhnya didukung dalam semua kasus. Saya belum memasukkannya ke dalam kode demo di sini - tetapi ada baiknya memahami semua opsi.
-webkit-gradient dan -moz-linear-gradien adalah solusi inti yang melakukan sebagian besar pekerjaan. Saya sudah memasukkan kode lama untuk Internet Explorer versi lama, tetapi itu tidak dijamin untuk ditampilkan dengan benar sepanjang waktu (bagaimanapun, kami menggunakan teknik rendering gambar yang kuat). Perhatikan bahwa saya telah menetapkan kode warna RGB dan hex antara properti latar belakang. Anda bisa tetap berpegang pada satu metode atau yang lain jika Anda lebih nyaman.
Itu radius perbatasan kode ini hanya diterapkan pada navigasi remah roti sekunder kami. Ini memberikan efek rapi di kiri atas dan kanan bawah seluruh menu remah roti kami. Bilah tampaknya hampir keluar dari halaman - benar-benar efek yang fantastis pada browser yang mendukung gaya, tetapi ini hanya mencakup keadaan default untuk tautan kami. Sekarang, mari kita buat efek hover yang mirip dengan gambar yang telah kita gunakan di atas.
Batas dan Bayangan CSS3
Setiap kali pengguna mengarahkan tautan, kami ingin memperbarui beberapa hal. Pertama kita perlu menggelapkan warna batas di bagian atas dan bawah elemen aktif kami. Ini dapat dilihat pada gambar juga untuk kedua hover dan status aktif.
.crumbs2 li a: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linear, kiri bawah, kiri atas, color-stop (0,45, rgb (241.241.241)), color-stop (0.73, rgb (248.248.248)))); background-image: -moz-linear-gradient (tengah bawah, rgb (241.241.241) 45%, rgb (248.248.248) 73%); / * Untuk Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Untuk Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; warna: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; bayangan kotak: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktif border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linear, kiri bawah, kiri atas, color-stop (0,45, rgb (224.224.224)), color-stop (0.73, rgb (235.235.235))); background-image: -moz-linear-gradient (tengah bawah, rgb (224.224.224) 45%, rgb (235.235.235) 73%); / * Untuk Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Untuk Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; warna: # 333;
Saya menggunakan kode gradien yang sama persis seperti yang kami gunakan di atas, tapi kali ini warnanya jauh berbeda jika Anda memperhatikan nilai RGB kami. Masing-masing negara bagian akan menggelapkan warna teks menjadi # 333, namun deskriptor lain telah diubah sedikit agar sesuai dengan perintah pengguna.
Saat membawa Anda akan melihat efek timbul mengkilap yang ditambah dengan perbatasan gelap memberikan gaya popup halaman. Jika Anda mengklik dan menahan Anda akan masuk ke status aktif yang menampilkan a gradien latar belakang gelap. Efek ini menyebabkan tombol terlihat sebenarnya “ditekan” di halaman.
Kami juga melamar bayangan kotak properti dari spesifikasi CSS3 baru. -webkit, -moz, dan gaya default digunakan dengan pengaturan yang sama. Melayang menampilkan a bayangan terang keluar dari bagian bawah tautan yang dipilih. Saat aktif bayangan akan terbentuk di batas atas, kanan dan bawah. Efek ini dibuat dengan sisipan kata kunci ditambahkan ke akhir setiap baris properti bayangan kotak. Sekali lagi, CSS Trik adalah teman terbaik Anda di sini dengan artikel hebat tentang bayangan kotak, karena membahas tentang sintaks dan penggunaannya yang tepat di CSS3.
Bonus: Lebih Banyak Gaya
Selain kode tutorial saya telah menyertakan gambar latar belakang tambahan dengan skema warna yang disesuaikan. Saya telah mengambil sampel dari latar belakang asli dan menggunakan Adobe Photoshop untuk membuat beberapa variasi yang dapat Anda terapkan ke situs web Anda sendiri.
Ini file bonus termasuk dalam file sumber yang dapat Anda unduh dalam format arsip .zip di bagian di bawah ini.
Anda dapat melihat gambar di atas untuk mendapatkan gambaran tentang apa yang saya bicarakan. Jika Anda memerlukan skema warna tertentu, buka pop Photoshop> Gambar> Penyesuaian> Warna / Saturasi untuk memodifikasi skema warna agar sesuai dengan templat Anda sendiri, ingatlah untuk centang opsi Colorize di panel Hue / Saturation jika warnanya tidak berubah sama sekali.
Kesimpulan
Tutorial ini seharusnya membuat Anda terbiasa dengan beberapa teknik CSS3 yang lebih baru. Kami telah menciptakan dua menu remah roti yang luar biasa yang ditata dengan cara yang serupa dan membuatnya sedemikian rupa sehingga dapat terdegradasi dengan anggun di peramban yang lebih lama. Selain itu, saya menawarkan kode demo dan beberapa gambar bonus untuk Anda mainkan.
Apakah Anda terutama menyukai gaya yang kami buat di sini? Atau mungkin Anda memiliki pertanyaan atau ide tentang cara meningkatkan kode tutorial? Silakan berbagi pemikiran Anda dengan kami di area diskusi di bawah ini, dan jangan lupa untuk mengunduh file sumber sehingga Anda dapat bermain dengan demo!
Lebih banyak Tutorial CSS3
Ingin lebih banyak CSS3? Di bawah ini adalah artikel kami untuk Anda memahami CSS3 secara teoritis dan praktis!
- CSS3: Buat Logo Umpan RSS
- CSS3: Buat Bidang Pencarian
- CSS3: Buat Formulir Kontak AJAX
- CSS3: Membangun Halaman Web HTML5 / CSS3
