advanced search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

lagrangeapex on 12/12/07


Tagged

css fade effect breadcrumb


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

basicmagic
sbbath
luman
kristin


apple.com store style fading breadcrumbs

Published in: JavaScript 

Jquery is awesome.
Requires jquery!


Plain TextExpand 
  1. CSS
  2. #breadcrumbs {  
  3. 	overflow:hidden;
  4. 	float:left;
  5. 	}
  6. #breadcrumbs ol { 
  7. 	margin:0; 
  8. 	padding:0;
  9. 	line-height:2em;
  10. 	height:2em;
  11.  	}
  12.  
  13. #breadcrumbs ol li {  
  14. 	list-style-type:none; 
  15. 	line-height:2em;
  16. 	padding:0px 5px;
  17. 	height:2em;
  18. 	float:left; 
  19. 	}
  20.  
  21.  
  22.  
  23. HTML
  24. <div id="breadcrumbs">
  25. 	<ol>
  26. 		<li>» <a href="/">Home</a></li>
  27. 		<li>» <a href="/products" >Products</a></li>
  28. 		<li>» <a href="/products/cheese">Cheese</a></li>
  29. 	</ol>
  30. </div>
  31.  
  32.  
  33. Javascript
  34. 	$('#breadcrumbs ol li a').click(function(){
  35. 		$(this).parent().nextAll().fadeOut();
  36. 	});

Report this snippet 

You need to login to post a comment.