Mengekod Menu Navigasi Breadcrumb Anggun di CSS3
Menu dan pautan navigasi mungkin merupakan elemen antara muka yang paling penting kepada susunatur web. Ini adalah cawangan sahaja untuk pengguna perjalanan antara muka surat dan berinteraksi dengan semua kandungan yang telah anda buat. Breadcrumb menawarkan kefungsian yang sama dengan manfaat tambahan menjejaki kedudukan semasa anda. Anda boleh memaparkan semua laluan pautan sebelumnya kerana pengguna melangkah ke hierarki tapak anda.
Dalam tutorial ini, kami akan mencipta menu navigasi breadcrumb yang cemerlang dengan beberapa kesan CSS3. Ini telah diuji untuk bekerja dalam semua penyemak utama yang sesuai dengan CSS3, walaupun pelayar lama yang tidak menyokong CSS3 masih akan membuatnya dengan betul dalam kebanyakan kes.
Sebelum kita menyelam ke dalam kod, kita akan bercakap sedikit mengenai fungsi serbuk roti kami, tutorial penuh pada melompat!
Menawarkan Trail itu
Jejak breadcrumb tidak lebih kompleks daripada menu lain. Gaya kami akan menggunakan sifat-sifat CSS yang lebih kompleks daripada kebanyakan contoh, tetapi templat tulang terdedah masih ada untuk membimbing pengguna dari satu halaman ke halaman lain.
Dalam contoh ini, kami akan mencipta gaya yang sama seperti menu sokongan Google. Anda boleh melihat menu mereka pada halaman sokongan Gmail untuk mendapatkan idea tentang tempat kami menuju. Akhirnya kami mahu memberikan pengalaman pengguna terbaik kami untuk semua pengguna, tanpa mengira Sistem Operasi mereka atau perisian penyemak imbas, dengan itu saya telah membina 2 contoh kod yang berbeza untuk menyokong kemerosotan anggun di kalangan pelayar lama.
Yang pertama dibina menggunakan imej latar belakang adat dan penjajaran CSS yang betul. Semua acara hover dan acara aktif dibuat dengan beberapa gaya CSS sahaja, tetapi pengguna yang mempunyai imej dimatikan tidak dapat mengalami kesan ini! Itulah sebabnya saya juga telah membina menu mencari yang sama dengan gradien CSS, sudut bulat, dan bayang-bayang kotak.
Sekiranya anda gementar menyokong kedua-dua gaya yang anda boleh pilih di antara mereka untuk laman web anda sendiri. Kebanyakan pelawat akan menggunakan imej secara lalai, tetapi menggali alat analisis laman web anda jika anda mahu data pelawat yang lebih tepat.
Kata-kata yang cukup, mari kita jumpa projek itu! Kami akan mulakan dengan membina kerangka asas HTML dan bergerak ke dalam kesan gaya yang berbeza. Pertama sekali anda perlu memuat turun imej diperlukan untuk projek itu.
Bare-Bones HTML
Saya memulakan dokumen saya dengan templat laman HTML5 standard. Ini termasuk doctype lalai, CSS yang dikaitkan, dan semua elemen asas. Saya telah menambah kod di bawah jika anda ingin memulakan dokumen anda dengan cara ini. Perhatikan bahawa ia tidak akan menjejaskan bagaimana keranjang roti anda dipaparkan, jadi jangan ragu untuk menggunakan template halaman anda sendiri jika anda mahu.
Halaman Lalai
Saya akan memecahkan kod itu ke dalam dua blok berbeza. Blok pertama dengan imej dibina dengan cara yang sedikit berbeza, diikuti oleh menu kami tanpa imej. Setiap set diberi sendiri ID jadi kami dapat mengenal pasti kandungan lebih mudah. Jika anda juga peminat jQuery anda boleh menggunakannya # Pemilih untuk memanipulasi semua elemen DOM dalaman.
Pertama kita mempunyai a mengandungi div dengan id “breadcrumb“. Dalam fail demo, saya telah menggunakannya untuk memisahkan kod kami dan mengalihkannya ke halaman dengan beberapa margin tambahan. Anda boleh mengalih keluar div luar ini, tetapi anda perlu membuat semula semua perkara agar sesuai dengan templat baru. Ia benar-benar tidak menyakitkan untuk meninggalkan bekas kerana anda dapat mengawal kedudukan lebih mudah.
Secara dalaman saya telah membina serbuk roti menggunakan senarai yang tidak disusun. Terdapat begitu banyak cara unik untuk menyesuaikan senarai HTML gaya, dan serbuk roti hanyalah salah satu daripada mereka. Anda mungkin perasan saya telah memberikan item senarai awal a kelas daripada “pertama“. Ini diperlukan untuk beberapa padding tambahan untuk menyimpan barangan menu dalam talian. Tambahan pula kecil span span ditambah supaya kita mempunyai sempadan kiri yang betul yang tidak tumpang tindih imej latar belakang.
Di samping itu, setiap pautan anchor ditanam dengan bilangan yang berkurangan untuk z-indeks harta. Menggunakan imej yang kami perlukan mempunyai setiap pautan kami bertindih untuk memaparkan anak panah bulat dengan betul. Cara termudah untuk mencapai ini adalah menyesuaikan z-indeks jadi setiap pautan mengatasi seterusnya. Saya bermula dengan 9 dan bekerja dari sana, tetapi jika anda mempunyai lebih banyak pautan dalam menu anda, mulailah dengan integer yang lebih tinggi.
Menu Tanpa Imej
Untuk anggun degrade breadcrumb kami kita memerlukan satu set sekunder item senarai HTML. Jika anda cuba mundur pada satu navigasi, anda boleh menggunakan jQuery untuk mengesan ejen penyemak imbas dan menggunakan ID dengan sewajarnya. Malangnya ini tidak selalu boleh dipercayai (untuk pengguna mudah alih tertentu, contohnya). Satu lagi penyelesaian ialah termasuk helaian gaya khusus IE dan sembunyikan atau tunjukkan mana-mana menu berfungsi dengan baik - tetapi sudah tentu, pilihan ini hanya untuk Internet Explorer.
breadcrumb2 adalah ID baru kami yang digunakan untuk menyasarkan menu tanpa imej. Menjaga corak ini yang saya gunakan crumbs2 sebagai kelas untuk senarai tidak teratur. Perhatikan bahawa sebab yang kami gunakan kelas adalah untuknya kesederhanaan untuk menduplikasi menu ini, jadi apabila anda mahu beberapa roti serbuk yang berbeza di halaman anda, dengan kelas ini ini tidak akan pernah menjadi masalah.
Kami telah menyimpannya .pertama kelas tetapi ditambah pula .lepaskelas ke item senarai akhir. Tanpa imej, kami tidak dapat menduplikasikan anak panah untuk setiap item menu navigasi, jadi saya telah menggunakan beberapa sudut bulat untuk memasak menu sekunder. .pertama kelas dan .lepas memanipulasi radius sempadan di bahagian tepi menu kami untuk mencipta gaya web 2.0 yang sangat menarik.
Imej Latar Belakang CSS Meluncur
Untuk beberapa kesan yang lebih mudah, saya telah menggabungkan kedua-dua serbuk roti bersama-sama apabila membina hartanah. Ini berguna kerana ia bukan hanya menjimatkan ruang, tetapi ketika kembali mengedit gaya itu lebih mudah untuk disesuaikan pandangan anda sendiri.
Untuk kedua-dua #breadcrumb dan # breadcrumb2 Saya telah menetapkan gaya senarai: tiada; jadi semua item dalaman tidak akan mempunyai penanda. Anda boleh meninggalkan ini jika anda suka kesannya, tetapi saya mendapati HTML menjadi meletihkan untuk berfungsi dan lebih mudah untuk membuat ikon baru. Oleh itu mari kita mulakan dengan kami .serbuk kelas.
.serbuk (paparan: blok; . grumbs li display: inline; . grumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: visited color: # 666; paparan: blok; terapung: kiri; saiz fon: 12px; margin-left: -13px; padding: 7px 17px 11px 25px; kedudukan: relatif; teks-hiasan: tiada; . grumbs li a background-image: url ('... /img/bg-crumbs.png'); ulangi latar belakang: tidak ulangi; kedudukan latar belakang: 100% 0; kedudukan: relatif; . grumbs li a: hover color: # 333; kedudukan latar belakang: 100% -48px; kursor: penunjuk; .crumbs li a: active color: # 333; latar belakang: 100% -96px; . grumbs li.first span ketinggian: 29px; lebar: 3px; border-left: 1px solid # d9d9d9; kedudukan: mutlak; atas: 0px; kiri: 0px; Kami tetapkan senarai tidak teratur kami blok jadi apa-apa lagi yang merayap di sekitar kawasan itu. Perhatikan perkara senarai dipaparkan sebaris manakala setiap pautan anchor diberikan lebih banyak ruang untuk disebarkan. Kami mahu semua ruang dalam menu kami dapat diklik supaya ini memerlukan membina sauh kami sebagai elemen blok.
Saya telah menggunakan imej yang dipanggil bg-crumbs.png untuk latar belakang. Ini dikenali sebagai lembaran sprite mudah dalam CSS, atau secara alternatif a pintu gelangsar teknik. Ini bererti apabila pengguna melayang atau mengklik pada pautan, kami mengalihkan kedudukan latar belakang untuk memaparkan gaya yang dikemas kini. Imej tunggal ini mengandungi semua 3 reka bentuk yang kami perlukan untuk mencipta latar belakang breadcrumb pada kedudukan yang berbeza, jadi kami boleh menggunakannya kedudukan latar belakang harta untuk dipindahkan berdasarkan interaksi pengguna.
Kesan Tersuai dengan CSS3
Reka bentuk breadcrumb asal lebih mudah dibuat. Ini ketara kerana banyak sifat CSS yang lebih asas daripada yang anda bayangkan, tetapi kini kami mula memberi tumpuan untuk menduplikasi kesan ini dengan hanya CSS3!
Gaya individu mengambil banyak ruang sehingga saya akan memecahnya menjadi 2 blok kod.
.crumbs2 display: block; margin-left: 27px; padding: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: visited color: # 666; paparan: blok; terapung: kiri; saiz fon: 12px; padding: 7px 16px 7px 19px; kedudukan: relatif; teks-hiasan: tiada; sempadan: 1px pepejal # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradient (linear, bahagian bawah kiri, kiri atas, warna berhenti (0.45, rgb (241,241,241)), stop warna (0.73, rgb (245,245,245))); background-image: -moz-linear-gradient (bahagian tengah, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Untuk Internet Explorer 5.5 - 7 * / penapis: 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; jejari bawah-kanan-jejari: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
The .crumbs2 menu menggunakan Kecerunan CSS untuk menduplikasi kesan latar belakang. Sekiranya anda tidak mengetahui dengan ini, saya sangat mengesyorkan panduan Trik CSS pada Kecerunan CSS3 yang sepatutnya memberi anda kecerunan CSS3 dengan cekap. Mereka telah memasukkan beberapa sifat tambahan untuk pelayar Microsoft dan Opera, tetapi ini tidak disokong sepenuhnya dalam semua kes. Saya tidak memasukkannya dalam kod demo di sini - tetapi ia adalah baik untuk memahami semua pilihan.
-webkit-kecerunan dan -moz-linear-gradient adalah penyelesaian teras yang melakukan kebanyakan kerja. Saya telah memasukkan kod warisan untuk versi Internet Explorer yang lebih lama, tetapi ia tidak dijamin untuk memaparkan dengan betul sepanjang masa (kami menggunakan teknik rendering imej yang kuat, selepas semua). Perhatikan bahawa saya telah menetapkan kedua-dua kod warna RGB dan hex di antara sifat latar belakang. Anda boleh berpegang kepada satu kaedah atau yang lain jika anda lebih selesa.
The jejari sempadan kod hanya digunakan untuk navigasi pemisahan sekunder kami. Ini memberi kesan yang kemas pada bahagian atas kiri dan kanan bahagian bawah keseluruhan menu breadcrumb kami. Bar muncul untuk hampir memunculkan halaman - benar-benar kesan yang hebat pada pelayar yang menyokong gaya, tetapi ini hanya melindungi keadaan lalai untuk pautan kami. Kini, mari kita bina kesan hover sama seperti imej yang kami gunakan di atas.
Sempadan CSS3 dan Bayang-bayang
Setiap kali pengguna melayang ke pautan, kami ingin mengemas kini beberapa perkara. Pertama kita perlu gelapkan warna sempadan di bahagian atas dan bawah elemen aktif kami. Ini dapat dilihat dalam imej-imej juga untuk keadaan hover dan aktif.
.crumbs2 li a: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradien (linear, bahagian bawah kiri, kiri atas, warna-stop (0.45, rgb (241,241,241)), warna-stop (0.73, rgb (248,248,248))); background-image: -moz-linear-gradient (bahagian tengah, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Untuk Internet Explorer 5.5 - 7 * / penapis: 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; kotak-bayang: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradien (garis lurus, bahagian bawah kiri, kiri atas, warna berhenti (0.45, rgb (224,224,224)), warna-stop (0.73, rgb (235,235,235))); background-image: -moz-linear-gradient (bahagian tengah, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Untuk Internet Explorer 5.5 - 7 * / penapis: 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 kod kecerunan yang sama seperti yang kita gunakan di atas, tetapi kali ini warna berbeza jika anda melihat nilai RGB kami. Setiap negeri akan menggilap warna teks # 333, namun deskriptor lain telah diubah sedikit untuk menyesuaikan dengan arahan pengguna.
Di hover anda akan melihat a kesan berkilat yang berkilat yang digabungkan dengan sempadan gelap memberikan gaya pop timbul halaman. Jika anda klik dan tahan anda akan masuk ke dalam keadaan aktif yang mempunyai ciri-ciri kecerunan latar belakang gelap. Kesan ini menyebabkan butang melihatnya sebenarnya “ditekan” dalam halaman.
Kami juga memohon kotak-bayang sifat dari spesifikasi CSS3 baru. -webkit, -moz, dan gaya lalai digunakan dengan tetapan yang sama. Melayang memaparkan a bayangan cahaya keluar dari bahagian bawah pautan yang dipilih. Apabila aktif bayang-bayang akan terbentuk di atas, sempadan kanan dan bawah. Kesan ini dibuat dengan inset kata kunci ditambah pada akhir setiap garisan baris kotak-bayangan. Sekali lagi CSS Tricks adalah kawan terbaik anda di sini dengan artikel yang menggerunkan di kotak-bayang, kerana ia bercakap tentang sintaks dan penggunaannya yang betul dalam CSS3.
Bonus: Lebih banyak Gaya
Sebagai tambahan kepada kod tutorial saya telah memasukkan imej latar belakang tambahan dengan skema warna yang disesuaikan. Saya telah mencontohi latar belakang asal dan menggunakan Adobe Photoshop untuk mencipta beberapa variasi yang anda boleh memohon ke laman web anda sendiri.
Ini fail bonus dimasukkan ke dalam fail sumber yang boleh anda muat turun dalam format arkib .zip di bahagian bawah.
Anda boleh menyemak imej di atas untuk mendapatkan idea tentang apa yang saya bicarakan. Sekiranya anda memerlukan skema warna tertentu terbuka pop Photoshop> Imej> Pelarasan> Hue / Saturation untuk mengubah skema warna agar sesuai dengan template anda sendiri, ingatlah semak pilihan Colorize di dalam panel Hue / Saturation jika warna tidak berubah sama sekali.
Kesimpulannya
Tutorial ini sepatutnya telah anda kenali dengan beberapa teknik CSS3 yang lebih baru. Kami telah mencipta dua menu breadcrumb yang hebat dengan cara yang sama dan membinanya dengan cara yang ia boleh menurunkan anggun dalam pelayar lama. Di samping itu saya telah menawarkan kod demo dan beberapa imej bonus untuk anda bermain-main dengannya.
Adakah anda suka gaya yang kami bina di sini? Atau mungkin anda mempunyai soalan atau idea bagaimana untuk meningkatkan kod tutorial? Sila berkongsi pendapat anda dengan kami di kawasan perbincangan di bawah, dan jangan lupa untuk memuat turun fail sumber supaya anda dapat bermain dengan demo!
Lebih banyak Tutorial CSS3
Keinginan untuk lebih banyak CSS3? Berikut adalah artikel kami untuk anda memahami CSS3 secara teoritis dan praktikal!
- CSS3: Buat Logo Feed RSS
- CSS3: Buat Bidang Carian
- CSS3: Buat Borang Hubungan AJAX
- CSS3: Membina Laman Web HTML5 / CSS3
