Advanced Search

apple.com store style fading breadcrumbs

/ Published in: JavaScript
Save to your folder(s)
Jquery is awesome.
Requires jquery!

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.