Posted By

lagrangeapex on 12/12/07


Tagged

css fade effect breadcrumb


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

basicmagic
sbbath
luman
kristin
traktorist
seanpowell
Some0ne


apple.com store style fading breadcrumbs


 / Published in: JavaScript
 

Jquery is awesome. Requires jquery!

  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.