Berkat perkembangan CSS dan CSS3 dalam beberapa tahun terakhir, kami telah mencapai momen ketika banyak solusi perangkat lunak lama, termasuk gambar latar belakang, sekarang dapat dibuat sepenuhnya pada CSS. Dalam pelajaran ini, kami akan mempertimbangkan untuk membuat urutan tautan navigasi yang disebut "remah roti", dengan gaya datar, tanpa perlu metode yang sebelumnya populer untuk bekerja dengan gambar latar belakang, yang disebut metode "geser pintu".
"Remah Roti", yang akan kita buat, bergaya dalam bentuk chevron untuk memvisualisasikan gagasan konten terstruktur. Sebelumnya, kami akan menggunakan gambar latar belakang dalam format PNG untuk membuat bentuk chevron ini, dan sekarang menggunakan gigi licik dari batas, Anda dapat membuat efek yang sama hanya menggunakan CSS.
Kami akan mulai dengan penciptaan tautan untuk menavigasi "remah roti" sebagai daftar yang tidak diukur. Masing-masing "remah roti" akan menjadi elemen
#CRUMB UL LI A (Tampilan: blok; float: kiri; tinggi: 50px; latar belakang: # 3498db; teks-align: center; padding: 30px 40px 0 40px; Posisi: 0 10px 0 0; ukuran font 0; : 20px; dekorasi teks: tidak ada; warna: #fff;)
Kode awal CSS mengatur setiap jangkar dari daftar gaya persegi panjang biru yang rapi. Teks ini terletak di tengah, dan indentasi internal yang sama ditambahkan dari semua sisi. Untuk memposisikan sepenuhnya elemen-elemen berikut, elemen-elemen ini menambahkan posisi: properti relatif;, sehingga item-item yang benar-benar memposisikan ditampilkan relatif terhadap elemen induk ini.
#CRUMB UL LI A: Setelah (konten: ""; Border-TOP: 40px Padat merah; Batas-bawah: 40px Padat merah; Batas-kiri: 40px Biru Padat; Posisi: Mutlak; TOP: 0; )
Sekarang kita akan membuat efek Chevron dalam CSS, yang dulu hanya dicapai menggunakan gambar latar belakang. Gunakan pemilih: Setelah membuat elemen tambahan yang dapat Anda atur secara individual. Bentuk segitiga dibuat menggunakan batas CSS yang berbeda, sehingga seperti yang dapat Anda lihat pada gambar sebelumnya, segitiga biru dapat dibuat dengan menerapkan batas-batas bagian atas dan bawah untuk melintasi area cakupan. Batas-batas ini dicat merah untuk kejelasan, tetapi jika mereka transparan, maka ternyata segitiga biru. Efek batas ini kemudian bergerak di tempatnya menggunakan posisi absolut.
BORDER-TOP: 40px padat transparan; Bawah batas: 40px transparan padat; Border-Left: 40px Solid # 3498DB;
Efek perbatasan dengan nilai warna yang benar akan membuat segitiga yang diinginkan, yang akan memberikan "remah roti" bentuk populer Chevron.
#CRUMB UL LI A: Sebelum: 40px padat transparan; BORDER-BOTTO: 40PX padat transparan; batas-kiri: 40px solid # D4F2FF; Posisi: absolut: 0;)
Dengan menggunakan prinsip-prinsip yang sama, formulir segitiga lain dapat diterapkan pada bagian kiri "Roti Crumb." Kali ini warna yang sama dari batas sebagai warna latar belakang diminta untuk menyembunyikan potongan latar belakang biru.
Padding: 30px 40px 0 80px;
Seperti yang direferensikan ke HTML menambahkan, urutan "remah roti" meningkat, mereka dibagi dengan bentuk yang menarik dengan Chevron, berkat efek segitiga dari batas-batas CSS dan pengembalian eksternal yang tepat.
#CRUMB UL LI: ANAK PERTAMA A (BORDER TOP-LEFT-LEFT-LEFT-RADIUS: 10PX; BORDER-BOWS-LEFT-RADIUS: 10PX;) #CRUMB UL LI: ANAK PERTAMA A: Sebelum (Display: None;) #Crumbs UL;) LI: Anak-anak terakhir A (Padding-Right: 80px; Border-Top-Right-Radius: 10px; Border-Bottom-Right-Radius: 10px;) #crumbs UL LI: Non (Display: None (Display: None) )
Blok penuh "remah roti" dapat ditata lebih lanjut dengan menghilangkan efek segitiga dari elemen pertama dan terakhir menggunakan pemilih: anak pertama dan: anak terakhir, setelah itu Anda dapat memberikan pembulatan kecil sudut menggunakan Properti border-radius.
#CRUMB UL LI A: HOVER (LATAR BELAKANG: # FA5BA5;) #CRUMB UL LI A: HOVER: Setelah (batas-kiri-warna: # FA5BA5;)
Yang tersisa adalah untuk menerapkan efek pada tautan yang terjadi ketika pointer mouse melayang. Jangan lupa untuk mengubah nilai properti warna-kiri-kiri untuk efek segitiga dalam keadaan melayang pointer mouse sehingga seluruh "remah roti" akan berubah warna.
Terjemahan - Djurka.
Halo, pembaca sayang. Pada hari ini kita akan belajar untuk membuat Remah roti yang indah (remah roti) untuk situs biasa, serta untuk blog WordPress. Saya menyarankan Anda untuk tidak melewatkan momen ini, karena remah-remah menunjukkan jalan ke artikel atau informasi Anda di situs, yang akan sangat memudahkan navigasi di situs, serta tautan internal tambahan.
CSS.
UL (margin: 0; padding: 0; Daftar-gaya: tidak ada;)Semuanya, yang pertama bukan langkah kecil yang dilakukan. Dan sekarang mari kita tambahkan pandangan indah tentang remah-remah kita.
Contoh pertama.
Bentuk elemen itu sendiri akan terdiri dari tiga bagian, yang terhubung dalam satu bagian. Untuk membuatnya lebih jelas, lihat gambar di bawah ini:
# Breadcrumbs-One (Latar Belakang: #EEE; Lebar batas: 1px; Gaya Batas: Padat; Border-Warna: # F5F5F53 #CCC; BORDER-RADIUS: 5PX; BOX-BAYAN: 0 0 2 PX RGBA (0, 0,0, .2); overflow: tersembunyi; lebar: 100%;) # Breadcrumbs-One Li (float: kiri;) # Breadcrumbs-One A (Padding: .7em 2em: kiri; Dekorasi: Tidak ada; Warna: # 444; Posisi: Relatif; Teks-Shadow: 0 1px 0 RGBA (255.255.255, .5); Latar Belakang-warna: #ddd; Background-Image: Linear-Gradient (to Right, # F5F5F5, # DDD);) # Breadcrumbs-One Li: Anak Pertama A (Padding-Left-Left: 1em; Border-Radius: 5px 0 0 5px;) # BreadCrumbs-One A: Greatcrumbs-One A :: After, # Breadcrumbs-One A :: Sebelum (konten: ";" Posisi: Absolute; Top: 50%; margin-top: -1.5em; BORDER-TOP: BORDER-BOTTERS: 1.5EM Transparan padat; batas-kiri: 1em padat; kanan: -1em;) # Breadcrumbs-One A :: afterx (z-index: 2; warna kiri-kiri: #ddd;) # BreadCrumbs-One A :: Perbatasan kiri-warna: # CCC; Kanan: -1.1em; Z-index: 1; ) # Breadcrumbs-One A: Hover :: Pearter-Warna-Warna: #fff;) # Breadcrumbs-One .Current, # Breadcrumbs-One .Current: Breat; Breadcrumbs: Break;) -Satu
Contoh kedua.
Di sini, seperti pada contoh pertama, elemen terdiri dari tiga bagian, yang dibangun dalam satu bagian menggunakan CSS.
# Breadcrumbs-Dua (Overflow: Tersembunyi; Lebar: 100%;) # Breadcrumbs-Dua Li (float: kiri; margin: 0 .5em 0 1EM;) # BreadCrumbs-Dua A (Latar Belakang: Padding: .7EM] ; Mengapung: kiri; dekorasi teks: tidak ada; warna: # 444; teks-bayangan: 0 1px 0 RGBA (255.255.255, .5); Posisi: Relative;) # Breadcrumbs-Dua A: # 99DB76;) # Breadcrumbs-Two A :: Sebelum: Mutlak; Top: 50%; margin-top: -1.5em; Lebar batas: 1.5em 0 1.5em 1EM; Gaya Batas: Border- Warna: #ddd #ddd # transparan DDD; kiri: -1em;) # Breadcrumbs-Dua A: Hover :: Sebelum (Warna Perbatasan: # 99dB76 # 99dB76 # 99db76 Transparan;) # Breadcracs-Dua A: ""; Posisi: ""; TOP: 50%; margin-top: -1.5em; border-top: 1.5em padat transparan; batas batas: 1.5em transparan padat; border-kiri: 1em solid #ddd; -1em;) # BreadCrumbs-Two;) # A: hover :: setelah (perbatasan kiri-warna: # 99dB76;) # remah roti - dua .Current, # Breadcrumbs-Dua. Arah (font-weig Ht: berani; Latar Belakang: Tidak ada; ) # Breadcrumbs-Dua .Current :: Astaga, # Breadcrumbs-Dua .Current :: Sebelum (Konten: Normal;)
Contoh ketiga.
Pada item ketiga, elemen terdiri dari dua bagian.
# Breadcrumbs-Tiga (Overflow: Hidden; Width: 100%;) # Breadcrumbs-Tiga Li (Float: Left; Margin: 0 2em 0 0;) # BreadCrumbs-Tiga A (Padding: 7EM] Kiri; dekorasi teks: tidak ada; warna: # 444; latar belakang: #ddd; Posisi: relatif; z-index: 1; Teks-shadow: 0 1px 0 RGBA (255.255.255 ,.5); border-radius: .4em 0 0 .4em;) # Breadcrumbs-Tiga A: Hover (Latar Belakang: # abe0ef;) # Breadcrumbs-Tiga A :: Setelah (Latar Belakang: #ddd; konten: -1.25em; margin-top: -1.25 ; Posisi: absolut; kanan: -1em; top: 50%; lebar: 2.5em; z-index: -1; Transformasi: Rotate (45DEG); BORDER-RADIUS: .4EM;) # BreotCrumbs-Tiga A: : Setelah (latar belakang: # abe0ef;) # remah roti-tiga. Remurrent, # Breadcrumbs-tiga .Current: hover (Font-Weight: Bold; Breader;) # BreadCurrent :: Setelah (Normal :: )
Contoh keempat.
# Breadcrumbs-Four (Overflow: Hidden; Width: 100%;) # Breadcrumbs-Four Li (Float: Left; Margin: 0 .5em 0 1em;) # BreadCrumbs-Four A (Latar Belakang: Padding: .7EM] ; Mengapung: kiri; dekorasi teks: tidak ada; warna: # 444; teks-bayangan: 0 1px 0 RGBA (255.255.255, .5); Posisi: Relatif;) # BreadCrumbs-Four A: # EFC9AB;) # Breadcrumbs-empat A :: Sebelum, # Breadcrumbs-Four A :: Setelah (konten: "; Posisi: Mutlak; Atas: 0; Bawah: 0; Latar Belakang: #ddd; Transform: Transformasi: #ddd; ;) # Breadcrumbs-Four A: -5em; Border-Radius: 5px 0 0 5px;) # Breadcrumbs-Four A: Hover :: Sebelum (Breadcrumbs-Four A :: Setelah (kanan: -5em; Border-Radius: 0 5px 5px 0;) # Breadcrumbs-Four A :: Setelah (Latar Belakang: # EFC9AB;) # BreadCrumbs-Four (Font-weight: Bold; Latar Belakang: Tidak Ada;) # Breadcrumbs-Four .Current :: After, # Breadcrumbs-Four .Current :: Sebelum: Normal;)
Contoh
Itu saja, saya percaya itu sangat stylish dan pada saat yang sama remah sederhana. Terutama tidak ada gambar, karenanya dimuat lebih cepat.
Dalam semua contoh dalam gaya yang digunakan arahkan.Itu mengubah warna elemen ketika, hanya jika Anda tidak suka bukan salah satu dari warna yang disajikan, Anda dapat dengan mudah menggantinya dengan Anda sendiri.
Sekarang saatnya untuk pergi ke bagian kedua, yaitu, kami akan melampirkan salah satu contoh blog WordPress Anda, pergi.
Bagian 2. Cara melampirkan data remah roti di blog WordPress
Jadi, pertama, kita perlu mengunduh plugin Navxt Breadcrumb, Anda dapat mengunduhnya. Setelah plugin diunduh dan diaktifkan, Anda harus membuat beberapa pengaturan:
Pengaturan ada di parameter. Di tab UMUM. Perlu untuk menemukan garis Separate Breadcrumb. Dan hapus nilai standar yang berdiri di sana, dengan kata lain, Anda harus meninggalkan lapangan kosong.
Semuanya, dengan plugin selesai, sekarang Anda perlu memilih desain yang paling Anda sukai. Dalam hal ini, gaya ini akan pada contoh:
saya t contoh kedua.yang di atas dalam artikel.
Ambil dan cukup salin gaya ini, lalu tambahkan ke gaya.css. Topik Anda, di mana pun yang paling Anda sukai, saya menyarankan Anda untuk menyoroti awal dan akhir gaya remah, karena jika di masa depan saya ingin berganti di sana, bingung.
Sekarang Anda perlu menambahkan remah roti langsung ke blog.
Di blog admin ditemukan penampilan, kemudian editor, dan pilih single.php.. Selanjutnya, tambahkan yang berikut:
Penting
Harap dicatat bahwa tantangan penjahat itu sendiri bernilai antar tag. ID yang mana remah roti dua.Jangan lupa untuk mengubah ID ini untuk contoh yang ditambahkan ke gaya. Misalnya, jika ini adalah contoh pertama (yang lebih tinggi) maka harus seperti ini:
Jika Anda memiliki template di blog terlihat seperti saya, dalam arti latar belakang abu-abu dan blok itu sendiri putih, remah-remah paling baik diletakkan di blok, seperti saya. Karena mereka dapat dipindahkan ke string baru jika namanya terlalu panjang dan, percayalah, itu tidak terlalu indah. :-)
Itu saja. Teman-teman yang terhormat jika ada kesulitan yang muncul tanyakan di komentar. Sampai jumpa lagi.
Dalam artikel sebelumnya "navigasi remah roti dengan segitiga pada CSS" menggambarkan cara membuat menu menggunakan CSS murni, tanpa menggunakan grafik.
Metode ini baik untuk semua orang, dengan pengecualian satu - dukungan dari menu seperti itu di browser lama diragukan. Tetapi dengan transfer artikel ini, referensi dirujuk ke cara untuk membuat navigasi menggunakan grafik.
Artikel ini ditulis untuk waktu yang lama, tetapi metode ini benar-benar berfungsi. Penulis artikel Veerle Pieter, dan posting itu sendiri disebut "Breadcrumbs berbasis CSS sederhana berbasis". Di bawah ini saya bahkan tidak terjemahan gratis, tetapi menceritakan kembali gratis.
Beberapa hari yang lalu saya memiliki tugas membuat menu navigasi dalam gaya "remah roti" (remah roti) untuk situs yang saya kerjakan. Saya tidak berpikir bahwa menu seperti itu diperlukan untuk setiap situs, tetapi dalam beberapa kasus itu sangat berguna dan praktis.
Namun, contoh ini seolah-olah dasar yang dapat diperluas dan diterapkan dalam praktik. Menu akan dibuat menggunakan daftar label biasa.
| 1 | Ule |
Tetapi pertama-tama lihat sampel dengan siapa kita akan bekerja:
Menu ini cukup sederhana, seperti kode yang dengannya kami akan membuatnya.
Kode HTML - Daftar UL dasar
- RUMAH
- Bagian utama.
- Sub bagian.
- Sub Sub Sub.
- Halaman Anda berada sekarang
Semua item menu memiliki tautan kecuali yang terakhir - "Halaman Anda sekarang" (halaman saat ini Anda berada). Saat mengerjakan menu, saya bertanya-tanya apakah daftar struktur yang paling tepat adalah membuat menu? Saya percaya bahwa penerapan daftar dalam hal ini bukan aturan ketat, tetapi menurut saya adalah pilihan yang paling semantik dan benar.
Kode CSS - Buat gaya untuk menu
Kami menentukan gaya umum untuk menu - lepaskan spidol dan setel ulang indentasi di browser Firefox, yaitu:
Kami membuat mengambang melalui properti setara dengan ketinggian seluruh menu. Dan mengatur warna teks. Selanjutnya, kami menempatkan untuk referensi gambar latar belakang dipotong dari tata letak. Untuk melakukan ini, potong hanya "panah" itu sendiri:... yang "hanya" bergegas "ke kanan (100%) dan tempatkan tepat vertikal (50%). Kami juga melakukan dari referensi ke kanan ke kanan
| 1 | Padding-Left: 15px |
Sudah hampir semuanya dilakukan. Masih harus mengatur gaya tautan teks. Kami menghapus standar garis bawah dan mengubah warnanya:
.Crumbs Li A: Tautan, .Crumbs Li A: Mengunjungi (teks-dekorasi: tidak ada; Warna: # 777;)| 1 | : hover. |
| 1 | : fokus |
Hasil dari pekerjaan kami disajikan di sini:
Catatan Penerjemah:
Penulis artikel itu menyederhanakan contoh dan kode itu sendiri, sesuai, sejauh yang saya mengerti. Faktanya adalah bahwa contoh jelas terlihat gradien horizontal linier untuk masing-masing item menu. Namun, itu tidak ditampilkan dalam kode. Nah, bukan masalah - apakah itu masalah untuk membuat gradien linier pada CSS3? Tugas itu sendiri terpenuhi!
Navigasi dalam bentuk "remah roti" membantu pengunjung situs untuk menavigasi dalam struktur hierarkis dokumen dan menemukan jalan ke tingkat atas. Oleh karena itu, jika sejumlah besar dokumen terletak di situs, itu harus dilengkapi dengan "remah roti". Dalam pelajaran ini, kode CSS akan disajikan untuk membuat berbagai opsi desain untuk alat navigasi yang diinginkan.
Markup HTML.
Menandai sederhana dan minim. Ini didasarkan pada daftar yang tidak berurutan.
CSS.
Untuk memulai, kami akan membuat reset CSS kecil untuk daftar Anda yang tidak teratur:
UL (margin: 0; padding: 0; Daftar-gaya: tidak ada;)
Untuk desain unsur-unsur pseudo "remah roti" akan digunakan.
Contoh pertama.
Dalam contoh ini, teknik yang sangat sederhana digunakan. Segitiga dibuat pada bingkai ke kanan dengan bantuan elemen pseudo menempatkan satu di atas yang lain. Segitiga gelap bergeser untuk membuat efek bingkai.
# Breadcrumbs-One (Latar Belakang: #EEE; Lebar batas: 1px; Gaya Batas: Padat; Border-Warna: # F5F5F53 #CCC; BORDER-RADIUS: 5PX; BOX-BAYAN: 0 0 2 PX RGBA (0, 0,0, .2); overflow: tersembunyi; lebar: 100%;) # Breadcrumbs-One Li (float: kiri;) # Breadcrumbs-One A (Padding: .7em 2em: kiri; Dekorasi: Tidak ada; Warna: # 444; Posisi: Relatif; Teks-Shadow: 0 1px 0 RGBA (255.255.255, .5); Latar Belakang-warna: #ddd; Background-Image: Linear-Gradient (ke Kanan, # F5F5F5, # DDD);) # Breadcrumbs-One Li: Anak Pertama A (Padding-Left-Left: 1em; Border-Radius: 5px 0 0 5px;) # BreadCrumbs-One A: Greatcrumbs-One A :: After, # Breadcrumbs-One A :: Sebelum (konten: ";" Posisi: Absolute; Top: 50%; margin-top: -1.5em; BORDER-TOP: BORDER-BOTTERS: 1.5EM Transparan padat; batas-kiri: 1em padat; kanan: -1em;) # Breadcrumbs-One A :: afterx (z-index: 2; warna kiri-kiri: #ddd;) # BreadCrumbs-One A :: Perbatasan-kiri-warna: #ccc; ri GHT: -1.1em; Z-index: 1; ) # Breadcrumbs-One A: Hover :: Pearter-Warna-Warna: #fff;) # Breadcrumbs-One .Current, # Breadcrumbs-One .Current: Breat; Breadcrumbs: Break;) -Satu .Current :: Afterter, # Breadcrumbs-One .Current :: Sebelum (Konten: Normal;)
Bentuk CSS dibangun menggunakan elemen pseudo yang ditempatkan sebelum dan sesudah elemen.
# Breadcrumbs-Dua (Overflow: Tersembunyi; Lebar: 100%;) # Breadcrumbs-Dua Li (float: kiri; margin: 0 .5em 0 1EM;) # BreadCrumbs-Dua A (Latar Belakang: Padding: .7EM] ; Mengapung: kiri; dekorasi teks: tidak ada; warna: # 444; teks-bayangan: 0 1px 0 RGBA (255.255.255, .5); Posisi: Relative;) # Breadcrumbs-Dua A: # 99DB76;) # Breadcrumbs-Two A :: Sebelum: Mutlak; Top: 50%; margin-top: -1.5em; Lebar batas: 1.5em 0 1.5em 1EM; Gaya Batas: Border- Warna: #ddd #ddd # transparan DDD; kiri: -1em;) # Breadcrumbs-Dua A: Hover :: Sebelum (Warna Perbatasan: # 99dB76 # 99dB76 # 99db76 Transparan;) # Breadcracs-Dua A: ""; Posisi: ""; TOP: 50%; margin-top: -1.5em; border-top: 1.5em padat transparan; batas batas: 1.5em transparan padat; border-kiri: 1em solid #ddd; -1em;) # BreadCrumbs-Two;) # A: Hover :: After (Border Kiri-Warna: # 99dB76;) # BreadCrumbs-Dua .Current, # Breadcrumbs-Dua. Arah (Font-weight: Bold; Latar Belakang: Tidak Ada; ) # Breadcrumbs-Dua .Current :: Astaga, # Breadcrumbs-Dua .Current :: Sebelum (Konten: Normal;)
Menggunakan properti RADIUS-BORDER, sudut persegi panjang dan kotak melengkung. Square putaran untuk membuat berlian darinya.
# Breadcrumbs-Tiga (Overflow: Hidden; Width: 100%;) # Breadcrumbs-Tiga Li (Float: Left; Margin: 0 2em 0 0;) # BreadCrumbs-Tiga A (Padding: 7EM] Kiri; dekorasi teks: tidak ada; warna: # 444; latar belakang: #ddd; Posisi: relatif; z-index: 1; Teks-shadow: 0 1px 0 RGBA (255.255.255 ,.5); border-radius: .4em 0 0 .4em;) # Breadcrumbs-Tiga A: Hover (Latar Belakang: # abe0ef;) # Breadcrumbs-Tiga A :: Setelah (Latar Belakang: #ddd; konten: -1.25em; margin-top: -1.25 ; Posisi: absolut; kanan: -1em; top: 50%; lebar: 2.5em; z-index: -1; Transformasi: Rotate (45DEG); BORDER-RADIUS: .4EM;) # BreotCrumbs-Tiga A: : Setelah (latar belakang: # abe0ef;) # remah roti-tiga. Remurrent, # Breadcrumbs-tiga .Current: hover (Font-Weight: Bold; Breader;) # BreadCurrent :: Setelah (Normal :: )
Dengan bantuan elemen Pseudo, dua persegi panjang ditambahkan. Kemudian mereka melingkari sudut.
# Breadcrumbs-Four (Overflow: Hidden; Width: 100%;) # Breadcrumbs-Four Li (Float: Left; Margin: 0 .5em 0 1em;) # BreadCrumbs-Four A (Latar Belakang: Padding: .7EM] ; Mengapung: kiri; dekorasi teks: tidak ada; warna: # 444; teks-bayangan: 0 1px 0 RGBA (255.255.255, .5); Posisi: Relatif;) # BreadCrumbs-Four A: # EFC9AB;) # Breadcrumbs-empat A :: Sebelum, # Breadcrumbs-Four A :: Setelah (konten: "; Posisi: Mutlak; Atas: 0; Bawah: 0; Latar Belakang: #ddd; Transform: Transformasi: #ddd; ;) # Breadcrumbs-Four A: -5em; Border-Radius: 5px 0 0 5px;) # Breadcrumbs-Four A: Hover :: Sebelum (Breadcrumbs-Four A :: Setelah (kanan: -5em; Border-Radius: 0 5px 5px 0;) # Breadcrumbs-Four A :: Setelah (Latar Belakang: # EFC9AB;) # BreadCrumbs-Four (Font-weight: Bold; Latar Belakang: Tidak Ada;) # Breadcrumbs-Four .Current :: After, # Breadcrumbs-Four .Current :: Sebelum: Normal;)
Keuntungan dari desain "remah roti" berdasarkan pada CSS3
- Tidak ada gambar, jadi perbarui dan pertahankan.
- Sisik mudah.
- Kompatibilitas terbalik dengan browser lama.
Dalam pelajaran ini, Anda akan berkenalan dengan proses pembuatan rantai navigasi Bootstrap 3 dan 4 ("remah roti").
Menandai rantai navigasi
Rantai navigasi ("remah roti", breadcrumbs) adalah skema navigasi yang menunjukkan posisi pengguna saat ini di situs. Mereka digunakan untuk menampilkan informasi yang terorganisir secara hierarkis. Misalnya, di toko online "remah roti" biasanya mewakili rantai bagian. Dengan bantuan mereka, pengguna dapat menentukan bagian mana sekarang, serta mereka memungkinkan Anda untuk pergi ke bagian level yang lebih tinggi, I.E. Memberikan kemungkinan lain untuk menavigasi struktur situs.
"Remak Remah" di Bootstrap adalah daftar pesanan biasa dengan remah roti kelas. Elemen Daftar Pemisah secara otomatis ditambahkan menggunakan CSS (Bootstrap.min.css) melalui kelas berikut:
Breadcrumbs\u003e Li + Li: Sebelum (Warna: #CCCCCC; Konten: "/"; Padding: 0 5px;)
Contoh membuat "remah roti" dengan bootstrap.
Registrasi rantai navigasi di bootstrap
Satu lagi contoh:
Remah roti untuk menavigasi informasi arsip
Bukan varian standar dari desain remah roti
Pertimbangkan contoh membuat perwujudan remah roti berikut:
Contoh desain remah roti di situs
Proses pembuatan remah roti terdiri dari pengembangan struktur dan gaya HTML (CSS).
CRUMPS ROAD CSS:
/ * remah roti * / #breadcrumb (daftar-gaya: tidak ada; display: inline-blok; padding-kiri: 0px;) #breadcrumb .icon (font-size: 14px;) Breadcrumb; Li A (Warna: #fff; Tampilan: Background: # cc2eaa; dekorasi teks: Tidak ada; Posisi: relatif; tinggi: 34px; garis-tinggi: 34px; Padding: 0 10px; Text-align: Center; margin-right: 23px; -webkit-user-pilih: none; -moz-user-pilih: none; -s-user-pilih: tidak ada; pengguna-pilih: none;) #BreadCrumb Li: Anak Pertama A (None -Left: 15px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px;) #Breadcc Li: Anak Pertama A: Sebelumnya (Perbatasan: ;) #Breadcrumb Li: anak terakhir A (Padding-Right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0;) # Breadcrumb 0;) LI: Anak Terakhir A: Setelah (Batas: Tidak Ada;) #Breadcrumb Li A: Sebelum, #BreadCrumb Li A: Setelah (konten: "; Posisi: Mutlak: 0; Border: 0; Border: 0; CC2EAA; Lebar batas: 17px 10px; Lebar: 0; Tinggi: 0; ) #BreadCrumb Li A: Sebelum (kiri: -20px; warna kiri-kiri: transparan;) #BreadCrumb Li A: Setelah (kiri: 100%; warna batas: transparan - warna kiri: # CC2EA;) #Breadcrumb Li A: Arahkan kursara (latar belakang-warna: # A22587;) #BreadCrumb Li A: Arahkan: Sebelum (Warna Batas: # A22587; Warna-Kiri-Warna: Transparan;) #BreadCrumb Li A: Hover: Setelah (Border - Kiri-warna: # A22587;) #Breadcrumb Li A: aktif (latar belakang-warna: # A22587;) #BreadCrumb Li A: Aktif: Sebelum (Warna Perbatasan: # A22587; Warna Batas-Kiri;) # Breadcrumb LI A: Aktif: Setelah (batas-kiri-warna: # A22587;) #BreadCrumb li.current A (peristiwa pointer: tidak ada; kursor: tidak diizinkan; filter: alpha (opacity \u003d 65); -webkit-box -Shadow : Tidak ada; box-shadow: tidak ada; opacity: .65;)
Perubahan warna dibuat dengan mengedit nilai-nilai properti CSS yang sesuai.
Penandaan HTML:
Unsur terkemuka dari elemen saat ini (jika digunakan dalam rantai) dilakukan dengan menambahkan kelas saat ini ke elemen LI.
