Advanced Search

CSS Triangle Breadcrumb Navigation

/ Published in: HTML
Save to your folder(s)
This is a test case to show that, with a bit more work and a tiny bit more code, CSS traingles can be used for breadcrumb navigation in Internet Explorer 8.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!doctype html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8" />
  5. 		<title>Testing CSS Triangle breadcrumbs for IE8</title>
  6. 		<style>
  7. 			.breadcrumb { 
  8. 				list-style: none; 
  9. 				overflow: hidden; 
  10. 				margin: 0;
  11. 				padding: 0;
  12. 			}
  13. 			.breadcrumb li { 
  14. 				float: left; 
  15. 			}
  16. 			.breadcrumb li a {
  17. 				color: white;
  18. 				text-decoration: none; 
  19. 				padding: 5px 0 5px 50px;
  20. 				background: #a00;                   /* fallback color */
  21. 				background: rgb(140,21,21); 
  22. 				position: relative; 
  23. 				display: block;
  24. 				float: left;
  25. 			}
  26. 			.breadcrumb li a:after { 
  27. 				content: " "; 
  28. 				display: block; 
  29. 				width: 0; 
  30. 				height: 0;
  31. 				border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  32. 				border-bottom: 50px solid transparent;
  33. 				border-left: 30px solid rgb(140,21,21);
  34. 				position: absolute;
  35. 				top: 50%;
  36. 				margin-top: -50px; 
  37. 				left: 100%;
  38. 				z-index: 5; 
  39. 			}	
  40. 			.breadcrumb li a:before { 
  41. 				content: " "; 
  42. 				display: block; 
  43. 				width: 0; 
  44. 				height: 0;
  45. 				border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  46. 				border-bottom: 50px solid transparent;
  47. 				border-left: 30px solid white;
  48. 				position: absolute;
  49. 				top: 50%;
  50. 				margin-top: -50px; 
  51. 				margin-left: 1px;
  52. 				left: 100%;
  53. 				z-index: 1; 
  54. 			}
  55. 			.breadcrumb li.top a {
  56. 				padding-left: 10px;
  57. 				z-index: 5;
  58. 			}
  59. 			.breadcrumb li.level-2 a       { background:        rgb(166,25,25); z-index: 4; }
  60. 			.breadcrumb li.level-2 a:after { border-left-color: rgb(166,25,25); z-index: 4; }
  61. 			.breadcrumb li.level-3 a       { background:        rgb(191,29,29); z-index: 3; }
  62. 			.breadcrumb li.level-3 a:after { border-left-color: rgb(191,29,29); z-index: 3; }
  63. 			.breadcrumb li.level-4 a       { background:        rgb(217,33,33); z-index: 2; }
  64. 			.breadcrumb li.level-4 a:after { border-left-color: rgb(217,33,33); z-index: 2; }
  65. 			.breadcrumb li.level-5 a       { background:        rgb(242,37,37); z-index: 1; }
  66. 			.breadcrumb li.level-5 a:after { border-left-color: rgb(242,37,37); z-index: 1; }
  67. 			.breadcrumb li.current a {
  68. 				background: transparent !important;
  69. 				color: black;
  70. 				pointer-events: none;
  71. 				cursor: default;
  72. 			}
  73. 			.breadcrumb li.current a:after { border: 0; }
  74. 			.breadcrumb li a:hover { background: rgb(89,13,13); }
  75. 			.breadcrumb li a:hover:after { border-left-color: rgb(89,13,13) !important; }
  76. 		</style>
  77. 	</head>
  78. 	<body>
  79. 		<ol class="breadcrumb">
  80. 			<li class="level-1 top"><a href="/">Home</a></li>
  81. 			<li class="level-2"><a href="/vehicles/">Vehicles</a></li>
  82. 			<li class="level-3"><a href="/vehicles/vans/">Vans</a></li>
  83. 			<li class="level-4"><a href="/vehicles/vans/camper-vans/">Camper Vans</a></li>
  84. 			<li class="level-5 current"><a href="/vehicles/vans/camper-vans/1989-vw-westfalia-wagon.html">1989 VW Westfalia Wagon</a></li>
  85. 		</ol>
  86. 	</body>
  87. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.