Posted By

Kerrick on 12/21/10

Tagged

Versions (?)

Last Edited at 12/21/10 05:44am

Statistics

Viewed 1509 times

Favorited by 1 user(s)

Related snippets

CSS Triangle Breadcrumb Navigation

/ Published in: HTML

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.

Highlighted TextExpand

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Testing CSS Triangle breadcrumbs for IE8</title>
		<style>
			.breadcrumb { 
				list-style: none; 
				overflow: hidden; 
				margin: 0;
				padding: 0;
			}
			.breadcrumb li { 
				float: left; 
			}
			.breadcrumb li a {
				color: white;
				text-decoration: none; 
				padding: 5px 0 5px 50px;
				background: #a00;                   /* fallback color */
				background: rgb(140,21,21); 
				position: relative; 
				display: block;
				float: left;
			}
			.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 rgb(140,21,21);
				position: absolute;
				top: 50%;
				margin-top: -50px; 
				left: 100%;
				z-index: 5; 
			}	
			.breadcrumb li a:before { 
				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 white;
				position: absolute;
				top: 50%;
				margin-top: -50px; 
				margin-left: 1px;
				left: 100%;
				z-index: 1; 
			}
			.breadcrumb li.top a {
				padding-left: 10px;
				z-index: 5;
			}
			.breadcrumb li.level-2 a       { background:        rgb(166,25,25); z-index: 4; }
			.breadcrumb li.level-2 a:after { border-left-color: rgb(166,25,25); z-index: 4; }
			.breadcrumb li.level-3 a       { background:        rgb(191,29,29); z-index: 3; }
			.breadcrumb li.level-3 a:after { border-left-color: rgb(191,29,29); z-index: 3; }
			.breadcrumb li.level-4 a       { background:        rgb(217,33,33); z-index: 2; }
			.breadcrumb li.level-4 a:after { border-left-color: rgb(217,33,33); z-index: 2; }
			.breadcrumb li.level-5 a       { background:        rgb(242,37,37); z-index: 1; }
			.breadcrumb li.level-5 a:after { border-left-color: rgb(242,37,37); z-index: 1; }
			.breadcrumb li.current a {
				background: transparent !important;
				color: black;
				pointer-events: none;
				cursor: default;
			}
			.breadcrumb li.current a:after { border: 0; }
			.breadcrumb li a:hover { background: rgb(89,13,13); }
			.breadcrumb li a:hover:after { border-left-color: rgb(89,13,13) !important; }
		</style>
	</head>
	<body>
		<ol class="breadcrumb">
			<li class="level-1 top"><a href="/">Home</a></li>
			<li class="level-2"><a href="/vehicles/">Vehicles</a></li>
			<li class="level-3"><a href="/vehicles/vans/">Vans</a></li>
			<li class="level-4"><a href="/vehicles/vans/camper-vans/">Camper Vans</a></li>
			<li class="level-5 current"><a href="/vehicles/vans/camper-vans/1989-vw-westfalia-wagon.html">1989 VW Westfalia Wagon</a></li>
		</ol>
	</body>
</html>

Report this snippet Tweet