Advanced Search

Return to Snippet

Revision: 4447
at December 12, 2007 17:50 by lagrangeapex
Updated Code 
CSS
#breadcrumbs {  
	overflow:hidden;
	float:left;
	}
#breadcrumbs ol { 
	margin:0; 
	padding:0;
	line-height:2em;
	height:2em;
 	}

#breadcrumbs ol li {  
	list-style-type:none; 
	line-height:2em;
	padding:0px 5px;
	height:2em;
	float:left; 
	}



HTML
<div id="breadcrumbs">
	<ol>
		<li>» <a href="/">Home</a></li>
		<li>» <a href="/products" >Products</a></li>
		<li>» <a href="/products/cheese">Cheese</a></li>
	</ol>
</div>


Javascript
	$('#breadcrumbs ol li a').click(function(){
		$(this).parent().nextAll().fadeOut();
	});

Revision: 4446
at December 12, 2007 17:49 by lagrangeapex
Initial Code 
CSS
#breadcrumbs {  
	overflow:hidden;
	float:left;
	}
#breadcrumbs ol { 
	margin:0; 
	padding:0;
	line-height:2em;
	height:2em;
 	}

#breadcrumbs ol li {  
	list-style-type:none; 
	line-height:2em;
	padding:0px 5px;
	height:2em;
	float:left; 
	}



HTML
<div id="breadcrumbs">
	<ol>
		<li>&raquo; <a href="/">Home</a></li>
		<li>&raquo; <a href="/products" >Products</a></li>
		<li>&raquo; <a href="/products/cheese">Cheese</a></li>
	</ol>
</div>


Javascript
	$('#breadcrumbs ol li a').click(function(){
		$(this).parent().nextAll().fadeOut();
	});
Initial URL 









Initial Description





Jquery is awesome.
Requires jquery!









Initial Title





apple.com store style fading breadcrumbs









Initial Tags





css









Initial Language





JavaScript