Cara Membuat Link datar Style Breadcrumb dengan CSS

Cara Membuat Link datar Style Breadcrumb dengan CSS

Dengan semua progresi dari CSS dan CSS3 selama beberapa tahun terakhir kami telah mencapai titik di mana banyak dari teknik coding lama yang melibatkan gambar latar belakang sekarang dapat dibuat sepenuhnya dengan CSS. Dalam tutorial ini kita akan melihat menciptakan serangkaian link navigasi breadcrumb dalam gaya desain datar tanpa perlu "pintu geser background image" metode sebelumnya populer.

 



Link breadcrumb kami akan membuat yang ditata dengan bentuk chevron untuk mendukung gagasan mengebor ke bawah konten. Sebelumnya latar belakang PNG image akan digunakan untuk membuat bentuk chevron ini, tetapi dengan bantuan teknik perbatasan pintar efek yang sama dapat dibuat murni dengan CSS.

<Div id = "remah">
	 <Ul>
		 <Li> <a href="#"> Breadcrumb </a> </ li>
	 </ Ul>
 </ Div>

Kita akan mulai dengan cepat fleshing link navigasi breadcrumb sebagai daftar unordered. Setiap link breadcrumb akan muncul sebagai <li> dengan elemen jangkar bersarang.
 

#crumbs li ul {a
	 display: block;
	 float: kiri;
	 height: 50px;
	 background: # 3498db;
	 text-align: center;
	 padding: 30px 40px 0 40px;
	 position: relative;
	 margin: 0 10px 0 0; 
	
	 font-size: 20px;
	 text-decoration: none;
	 Warna: # fff;
 }

Gaya kode CSS awal sampai setiap item daftar jangkar sebagai persegi panjang biru rapi. Teks diposisikan secara terpusat dalam ruang dan padding sama ditambahkan ke kedua sisi. Untuk posisi elemen mutlak kemudian, position: relative; ditambahkan sehingga benda-benda yang benar-benar diposisikan akan menampilkan relatif terhadap elemen induk ini.

 

#crumbs ul li a: setelah {
	 isi: "";  
	 border-top: 40px padat merah;
	 border-bottom: 40px padat merah;
	 border-left: 40px menyala biru;
	 position: absolute;  kanan: -40px;  top: 0;
 }

Kita sekarang akan menciptakan efek chevron di CSS yang sebelumnya hanya akan dapat dicapai dengan gambar latar belakang. Gunakan :after pemilih untuk membuat elemen tambahan yang bisa ditata tersendiri. Segitiga Bentuk dihasilkan melalui penggunaan berbagai perbatasan CSS, sehingga Anda dapat melihat di demo awal segitiga biru tunggal dapat dibuat dengan menerapkan batas atas dan bawah untuk memotong tumpang tindih. Ini adalah saat ini berwarna merah untuk demonstrasi, tetapi membuat ini transparan akan menghasilkan segitiga biru tunggal. Efek perbatasan ini kemudian pindah ke tempat melalui posisi mutlak.

border-top: 40px padat transparan;
border-bottom: 40px padat transparan;
border-left: 40px solid # 3498db;

Efek perbatasan dengan nilai-nilai warna yang benar akan menghasilkan segitiga yang diinginkan yang memberikan link breadcrumb chevron bentuk populer.
 

#crumbs ul li a: sebelum {
	 isi: "";  
	 border-top: 40px padat transparan;
	 border-bottom: 40px padat transparan;
	 border-left: 40px solid # d4f2ff;
	 position: absolute;  kiri: 0;  top: 0;
 }

Menggunakan prinsip yang sama bentuk segitiga lain dapat diterapkan di sebelah kiri link breadcrumb. Kali ini warna perbatasan diatur sama dengan latar belakang halaman untuk menyamarkan bagian dari link background warna biru.

 

padding: 30px 40px 0 80px;

Segitiga ini tambahan sebelum link mempengaruhi penampilan teks, tetapi penyesuaian bantalan sederhana akan cepat memperbaiki penampilannya.
 

<Div id = "remah">
	 <Ul>
		 <Li> <a href="#1"> Satu </a> </ li>
		 <Li> <a href="#2"> Dua </a> </ li>
		 <Li> <a href="#3"> Tiga </a> </ li>
		 <Li> <a href="#4"> Empat </a> </ li>
		 <Li> <a href="#5"> Lima </a> </ li>
	 </ Ul>
 </ Div> 

Karena lebih banyak link yang ditambahkan ke HTML seri remah roti meningkat, masing-masing dipisahkan oleh keren chevron bentuk berkat efek segitiga perbatasan CSS dan sentuhan margin kanan.
 

#crumbs ul li: pertama-anak {
	 border-top-kiri-radius: 10px;  border-bottom-kiri-radius: 10px;
 }
 #crumbs ul li: pertama-anak: sebelum {
	 display: none; 
 }

 #crumbs ul li: last-anak {
	 padding-right: 80px;
	 border-top-kanan-radius: 10px;  border-bottom-kanan-radius: 10px;
 }
 #crumbs ul li: last-anak: setelah {
	 display: none; 
 }

Daftar navigasi breadcrumb lengkap dapat lebih ditata dengan menghapus efek segitiga pada pertama dan terakhir item dengan bantuan dari :first-child dan :last-child pemilih, kemudian diberi sudut bulat halus dengan border-radius .
 

#crumbs ul li a: hover {
	 background: # fa5ba5;
 }
	 #crumbs ul li a: hover: setelah {
		 border-kiri-color: # fa5ba5;
	 }

Semua yang tersisa adalah untuk menerapkan efek hover ke link. Jangan lupa untuk mengubah border-left-color pada keadaan melayang-layang dari efek segitiga sehingga link breadcrumb seluruh berubah warna.