Seo Style | Breadcrumbs Navigasi Dengan CSS3 – So Cool!

Seo Style | Breadcrumbs Navigasi Dengan CSS3 – So Cool!-Tahukah Anda bahwa Anda dapat membuat segitiga dengan CSS murni? Anda hanya membuat elemen blok tingkat dengan nol lebar dan tinggi, perbatasan berwarna di satu sisi, dan perbatasan transparan pada dua sisi yang berdekatan. 

Mereka menyenangkan untuk segala macam hal, seperti panah kecil mencuat keluar dari gelembung pidato, pointer navigasi, dan banyak lagi.Sering kali ini hanya berkembang visual, tidak layak markup berdedikasi. Untungnya, unsur pseduo sering cocok. Artinya, dengan menggunakan: sebelum,: setelah, atau keduanya untuk membuat elemen blok tingkat ini dan menempatkan segitiga. Satu rapi penggunaan yang datang ke pikiran dalam vena ini: navigasi breadcrumb.

The HTML Markup

Mari kita menjaga hal-hal yang benar-benar bersih mungkin, dan pergi dengan daftar unordered sederhana dengan kelas “breadcrumb”:

 <ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
<li><a href="#">1989 VW Westfalia Vanagon</a></li>
</ul>

CSS

Pertama kita akan memastikan daftar kami tidak terlihat seperti sebuah daftar yang khas. Kami akan unstyle itu, mengapung item ke kiri dan mendirikan styling sangat dasar untuk setiap link.Perhatikan overflow yang tersembunyi pada daftar itu sendiri, ini akan berguna untuk dua alasan. Satu, memastikan menu memiliki ketinggian. Wadah yang hanya berisi runtuhnya melayang elemen, yang seringkali tidak ideal. Dua, ketika kita membuat segitiga kita, kita akan membuat mereka besar.

.breadcrumb { 
 list-style: none; 
 overflow: hidden; 
 font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li { 
 float: left; 
}
.breadcrumb li a {
 color: white;
 text-decoration: none; 
 padding: 10px 0 10px 65px;
 background: brown;                   /* fallback color */
 background: hsla(34,85%,35%,1); 
 position: relative; 
 display: block;
 float: left;
}

Untuk membuat segitiga, kita akan menggunakan: setelah pemilih untuk membuat elemen semu. Ini akan menjadi blok-tingkat, dari nol tinggi dan lebar, dan benar-benar diposisikan 100% ke kiri, yang berarti ia akan mulai di tepi kanan induknya. Kami akan posisi itu 50% dari atas, dan tarik kembali-50px dengan marjin, yang akan memastikan itu benar-benar terpusat. Ini adalah trik klasik . Sebuah hal-hal lain yang perlu diperhatikan. Perbatasan kita akan gunakan adalah 50px di atas, 50px di bagian bawah, dan pada (membuat panah menghadap ke kanan) kiri saja 30px. Ini berarti panah lebih rata berwajah. Jika kita pergi lebih tinggi dari 50px akan lebih tajam tip. Sama dengan 50px akan membuat 90 derajat yang sempurna. Karena batas atas dan bawah yang 50px masing-masing, yang membuat ketinggian 100px panah. 100px jauh lebih tinggi dari menu kami adalah mungkin dengan ukuran font 18px itu dan 10px padding atas dan bawah. Ini adalah hal yang baik. Ini berarti kita memiliki banyak ruang untuk bermain dengan tweaking ukuran font tanpa khawatir segitiga akan menunjukkan batasnya.

.breadcrumb li a:after { 
 content: " "; 
 display: block; 
 width: 0; 
 height: 0;
 border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
 border-bottom: 50px solid transparent;
 border-left: 30px solid hsla(34,85%,35%,1);
 position: absolute;
 top: 50%;
 margin-top: -50px; 
 left: 100%;
 z-index: 2; 
}

Perhatikan garis putih kecil 1px pemisahan? Itu sedikit trik lain. Kita tidak dapat menambahkan perbatasan langsung ke segitiga, karena sudah terbuat dari perbatasan! Sebaliknya kita akan membuat segitiga yang lain, dan set belakang segitiga asli kami, dan warna putih. Yang satu ini menggunakan: sebelum pemilih, tetapi jika tidak persis sama. Perhatikan bahwa z-index adalah apa yang penting di sini. Anda bisa beralih sekitar yang segitiga menggunakan: setelah dan yang menggunakan: sebelumnya, itu benar-benar tidak masalah.

.breadcrumb li a:before { 
 content: " "; 
 display: block; 
 width: 0; 
 height: 0;
 border-top: 50px solid transparent;       
 border-bottom: 50px solid transparent;
 border-left: 30px solid white;
 position: absolute;
 top: 50%;
 margin-top: -50px; 
 margin-left: 1px;
 left: 100%;
 z-index: 1; 
}

Sekarang ke pewarnaan. Karena kita akan sentuhan progresif di sini, ada dua bit CSS saya pikir adalah pertandingan yang sempurna untuk ide ini: nth-anak dan HSLA .

• Sejuk bagian tentang n-anak: kita bisa mewarnai tingkat yang berbeda dari breadcrumb tanpa markup tambahan


• Bagian keren tentang HSLA: kita bisa mewarnai tingkat yang berbeda dari remah roti berdasarkan rona tunggal dengan nuansa yang berbeda sangat mudah

Selain pewarnaan, kita akan membuat link pertama memiliki kurang padding kiri (kurang dibutuhkan tunggal segitiga tidak sampai di panggangan nya) dan kami akan membuat link terakhir tidak memiliki warna sama sekali serta tidak merespon untuk klik atau menunjukkan kursor pointer. Kita bisa melakukan ini juga tanpa markup tambahan yang diperlukan melalui: pertama-anak dan: terakhir anak.

.breadcrumb li:first-child a {
 padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
 background: transparent !important;
 color: black;
 pointer-events: none;
 cursor: default;
}

Dan akhirnya, hover negara. Trik hanya di sini adalah bahwa kita perlu mewarnai segitiga serta link. Tidak ada masalah besar.

.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }